nations-scatterplot-v2

<!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.65;
			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 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;
		};

// data
			newData = filterByYear(data, 1800);
			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);
			// console.log(colorRange);
			var xMax = getMaxAttr(data, "income");
			var yMax = getMaxAttr(data, "lifeExpectancy");
			var rMax = getMaxAttr(data, "population");
			console.log("xMax = ", xMax, "yMax = ", yMax, "rMax = ", rMax);

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

// 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 + ")");

// circles
			var dataPts = svg.selectAll("circle")
				.data(newData)
				.enter()
				.append("circle")
				.attr("class", "circle")
				.attr("cx", function(d) { return xScale(d.income) })
				.attr("cy", function(d) { return yScale(d.lifeExpectancy) })
				.attr("r", function(d) { return rScale(d.population) })
				.attr("id", function(d) { return d.country })
				.attr("fill", function(d) { return colorScale(d.region) } );

// 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)")
		});
	</script>
</body>
</html>

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