Old school D3 from simpler times

All examples By author By category About

ezzaouia

Full window Github gist

path sankey :p

Built with blockbuilder.org

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var svg = d3.select("body").append("svg")
      .attr("width", 960)
      .attr("height", 900)

let graph1 = [{source: {x:46, y:127}, target: {x: 200, y: 400}, l: 20},
                 {source: {x:50, y:50}, target: {x: 300, y: 400},l: 20}];
    
    // data
    let data1 = { m: {t1:25, t2:10,  t3:2}, n:{t1: 5, t2: 1,  t3:4}, q: {t1:53, t2:10,  t3:10} };
    
    let data2 = { m: {t1:1, t2:6,  t3:2}, n:{t1: 15, t2: 1,  t3:4}, q: {t1:9, t2:10,  t3:10}, p: {t1:14, t2:10,  t3:2} };
    
    let colors = {m: 'red', q: 'blue', n: 'green', p: 'orange'};
   
    let max = _.max(_.flatten(_.map(_.values(data1), _.values)));
    let strokeScale = d3.scaleLinear().domain([0, max]).range([0, 20]);
    
    // data mapping
    let x = 182;  let y = 28;
    let dx = 184;  let dy = 229;
    let pad = 1;
   
    
    function generateDatum(data, x, y, dx, dy) {
      let t = dx;
    	let datum = [];
    	let map = {};
    	_.each(data,  (v, k) => {
        
      	_.each(v, (vt, kt) => {
          
        	x += strokeScale(vt)/2;
        	map[kt] = (map[kt]||0) + strokeScale(vt)/2;
          datum.push({
            	type: k,
            	source: { x: x,  y: y },
            	target: { x: dx + map[kt] ,  y: dy },
            	strokeWidth: strokeScale(vt),
            	c: colors[k],
          });
	     		dx += 81;
        	x += strokeScale(vt)/2 + pad;
        	map[kt] +=  strokeScale(vt)/2 + pad;
      	});
      
      	dx = t ;
      	x += 50;
    	});
      
      return datum;
    }
    
    var _data1 = generateDatum(data1, x, y, dx, dy);
    
    svg.selectAll('.links')
    	.data(_data1)
    	.enter()
    	.append('path')
    	.attr('d', link)
    	.style('fill', 'none')
    	.style('mix-blend-mode', 'multiply')
    	.style('stroke', d => d.c)
    	.style('stroke-width', d => d.strokeWidth)
    
    /*
    svg.selectAll('.links')
    	.data(generateDatum(data2, x, dy + dy, dx, dy+ 20))
    	.enter()
    	.append('path')
    	.attr('d', link)
    	.style('fill', 'none')
    	.style('mix-blend-mode', 'multiply')
    	.style('stroke', d => d.c)
    	.style('stroke-width', d => d.strokeWidth)
    */
    
    
    function link(d) {
      return "M" + d.source.x + "," + d.source.y
        + "C" + d.source.x +  "," + (d.source.y + d.target.y) / 2
        + " " + d.target.x + "," + (d.source.y + d.target.y) / 2
        + " " + d.target.x + "," + d.target.y;
    }

</script>
</body>

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

https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min.js