D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
teatreelee
Full window
Github gist
NYC Temps 2011/2012
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; } svg { width: 100%; height: 100%; } </style> </head> <body> <svg></svg> <script> //1. Identify width, height and margins. const height = 300; const width = 800; const margin = {top: 20, bottom: 20, left: 20, right: 20}; //2. Clean data. Change string date to datetime and string temp to float const city = "New York"; d3.tsv('data.tsv',(err, data) => { data.forEach(d=> { d.date = d3.timeParse("%Y%m%d")(d.date); ++d[city]; }); //3. create the scales //extent: returns min and max of array xDomain = d3.extent(data, d => d.date) const xScale = d3.scaleTime() .domain(xDomain) .range([margin.left, width - margin.right]) yMax = d3.max(data, d => d[city]) const yScale = d3.scaleLinear() .domain([0, yMax]) .range([height - margin.bottom, margin.bottom]) const heightScale = d3.scaleLinear() .domain([0, yMax]) .range([0, height - margin.top - margin.bottom]); //4. create image var svg = d3.select("svg") var rect = svg.selectAll("rect") .data(data) .enter().append("rect") .attr('width', 2) .attr('height', d => heightScale(d[city])) .attr('x', d => xScale(d.date)) .attr('y', d => yScale(d[city])) .attr('fill', 'blue') .attr('stroke', 'white') //5. create axes const xAxis = d3.axisBottom() .scale(xScale) .tickFormat(d3.timeFormat('%b %Y')) const yAxis = d3.axisLeft() .scale(yScale) svg.append('g') .attr('transform', 'translate(' + [0, height -margin.bottom] + ')') .call(xAxis) svg.append('g') .attr('transform', 'translate(' + [margin.left, 0] + ')') .call(yAxis) }); </script> </body>
https://d3js.org/d3.v4.min.js