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).
license: mit |
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> |