D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lmelgar
Full window
Github gist
Uncaught TypeError: Cannot read property 'length' of undefined
<!DOCTYPE html> <!-- Modification of an example by Scott Murray from Knight D3 course --> <html lang="en"> <head> <meta charset="utf-8"> <title>Line Chart with Multiple Lines</title> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; } path.line { fill: none; stroke: orange; stroke-width: 2px; } .axis path, .axis line { fill: none; stroke: black; stroke-width: 1px; } .axis text { font-family: sans-serif; font-size: 11px; } </style> </head> <body> <h1>CO2 Emissions by Country</h1> <p>Carbon dioxide emissions, 1961-2010. Data not available for the entire period for all countries. Source: <a href="https://urldefense.proofpoint.com/v2/url?u=http-3A__data.worldbank.org_indicator_EN.ATM.CO2E.KT-3Fpage-3D6&d=BQMGaQ&c=y2w-uYmhgFWijp_IQN0DhA&r=LtUave6XO55ybqGzLN8jiA&m=9lL9v1FBwp-5ssWvzQJ9ruGPO2kzydI6Tt3nwOIn070&s=ruSilEWP8l3v_3jkeIc4cR-lAbV4iY8qxdmGwMIiixc&e=">World Bank</a>, 2014</p> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <script type="text/javascript"> //Dimensions and padding var width = 700; var height = 600; var margin = {top: 20, right: 10, bottom: 40, left:100}; //Set up date formatting and years var dateFormat = d3.time.format("Year %Y"); var bycountry = []; //Set up scales var xScale = d3.time.scale() .range([ margin.left, width - margin.right - margin.left ]); var yScale = d3.scale.linear() .range([ margin.top, height - margin.bottom ]); //Configure axis generators var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(15) .tickFormat(function(d) { return dateFormat(d); }) .outerTickSize([0]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .outerTickSize([0]); //Configure line generator // each line dataset must have a d.year and a d.amount for this to work. var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.Year)); }) .y(function(d) { return yScale(+d.Total); }); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); //Load data d3.csv("deaths_04yearsold.csv", function(error, data) { var years = ["Year 2000", "Year 2001", "Year 2002", "Year 2003", "Year 2004", "Year 2005", "Year 2006", "Year 2007", "Year 2008", "Year 2009", "Year 2010", "Year 2011", "Year 2012", "Year 2013"]; //Loop once for each row in data var bycountry = d3.nest().key(function (d) { return d.Country; }) .entries(data); console.log(data) console.log(bycountry) //Set scale domains - max and mine of the years xScale.domain( d3.extent(years, function(d) { return dateFormat.parse(d); })); // max of emissions to 0 (reversed, remember) yScale.domain([ d3.max(bycountry, function(d) { return d3.max(d.key, function(d) { return +d.Total; }); }), 0 ]); //Make a group for each country var groups = svg.selectAll("g") .data(bycountry) .enter() .append("g"); //Append a title with the country name (so we get easy tooltips) groups.append("title") .text(function(d) { return d.key; }); //Within each group, create a new line/path, //binding just the emissions data to each one groups.selectAll("path") .data(function(d) { // because there's a group with data already... return [ d.Total ]; // it has to be an array for the line function }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("stroke", "#FF0099"); //Axes svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + margin.left + ",0)") .call(yAxis); }); // end of data csv </script> </body> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js