D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
cluster102
Full window
Github gist
weather by date
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> <svg></svg> <script> svg = d3.select('svg'); var city='San Francisco'; var width=800; var height=300; var margin={top:20, bottom:20, left:20, right:20}; var x=d3.tsv('data.tsv'); console.log(x); d3.tsv('data.tsv',(err, data) =>{ // console.log(data); data.forEach(d => { d.date=d3.timeParse("%Y%m%d")(data.date); d.date=new Date(d.date); //x ++d[city]; //change to integer }); //Extent xExtent=d3.extent(data, d => d.date); // console.log(xExntent); // //scale // xScale=d3.scaleTime() // .domain(xExtent) // .range(margin.left, width-margin.right); rect = svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('width',20); }); </script> </body>
https://d3js.org/d3.v4.min.js