xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>Multiple Lines - BCN Family Income Index</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: Helvetica, Arial, sans-serif; } h1 { font-size: 24px; margin: 0; } h2 { font-size: 14px; font-weight: bold; margin: 0; } p { font-size: 14px; margin-top: 16px; max-width: 600px; margin: 0px; } svg { background-color: white; } circle:hover { fill: orange; } .key { font-size: 12px; margin: 8px; } g.districte path { fill: "none"; stroke: red; stroke-width: 3; opacity: .6; } g.districte path:hover { fill: "none"; stroke: darkred; stroke-width: 5; opacity: .9; } g.highlight path { stroke: teal; stroke-width: 2.5; opacity: .6; } g.highlight path:hover { stroke: teal; stroke-width: 5; opacity: .9; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; stroke-width: 1; } .axis text { font-family: sans-serif; font-size: 11px; } .leyenda1 { font-family: sans-serif; font-size: 11px; font-weight: bold; fill: teal; } .leyenda2 { font-family: sans-serif; font-size: 11px; font-weight: bold; fill: red; } </style> </head> <body> <h1>The rich neighborhoods, now, they are more rich</h1> <h2>The Barcelona Family Income index by neighborhoods during the crisis, 2008-2013</h2><br> <p>As we can see, the economic crisis has increased the differences between the poor neighborhoods and the rich ones; we can say 'the rich, now, they are more rich'.</p> <p>Please enjoy comparing the evolution of neighborhoods from districts 5 and 8.</p> <br> <p class="key">Source: <a href="https://opendata.bcn.cat/opendata/es">OpenDataBCN</a>. (Index RFD Barcelona = 100) -- --<a href="javascript:location.reload()" class="key">Click here to change the district</a> </p><script type="text/javascript"> //Dimensions and padding var w = 600; var h = 600; var padding = [ 20, 10, 50, 60 ]; //Top, right, bottom, left //Set up date formatting and years var dateFormat = d3.time.format("%Y"); //Set up scales var xScale = d3.time.scale() .range([ padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); //Configure axis generators var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(6) .tickFormat(function(d) { return dateFormat(d); }); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); //Configure line generator var line = d3.svg.line() .x(function(d) { return xScale(dateFormat.parse(d.year)); }) .y(function(d) { return yScale(+d.valor); }); //Create the empty SVG image var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); //Load data d3.csv("BCN_family_Income_2008_2013.csv", function(data) { //Data is loaded in, but we need to restructure it. //Note that this is an array of objects. Each object //contains two values, 'country' and 'emissions'. //The 'emissions' value is itself an array, containing //more objects, each one holding 'year' and 'amount' values. //New array with all the years, for referencing later var years = ["2008", "2009", "2010", "2011", "2012", "2013"]; //Create a new, empty array to hold our restructured dataset var dataset = []; //Loop once for each row in data for (var i = 0; i < data.length; i++) { //Create new object with this country's name and empty array dataset[i] = { nomBarri: data[i].Barri, familyIndex: [], Districte: data[i].Districte }; //Loop through all the years for (var j = 0; j < years.length; j++) { // If value is not empty if (data[i][years[j]]) { //Add a new object to the emissions data array //for this country dataset[i].familyIndex.push({ year: years[j], valor: data[i][years[j]], millora: +data[i][years[j]] - +data[i][years[0]] }); } } }; //Uncomment to log the original data to the console //console.log(data); //Uncomment to log the newly restructured dataset to the console //console.log(dataset); //console.log(dataset[0].Districte); // console.log(dataset[i].familyIndex[5].valor); // } //Set scale domains xScale.domain([ d3.min(years, function(d) { return dateFormat.parse(d); }), d3.max(years, function(d) { return dateFormat.parse(d); }) ]); yScale.domain([ d3.max(dataset, function(d) { return d3.max(d.familyIndex, function(d) { return +d.valor; }); }), 0 ]); //Make a group for each district and put the color green or red var groups = svg.selectAll("g") .data(dataset) .enter() .append("g") .attr("id", function(d) { return d.Districte; }) .classed("districte", function(d) { if ( d.Districte == QueDistrito ) { return true; } else { return false; } }) .classed("highlight", function(d) { if (d.Districte == QueDistrito && d.familyIndex[5].millora > 0) { return true; } else { return false; } }); //Append a title with the District name (so we get easy tooltips) groups.append("title") .text(function(d) { return d.nomBarri + ", Districte " + d.Districte; }); //Within each group, create a new line/path, //binding just the index data to each one groups.selectAll("path") .data(function(d) { return [ d.familyIndex ]; }) .enter() .append("path") .attr("class", "line") .attr("d", line) .attr("fill", "none") .attr("stroke", "steelblue") .attr("stroke-width", 2) .attr("opacity", .1);//Leyendas de ejes svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - padding[2]) + ")") .call(xAxis) .append("text") .attr("x", w - 80) .attr("y", -6) .style("text-anchor", "end") .text("Years"); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (padding[3]) + ",0)") .call(yAxis) .append("text") .attr("x", 10) .attr("y", 30) .text("Index RFD Barcelona = 100");//Leyendas svg.append("text") .attr("x",padding[3]+20) .attr("y",h-padding[2] -20) .text("Index 2013 > Index 2008") .attr("class","leyenda1"); svg.append("text") .attr("x",padding[3]+20) .attr("y",h-padding[2] -5) .text("Index 2013 < Index 2008") .attr("class","leyenda2"); svg.append("text") .attr("x",padding[3]+20) .attr("y",h-padding[2] -38) .text("Destacados los barrios del distrito " + QueDistrito) .attr("class","key"); }); var QueDistrito = prompt("Choose a District (1-10):"); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js