D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
laxmikanta415
Full window
Github gist
fresh block1
Built with
blockbuilder.org
<!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> // Feel free to change or delete any of the code you see in this editor! var data = { "columns": [ "date", "value" ], "values": [ [ "1975-01-08", "37001.00000000000000000000" ], [ "1975-01-15", "37598.00000000000000000000" ], [ "1975-01-22", "37671.00000000000000000000" ], [ "1975-01-29", "37098.00000000000000000000" ], [ "1975-02-05", "36877.00000000000000000000" ], [ "1975-02-12", "35940.00000000000000000000" ], [ "1975-02-19", "34889.00000000000000000000" ], [ "1975-02-26", "34426.00000000000000000000" ], [ "1975-03-05", "34725.00000000000000000000" ], [ "1975-03-12", "34422.00000000000000000000" ] ] }; var parseDate = d3.timeParse("%Y-%m-%d"); var test =[]; for(var i=0;i<data.values.length;i++){ var item = {}; item.date = parseDate(data.values[i][0]); item.value = data.values[i][1]; test.push(item); } console.log(test); var margin = { top: 20, right: 20, bottom:20, left: 20 }; var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom; var xscale = d3.scaleLinear().domain([0,40000]) .range([0, width]); var limit = d3.extent(test,(d)=> d.value); var yscale = d3.scaleLinear().domain(limit) .range([height, 0]); var valueline = d3.line() .x((d) => { //console.log(d); return xscale(d.date)}) .y((d) => { //console.log(d[0]); return yscale(d.value)}); var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append('g') .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.append("path") .data([test]) .attr("class", "line") .attr("d", valueline); </script> </body>
https://d3js.org/d3.v4.min.js