D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
chiffenok
Full window
Github gist
tourist visit Brazil
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> <svg></svg> <div></div> <body> <script> var width = 800; var height = 300; var margin = {top: 20, bottom: 20, left: 20, right: 20}; d3.csv('td.europe_by_coninent_year.csv', (err, data) => { data.forEach( d => { d.Year = d3.timeParse("%Y")(d.Year); d.Year = new Date(d.date); d.visits = d.visits; }) // scales var xExtent = d3.extent(data, d => d.Year); var xScale = d3.scaleTime() .domain(xExtent) .range([margin.left, width - margin.right]); console.log(data.visits); var yScale = d3.scaleLinear() .domain([0, d3.max(data, function(d) { return d.visits; })]) .range([height - margin.bottom, margin.top]); //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 height - yScale(d.visits)}) .attr('x', function(d) {return xScale(d.Year)}) .attr('y', function(d) {return yScale(d.visits)}); d3.select('div') .text(d3.max(data.visits)); }); function type(d) { d.visits = +d.visits; // coerce to number return d; } </script> </body>
https://d3js.org/d3.v4.min.js