Old school D3 from simpler times

All examples By author By category About

Q-Zhao

Full window Github gist

Re-create curved lines

Built with blockbuilder.org

This figures are re-production of 1 straight and 2 curved lines.

This bar chart was forked from Viz Data Ltd's block: Interpolation(v4).

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

<body>
  <script>
    
    var dataArray_0 = [	{x:5, y:5},
                      	{x:40, y:18}];
    
    var dataArray_1 = [	{x:5, y:5},
                      	{x:18, y:7},
                      	{x:28, y:18},
                      	{x:40, y:20},];
    
    var dataArray_2 = [{x:5, y:5},
                       {x:10, y:12},
                       {x:20, y:10},
                       {x:30, y:18},
                       {x:40, y:10}];

var svg = d3.select("body")
                .append("svg")
                .attr("height","100%")
                .attr("width","100%");

var line0 = d3.line()
        .x(function(d) { return 0 + (d.x * 5); })
        .y(function(d) { return 200 - (d.y * 5); });
    var line1 = d3.line()
        .x(function(d) { return 200 + (d.x * 5); })
        .y(function(d) { return 200 - (d.y * 5); })
        .curve(d3.curveCardinal);
    var line2 = d3.line()
        .x(function(d) { return 400 + (d.x * 5); })
        .y(function(d) { return 200 - (d.y * 5); })
        .curve(d3.curveCardinal);
        
    svg.append("g").attr("class","group0")
			.append("path")
			.style("fill","none")
			.style("stroke","black")
			.style("stroke-width","4px")
			.attr("d",function(d,i){ return window['line0'](dataArray_0); });
    svg.append("g").attr("class","group1")
			.append("path")
			.style("fill","none")
			.style("stroke","black")
			.style("stroke-width","4px")
			.attr("d",function(d,i){ return window['line1'](dataArray_1); });
    svg.append("g").attr("class","group2")
			.append("path")
			.style("fill","none")
			.style("stroke","black")
			.style("stroke-width","4px")
			.attr("d",function(d,i){ return window['line2'](dataArray_2); });

</script>
</body>

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