Assignment4 Trellis Plot

<!DOCTYPE html>
<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