xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title> D3: A Trellis Plot of Human Development vs. Birth Rate on Selected Commonwealth Countries</title> <script type="text/javascript" src="https://d3js.org/d3.v4.min.js"></script> <style type="text/css"> .axis,.frame{shape-rendering: crispEdges;} .axis line{stroke: #ddd;} </style> </head> <body> <script type="text/javascript"> // Reference: https://bl.ocks.org/mbostock/4063663 var width = 1200; size = 400; padding = 20; var title = "Human Development vs. Birth Rate on Selected Commonwealth Countries in 1990"; var svg = d3.select("body") .append("svg") .attr("width",width) .attr("heigth",100) .append("g") .attr('transform', 'translate(' + padding + ',' + padding + ')'); svg.append("text") .text(title) .attr("x",width/2) .attr("y",50) .style("text-anchor","middle") .style("fill","black") .style("font-size",20); // Put the title var x = d3.scaleLinear().range([size - padding/2, padding/2]); var y = d3.scaleLinear().range([size - padding/2, padding/2]); var xAxis = d3.axisBottom().scale(x).ticks(6); var yAxis = d3.axisLeft().scale(y).ticks(6); var color = d3.scaleOrdinal(d3.schemeCategory10); d3.csv("global_development.csv", function(error,data){ if(error) throw error; var domainByTrait = {}, traits = d3.keys(data[0]).filter(function(d){return d !== "Country";}), n = traits.length; traits.forEach(function(trait){ domainByTrait[trait] = d3.extent(data, function(d){return d[trait];}); }) xAxis.tickSize(size*1); yAxis.tickSize(-size*n); var svg = d3.select("body").append("svg") .attr("width", size * (n-1) + padding) .attr("height", size * 1 + padding) .append("g") .attr("transform", "translate(" + padding + "," + padding / 2 + ")"); svg.selectAll(".x.axis") .data(traits) .enter() .append("g") .attr("class", "x axis") .attr("transform", function(d, i) { return "translate(" + (n - i - 1) * size + ",0)"; }) .each(function(d) { x.domain(domainByTrait[d]); d3.select(this).call(xAxis); }) ; svg.selectAll(".y.axis") .data(traits) .enter() .append("g") .attr("class", "y axis") .attr("transform", function(d, i) { return "translate(0," + i * size + ")"; }) .each(function(d) { y.domain(domainByTrait[d]); d3.select(this).call(yAxis); }) .append("text") .attr('transform', 'rotate(-90)translate(-' + size/2 + ',0)') .attr("x",50) .attr("y",25) .text("Birth Rate") .attr("font-size",12) .attr("fill","black"); function cross(a, b) { var c = [], n = a.length, m = 1; for (var i = -1; ++i < n;) for (var j = -1; ++j < m;) c.push({x: a[i], i: i, y: b[j], j: j}); return c; } function plot(p) { var cell = d3.select(this); x.domain([0,100]); y.domain([0,100]); cell.selectAll("circle") .data(data) .enter().append("circle") .attr("cx", function(d) { return x(d[p.x]); }) .attr("cy", function(d) { return y(d[p.y]); }) .attr("r", 4) .style("fill", function(d) { return color(d.Country); }); } var cell = svg.selectAll(".cell") .data(cross(traits, traits)) .enter().append("g") .attr("class", "cell") .attr("transform", function(d) { return "translate(" + (n - d.i - 1) * size + "," + d.j * size + ")"; }) .each(plot); // Titles for each graph cell.append("text") .attr("x", 130) .attr("y", 370) .attr("dy", ".71em") .text(function(d) { return d.x; }); }); </script> </body></html> https://d3js.org/d3.v4.min.js