GitNoise/.block

## .block
license: mit

## README.md

      
    Raw
  

              README.md
            
          
    Built with blockbuilder.org

  
## index.html
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale.v1.min.js"></script>

  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

    circle {
      stroke: black
    }

    line {
      stroke: gray;
    }
  </style>
</head>

<body>
  <script>

    var config = { width: 200, height: 350, margin: 30 }
   	var circleRadius = 16,
    	 	midpointRatio = 1,
        mixStrategyBreak = 4,
        minYDistanceSortVal = 11;

    var circles = [{ x: 50, y: 20, color: 'gray' },
                  { x: 50, y: 30, color: 'gray' },
                  { x: 50, y: 40, color: 'gray' },
                  { x: 30, y: 55, color: 'gray' },
                  { x: 10, y: 70, color: 'orange' },
                  { x: 20, y: 80, color: 'steelblue' },
                  { x: 35, y: 70, color: 'green' }]


    // optional ordering
    circles = circles.sort(function(a,b) { return Math.abs(a.y - b.y) < minYDistanceSortVal ? a.x < b.x : false; })

    //circles = circles.sort(function(a,b) { return a.y - b.y < 10 ? a.y > b.y : false; })

    var maxX = d3.max(circles, function(d) { return d.x; });

    var yScaleStart = d3.scaleLinear()
 			.domain([0, 100])
    	.range([config.margin, (config.height - config.margin) / 2 ]);

    function endY(i, length) {
      return ((config.height - config.margin*2) / length) * i + config.margin;
    }

    function endX (d) {
      return config.width - config.margin - maxX + d.x;
      return config.width - config.margin;
    }

 		var midPoint = (config.width / (midpointRatio + 1)) * midpointRatio;

    function splitStrategy(d, i) {
      if (i > mixStrategyBreak) return d.x;
      else return midPoint;
    }

		function startX (d, i) {
      //return midPoint;
      //return d.x;
      return splitStrategy(d, i);
    }

function run(width) {
  	config.width = width || config.width;

    var svg = d3.select("body").append("svg")
      .attr("width", config.width)
      .attr("height", config.height)


    var gs = svg.selectAll('g')
    	.data(circles)
    	.enter()
    	.append('g');

   	gs.append('line').classed('angle', true)
    		.attrs({
      		x1: function(d) { return d.x; },
      		x2: startX,
      		y1: function(d) { return yScaleStart(d.y); },
      		y2: function(d,i) { return endY(i, circles.length); },
    		})

    gs.append('line').classed('straight', true)
    		.attrs({
      		x1: startX,
      		x2: endX,
      		y1: function(d,i) { return endY(i, circles.length); },
      		y2: function(d,i) { return endY(i, circles.length); },
    		})

   	gs.append('circle')
    	  .attrs({
      		cx: function(d) { return d.x; },
     	 		cy: function(d,i) {
            return yScaleStart(d.y); },
     		 	r: 3
    		})
      	.style('fill', function(d) { return d.color; })

   	gs.append('circle')
    	  .attrs({
      		cx: endX,
     	 		cy: function(d,i) { return endY(i, circles.length); },
     		 	r: circleRadius
    		})
     		.style('fill', function(d) { return d.color; })
    };

    run();
    run(500);
    run(900);


  </script>
</body>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="utf-8">
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
	<script src="https://d3js.org/d3-scale.v1.min.js"></script>

	<style>
	body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }

	circle {
	stroke: black
	}

	line {
	stroke: gray;
	}
	</style>
	</head>

	<body>
	<script>

	var config = { width: 200, height: 350, margin: 30 }
	var circleRadius = 16,
	midpointRatio = 1,
	mixStrategyBreak = 4,
	minYDistanceSortVal = 11;

	var circles = [{ x: 50, y: 20, color: 'gray' },
	{ x: 50, y: 30, color: 'gray' },
	{ x: 50, y: 40, color: 'gray' },
	{ x: 30, y: 55, color: 'gray' },
	{ x: 10, y: 70, color: 'orange' },
	{ x: 20, y: 80, color: 'steelblue' },
	{ x: 35, y: 70, color: 'green' }]


	// optional ordering
	circles = circles.sort(function(a,b) { return Math.abs(a.y - b.y) < minYDistanceSortVal ? a.x < b.x : false; })

	//circles = circles.sort(function(a,b) { return a.y - b.y < 10 ? a.y > b.y : false; })

	var maxX = d3.max(circles, function(d) { return d.x; });

	var yScaleStart = d3.scaleLinear()
	.domain([0, 100])
	.range([config.margin, (config.height - config.margin) / 2 ]);

	function endY(i, length) {
	return ((config.height - config.margin2) / length) i + config.margin;
	}

	function endX (d) {
	return config.width - config.margin - maxX + d.x;
	return config.width - config.margin;
	}

	var midPoint = (config.width / (midpointRatio + 1)) * midpointRatio;

	function splitStrategy(d, i) {
	if (i > mixStrategyBreak) return d.x;
	else return midPoint;
	}

	function startX (d, i) {
	//return midPoint;
	//return d.x;
	return splitStrategy(d, i);
	}

	function run(width) {
	config.width = width \|\| config.width;

	var svg = d3.select("body").append("svg")
	.attr("width", config.width)
	.attr("height", config.height)


	var gs = svg.selectAll('g')
	.data(circles)
	.enter()
	.append('g');

	gs.append('line').classed('angle', true)
	.attrs({
	x1: function(d) { return d.x; },
	x2: startX,
	y1: function(d) { return yScaleStart(d.y); },
	y2: function(d,i) { return endY(i, circles.length); },
	})

	gs.append('line').classed('straight', true)
	.attrs({
	x1: startX,
	x2: endX,
	y1: function(d,i) { return endY(i, circles.length); },
	y2: function(d,i) { return endY(i, circles.length); },
	})

	gs.append('circle')
	.attrs({
	cx: function(d) { return d.x; },
	cy: function(d,i) {
	return yScaleStart(d.y); },
	r: 3
	})
	.style('fill', function(d) { return d.color; })

	gs.append('circle')
	.attrs({
	cx: endX,
	cy: function(d,i) { return endY(i, circles.length); },
	r: circleRadius
	})
	.style('fill', function(d) { return d.color; })
	};

	run();
	run(500);
	run(900);


	</script>
	</body>