nations-scatterplot-v3

Income vs. Life Expectancy (1950-2009)

Another iteration of the Nations data. Following version will include handling corner cases, transitions and tooltips.

Site: http://danaoira.com | Twitter: http://twitter.com/danaoira

Built with blockbuilder.org

forked from danaoira's block: nations-colored

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>

.title {
			font-family: "Georgia";
			font-size: 32px;
			fill: #000;
		}

.axis {
			font-family: "Arial";
			font-size: 11px;
			fill: #808080;
		}

.circle {
			fill-opacity: 0.75;
			stroke: #c0c0c0;
		}

.domain {
			stroke: #c0c0c0;
		}

.tick > line {
			stroke: #c0c0c0;
		}
	</style>
</head>
<body>
	<script>
		/*	Input: nations.json
			Output: 	x-axis = income
						y-axis = lifeExpectancy
						radius = population
						color  = region

Bonus: use the raw data from class 3 and create the final dataset yourself. Add axes and labels.
			For extra practice: visualize the barley yield data. */
		var scales = {};
		var year = 1950;

var getAttrByYear = function(input, output, year, attr) {
			input[attr].forEach(function(d) { 
				if (d[0] === year) { 
					return output[attr] = d[1];
				}
			});
		};

var filterByYear = function(input, year) {
			var result = [];

input.forEach(function(i) {
				var country = {
					year: null,
					country: null,
					region: null,
					income: null,
					lifeExpectancy: null,
					population: null
				}

var getIncome = getAttrByYear(i, country, year, "income");
				var getLifeExpectancy = getAttrByYear(i, country, year, "lifeExpectancy");
				var getPopulation = getAttrByYear(i, country, year, "population");
				country.country = i.name;
				country.region = i.region;
				country.year = year;
				result.push(country);
			});
			return result;
		};

var updateData = function(data, svg, scales, year) {
			var newData = filterByYear(data, year);

var circle = svg.selectAll("circle").data(newData);
			
			circle.exit().remove();

circle.enter()
				.append("circle")
				.merge(circle)
				.attr("cx", function(d) { return scales.xSca(d.income) })
				.attr("cy", function(d) { return scales.ySca(d.lifeExpectancy) })
				.attr("r", function(d) { return scales.rSca(d.population) })
				.attr("id", function(d) { return d.country })
				.attr("fill", function(d) { return scales.cSca(d.region) })
				.attr("class", "circle");
		};
		
		d3.json("nations.json", function(error, data) {
			if (error) return error;
			console.log(data);		// original data

// data
			// var year = 1950;
			newData = filterByYear(data, year);
			console.log(newData);	// filtered data

// vars -----------------------------------------------------------

var margin = { top: 20, right: 20, bottom: 20, left: 20 };
			var width = 960 - margin.left - margin.right;
			var height = 500 - margin.top - margin.bottom;

// min-max
			var xExtent = d3.extent(newData, function(d) { return d.income });
			var yExtent = d3.extent(newData, function(d) { return d.lifeExpectancy });
			var rExtent = d3.extent(newData, function(d) { return d.population });
			var colorDomain = d3.nest().key(function(d) { return d.region }).object(newData);
			console.log("xExtent = ", xExtent, "yExtent = ", yExtent, "rExtent = ", rExtent);

// scales
			var xScale = d3.scaleLog()
				.domain(xExtent)
				.range([0, width + margin.left]);
			var yScale = d3.scaleLinear()
				.domain([0, 85])
				.range([height, 0]);
			var rScale = d3.scaleSqrt()
				.domain(rExtent)
				.range([0,50]);
			var colorScale = d3.scaleOrdinal()
				.domain(colorDomain)
				.range(["Pink", "LightCyan", "Gainsboro", "Thistle", "MintCream", "LemonChiffon"]);

scales = {
				xExt : xExtent,
				yExt : yExtent,
				rExt : rExtent,
				color: colorDomain,
				xSca : xScale,
				ySca : yScale,
				rSca : rScale,
				cSca : colorScale
			};

// axes
			var x = d3.axisBottom()
				.scale(xScale)
				.ticks(10, ".0f");
			var y = d3.axisLeft()
				.scale(yScale);

// graph ----------------------------------------------------------

// svg
			var svg = d3.select("body")
				.append("svg")
				.attr("width", width + margin.left + margin.right)
				.attr("height", height + margin.top + margin.bottom)
				.append("g")
				.attr("transform", "translate(" + margin.left + ", " + margin.top + ")");

// axes
			var xAxis = svg.append("g")
				.call(x)
				.attr("transform", "translate(0, " + height + ")");
			var yAxis = svg.append("g")
				.call(y);

// labels
			var xLabel = xAxis.append("text")
				.text("income per capita, inflation adjusted (dollars)")
				.attr("class", "axis")
				.attr("transform", "translate(" + (width + margin.left) + ", " + 0.5 * -margin.bottom + ")")
				.attr("text-anchor", "end");
			var yLabel = yAxis.append("text")
				.text("life expectancy (years)")
				.attr("class", "axis")
				.attr("transform", "translate(" + (margin.left * 0.85) + ", 0) rotate(-90)");

window.svg = svg;
			var interval = window.setInterval(function() {
				if (year > 2009) {
					year = 1950;
				}
				updateData(data, svg, scales, year);
				year++;
			}, 1000);
		});
	</script>
</body>
</html>

https://d3js.org/d3.v4.min.js