Old school D3 from simpler times

All examples By author By category About

GitNoise

Full window Github gist

linecross labels

Built with blockbuilder.org

<!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>

https://d3js.org/d3.v4.min.js

https://d3js.org/d3-selection-multi.v1.min.js

https://d3js.org/d3-scale.v1.min.js