D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
digambara
Full window
Github gist
Organic Lemon Prices
Built with
blockbuilder.org
<!DOCTYPE html> <head> <meta charset="utf-8"> <script src="https://d3js.org/d3.v4.min.js"></script> <style> </style> </head> <body> <svg width=800 height=400></svg> <script> var width = 700; var height = 300; var margin = {top: 20, bottom: 20, left: 40, right: 20}; // dataset of commodity prices across time d3.csv('midwest.csv', (err, data) => { // clean the data data.forEach(d => { d.date = d3.timeParse("%Y%m%d")(d.Date); d.date = new Date(d.Date); // x d.price = ++d["Weighted Avg Price"]; // y }); // scales var xExtent = d3.extent(data, d=> d.date); var xScale = d3.scaleTime() .domain(xExtent) .range([margin.left, width-margin.right]); var yExtent = d3.extent(data, d=> d.price); var yScale = d3.scaleLinear() .domain(yExtent) .range([height - margin.bottom, margin.top]); var heightScale = d3.scaleLinear() .domain(yExtent) .range([0, height - margin.top - margin.bottom]); //console.log(heightScale(6)); // create the rectangles var svg = d3.select('svg'); var rect = svg.selectAll('rect') .data(data) .enter() .append('rect') .attr('width', 5) .attr('height', function(d) { return heightScale(d.price); }) .attr('x', function(d) { return xScale(d.date)}) .attr('y', function(d) { return yScale(d.price)}) .attr('fill', 'yellow') .attr('stroke', 'white'); var xAxis = d3.axisBottom() .scale(xScale) .tickFormat(d3.timeFormat('%b%y')); var 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