D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
cunnellp5
Full window
Github gist
bar graph block
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> var width = 800; var height = 300; var city = 'New York'; var margin = { top: 80, bottom: 20, left: 50, right: 20 } // dataset of city temperatures across time d3.tsv('data.tsv', (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[city] = ++d[city]; //y }); // define scales to set x and y attributes (aka the ranges) 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[city]) var yMax = d3.max(data, d => d[city]) var yScale = d3.scaleLinear() .domain([0, yMax]) .range([height - margin.bottom, margin.top]); var heightScale = d3.scaleLinear() .domain([0, yMax]) .range([0, height - margin.top - margin.bottom]) // create the rectangles var svg = d3.select('svg'); var rect = svg.selectAll('rect') .data(data) .enter().append('rect') .attr('width', 1.5) .attr('height', function(d) { return heightScale(d[city]) }) .attr('x', function(d) { return xScale(d.date) }) .attr('y', function(d) { return yScale(d[city])}) .attr('fill', 'blue') .attr('stroke', 'white'); // define axis and append to svg var xAxis = d3.axisBottom() .scale(xScale) // .tickFormat(d => d3.timeFormat('%b %Y')(d)) .tickFormat(d3.timeFormat('%b %Y')); // same as above 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