D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
Contrastat
Full window
Github gist
Scatterplot of registered unemployment to non contributive pensions with labels
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Showing the non contributive pensions</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; } p.aclariment{ font-size: 8px; font-family: Courier, "Lucida Console", monospace; } svg { background-color: white; } circle:hover { fill: rgba(205,10,30,0.5); } /*.descripcio{ font-family: Courier, "Lucida Console", monospace; font-size: 6px; } */ .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 8px; } .y.axis text{ font-size: 8px; } </style> <script tpye="text/javascript" src="https://d3js.org/d3.v3.js"></script> </head> <body> <h1>Relació entre la proporció de pensions no contributives i taxa d'atur registrat a les comarques de Catalunya</h1> <p>Proporció de “pensions no contributives” cada mil habitants de més de 65 anys a la comarca.</p> <p>Taxa d'“atur registrat” en percentatge.</p> <p> Font: Elaboració pròpia en base a <a href="https://www.idescat.cat/pub/?id=aec&n=254">Idescat</a> i <a href="https://benestar.gencat.cat/ca/serveis/ajuts_i_prestacions_economiques/pensions_no_contributives/">DOG</a></p> <script type="text/javascript"> var w = 700; var h = 600; var padding = [20, 10, 20, 100]; //Top, right, bottom, left var formatAsPercentage = d3.format("%"); var xScale = d3.scale.linear() .range([padding[3], w - padding[1] - padding[3] ]); var yScale = d3.scale.linear() .range([padding[0], h - padding[2]]); var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(5); var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(5); yAxis.tickFormat(formatAsPercentage); var svg = d3.select("body") .append("svg") .attr("width", w) .attr("height", h); d3.csv("ddbb_pensions.csv", function(dataset) { //console.log(data); //Here we create a new variable within the dataset dataset.forEach(function(d) {d.noncp65 = d.TotalPensions/(d.TotalPob*d.M65/100);}); dataset.forEach(function(d) {d.regatur = d.Atur/(d.TotalPob*d.D13a65/100);}); //Here we sort the data dataset.sort(function(a,b) {return d3.descending(+a.noncp65, +b.noncp65);}); //Here we sort the data with an alternative function //dataset.sort(function(a,b) {return b.Njubilacio - a.Njubilacio;}); xScale.domain([ d3.min(dataset, function(d){return +d.noncp65*1000;}), d3.max(dataset, function(d){return +d.noncp65*1000;}) ]); //heightScale.domain(d3.range(dataset.length)); yScale.domain([ d3.max(dataset, function(d){return +d.regatur;}) , d3.min(dataset, function(d){return +d.regatur;}) ]); var balls = svg.selectAll("circle") .data(dataset) .enter() .append("circle"); balls.attr("cx", function(d){ return xScale(d.noncp65*1000); }) .attr("cy", function(d) { return yScale(d.regatur); }) .attr("r", 3) //return d.Njubilacio/(d.Poblacio65/100*d.Poblacio)*10000; //.attr("height", heightScale.rangeBand()) //.attr("fill", function(d) {return "rgb(0, 0, " + Math.round(d.TotalPob/1000) + ")";}) .attr("fill", function(d) { if (d.Comarca==="Catalunya") { return "rgb(205, 10, 30)";} else {return "steelblue";} }) .append("title") //.style("font-size", "6px") .text(function(d) { return d.Comarca + "'s ratio of non contrib pensionist per 1000 hab over 65 year is " + Math.round(d.noncp65*10000)/10 + " while the rate of registered unemployment is " + Math.round(d.regatur*1000)/10; }) ; svg.append("g") .attr("class", "x axis") .attr("transform", "translate (0," + (h - padding[2] + 5) + ")") .call(xAxis); svg.append("g") .attr("class", "y axis") .attr("transform", "translate (" + (padding[3] - 5) + ",0)") .call(yAxis); var labels = svg.selectAll("text") .data(dataset) .enter() .append("text") .text(function(d){ return d.Comarca; }); labels.attr("x", function(d){ return xScale(+d.noncp65*1000) }) .attr("y", function(d){ return yScale(+d.regatur+0.0005) }) .attr("font-family", "sans-serif") .attr("font-size", "8px") .attr("fill", "black"); }); </script> <p class="aclariment">Els colors blaus més clars indiquen una major població en valor absolut, excepte en el cas de Catalunya que té un color diferent</p> </body> </html>
Modified
http://d3js.org/d3.v3.js
to a secure url
https://d3js.org/d3.v3.js