D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
VirginiaHNg
Full window
Github gist
Nations Line Graph v2
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; } .labels { font-family: "Calibri"; font-size:26px; stroke: gray } .axes{ fill: black } path{ stroke: #c7cdd6; stroke-width: 2; fill: none; } #lineStyle { fill: none; stroke: #5ec997; stroke-width: 3 } #countrySelect{ position:absolute; top:10px; left:100px; } </style> </head> <body> <script> var margin = {top: 20, right: 40, bottom: 20, left: 40}; var width = 960 - margin.left - margin.right var height = 500 - margin.top- margin.bottom var svg = d3.select("body").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 + ")"); //reading the data file & setting callback function var data = d3.json("nations.json", main) function main(error, originalData){ if(error) { throw(error) }; // function getCountries(input, field) { // var countryOptions = []; // for (var i=0; i < input.length ; ++i) // countryOptions.push({text: input[i][field], value: input[i][field]}); // return countryOptions; // } var select = d3.select('body') .append('select') .attr('class','select') .attr('id','countrySelect') .on('change', onchange) var countryOptions = originalData.map(function(a) { return {text: a.name, value: a.name} }); var options = select .selectAll('option') .data(countryOptions) .enter() .append('option') .attr("value", function(option) { return option.value; }) .text(function(option) { return option.text; }) function onchange(){ var selection = originalData.filter(function(n){ return n.name === document.getElementById('countrySelect').value })[0]; var line = d3.line() .x(function(d){ return xScale(d[0]) }) .y(function(d) { return yScale(d[1]) }); //extents: d3.extent(data, function) var xExtent = d3.extent(selection.lifeExpectancy, function(d){ return(d[0]) }); var maxLifeExpectancy = d3.max(selection.lifeExpectancy, function(d){ return d[1] }) //set scales var xScale = d3.scaleLinear() .domain(xExtent) .range([0, width]); var yScale = d3.scaleLinear() .domain([20, maxLifeExpectancy]) .range([height, 0]); //set axis & call axis var xAxis = d3.axisBottom() .scale(xScale) .tickFormat(d3.format("d")) var yAxis = d3.axisLeft() .scale(yScale) svg.selectAll("*").remove(); svg.append("g") .attr("transform", "translate (" + 0 + "," + height +")") .attr("class", "axes") .call(xAxis); svg.append("g") .attr("class", "axes") .call(yAxis); svg.append("text") .attr("class", "labels") .attr("transform", "translate(" + (width - 50) + "," + (height - 20) + ")") .text("Year") svg.append("text") .attr("class", "labels") .attr("transform", "rotate(-90)") .attr("y", margin.left) .attr("x",0 - (height - 300)) .text("Life Expectancy") svg.append("path") .attr("id", "lineStyle") .datum(selection.lifeExpectancy) .attr("d", line); } }; </script> </body>
https://d3js.org/d3.v4.min.js