xxxxxxxxxx<html lang="en"><head> <meta charset="utf-8"> <title>Exercise Module 5 -Scatterplot</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: Ghostwhite; font-family: Helvetica bold, Arial bold, sans-serif; } h1 { font-size: 24px; margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } .key { font-size: 12px; margin: 10px 0 0 0; } svg { background-color: Ghostwhite; } circle:hover { fill: #339933; opacity: 0.5; } .axis path, .axis line { fill: none; stroke: gray; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 10px; } .y.axis path, .y.axis line { opacity: 1; } </style> </head> <body> <h1>Barcelona family income 2013</h1> <p>The family income in Barcelona by neighborhoods vs. the percentage of population between 25 to 64 years old</a></p> <p class="key">Source: <a href="https://opendata.bcn.cat/opendata/es">OpenDataBCN</a> and own calculations. (Index RFD Barcelona = 100)</p></br><script> var w = 600; var h = 500; var padding = [ 20, 30, 30, 100 ]; //Top, right, bottom, left var paddingaxis = [ -10, 0 ]; //Top, bottom var xScale = d3.scale.linear() .range([ padding[3], w - padding[1] ]); var yScale = d3.scale.linear() .range([ padding[0], h - padding[2] ]); var xAxistop = d3.svg.axis() // top function axis .scale(xScale) .orient("top"); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .tickFormat(function(d) { return d + "%"; }); var yAxisright = d3.svg.axis() .scale(yScale) .orient("right") .tickFormat(function(d) { return d + "%"; }); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("BCN_Demographics_perc_2013_family_Income.csv", function(data) { /* això carrega les dades a la consola del navegadorconsole.log(data);console.log(data.map(function(d) { return d.anys_25a64_perc; } ));*/ data.sort(function(a, b) { return d3.ascending(+a.Ordre, +b.Ordre); }); xScale.domain([ 0, d3.max(data, function(d) { return +d.Renda_familiar; }) +10 ]); yScale.domain([ d3.max(data, function(d) { return +d.anys_25a64_perc; }) +1 , d3.min(data, function(d) { return +d.anys_25a64_perc; }) -1 ]); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle"); circles.attr("cx", function(d) { return xScale(d.Renda_familiar) }) .attr("cy", 0) .attr("r", 0.1) .attr("fill", "red") .append("title") .text(function(d) { return d.Barri + " (" + d.Codibarri + ") " + " del Districte " + d.Districte + " té una renda familiar de " + d.Renda_familiar + " % i la franja de 25 a 64 anys és el " + d.anys_25a64_perc + "%"; });// transitions circles .sort(function(a, b) { return d3.ascending(+a.anys_25a64_perc, +b.anys_25a64_perc); }) .transition() .duration(3000) .delay(function(d, i) { return i * 50; }) .attr("r",15) .attr("cy", function(d) { return yScale(d.anys_25a64_perc); }) .attr("fill","steelblue") .attr("opacity", 0.3);// ejes // hori es para desplazar el eje derecho var hori = d3.max(data, function(d) { return xScale(d.Renda_familiar) }) +19 ; svg.append("g") // Axis on the top of the chart .attr("class", "x axis") .attr("transform", "translate(0," + (paddingaxis[0] + padding[2]) + ")") .call(xAxistop); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (h - paddingaxis[1] - padding[2]) + ")") .call(xAxis) .append("text") .attr("x", w - 80) .attr("y", -6) .style("text-anchor", "end") .text("Index RFD Barcelona = 100"); svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + padding[3] + ",0)") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("x", -25) .attr("y", 7) .attr("dy", ".71em") .style("text-anchor", "end") .text("% of population between 25 to 64 years old"); svg.append("g") // Axis on the right of the chart .attr("class", "y axis") .attr("transform", "translate(" + hori + ",0)") .call(yAxisright); }); </script> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js