zircoz

linegraph

May 15th, 2021
700
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. var margin = {top: 20, right: 20, bottom: 30, left: 50},width = 960 - margin.left - margin.right,height = 500 - margin.top - margin.bottom;
  2. var valueline = d3.line().x(function(d) { return x(d.year); }).y(function(d) { return y(d.population); });
  3. var svg = d3.select("#my_dataviz").append("svg").attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom).append("g").attr("transform","translate(" + margin.left + "," + margin.top + ")");
  4. d3.csv("https://gist.githubusercontent.com/Zircoz/e82f36db07bd190397fc45498e74ed63/raw/276acf4e0d3b9452135ca8e2644393990ec46528/data.csv", function(error, data) { if (error) throw error; }
  5. data.forEach( function(d) { d.year = d.year, d.population =+d.population} );
  6. x.domain(d3.extent(data, function(d) { return d.year; }));
  7. y.domain([0, d3.max(data, function(d) { return d.population; })]);
  8. svg.append("path").data([data]).attr("class", "line").attr("d", valueline);
  9. svg.append("g").attr("transform", "translate(0," + height + ")").call(d3.axisBottom(x));
  10. svg.append("g").call(d3.axisLeft(y));
  11.  
RAW Paste Data