nations-line-v1

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

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

.line1 {
			fill: none;
			stroke: pink;
			stroke-width: 3px;
		}

.line2 {
			fill: none;
			stroke: darkseagreen;
			stroke-width: 3px;
		}
	</style>
</head>
<body>
	<div class="container" style="width: 960px;">
		<div class="row">
			<div class="col-md-4 col-xs-4">
				<p>Country 1</p>
				<select id="x-menu"></select>
			</div>
			<div class="col-md-4 col-xs-4">
				<p>Country 2</p>
				<select id="y-menu"></select>
			</div>
			<div class="col-md-4 col-xs-4">
			<form id="series">
				<input type="radio" id="income" name="series" value="income" checked /> Income<br/>
				<input type="radio" id="lifeExpectancy" name="series" value="lifeExpectancy" /> Life Expectancy<br/>
				<input type="radio" id="population" name="series" value="population" /> Population<br/>
			</form>
			</div>
		</div>
		<div class="row">
			<div class="col-md-12 col-xs-12 graph">
			</div>
		</div>
	</div>

var appendRadioButtons = function(input) {
			var form = d3.select("#series");
			form.selectAll("input")
				.data(input)
				.enter()
				.append("input")
				.attr("type", "radio")
				.attr("id", function(d) { return d })
				.attr("value", function(d) { return d }) 
				.attr("name", "series")
				.attr("checked", function(d, i) { 
					if (i === 0) {
						return "checked"
					}
				})
				.text(function(d) { return d });
		}

var processData = function(data, yrExtent) {
			var result = [];

for (yr = yrExtent[0]; yr <= yrExtent[1]; yr++) {
				var yrResult = [];

data.forEach(function(d) {
					var nation = {
						income: null,
						lifeExpectancy: null,
						name: null,
						population: null,
						region: null
					}

var incomeData = getAttrByYear(d, nation, yr, "income");
					var lifeExpData = getAttrByYear(d, nation, yr, "lifeExpectancy");
					var populationData = getAttrByYear(d, nation, yr, "population");
					nation.name = d.name;
					nation.region = d.region;

yrResult.push(nation);
				});

result[yr] = yrResult;
			}

return result;
		}

return [min, max];
		}

var update = function(data, svg, nation1, nation2, series) {
			var selection = svg.selectAll("circle")
				.data(newData);

selection.enter()
				.append("circle")
				.merge(selection)
				.transition()
				.attr("cx", function(d) { 
					if (d.income != null) {
						return scales.xSca(d.income)
				}})
				.attr("cy", function(d) {
					if (d.lifeExpectancy != null) {
						return scales.ySca(d.lifeExpectancy)
					}
				})
				.attr("r", function(d) {
					if ((d.income && d.lifeExpectancy && d.population) != null) {
						return scales.rSca(d.population) 
					}
				})
				.attr("id", function(d) { return d.name })
				.attr("fill", function(d) { return scales.cSca(d.region) })
				.attr("class", "circle");

d3.select(".year").text(year);
			
			selection.exit().remove();
		}

var getExtent = function(data, offset) {
			var minYear;
			var maxYear;

data.forEach(function(d) {
				var inc = d.income.sort();
				var incMin = inc.slice(0)[0][offset];
				if (minYear > incMin | !(minYear)) {
					minYear = incMin;
				}
				var incMax = inc.slice(-1)[0][offset];
				if (maxYear < incMax | !(maxYear)) {
					maxYear 
				}
				var life = d.lifeExpectancy.sort();
				var lifeMin = inc.slice(0)[0][offset];
				if (minYear > lifeMin | !(minYear)) {
					minYear = lifeMin;
				}
				var lifeMax = inc.slice(-1)[0][offset];
				if (maxYear < lifeMax | !(maxYear)) {
					maxYear = lifeMax;
				}
				var pop = d.population.sort();
				var popMin = inc.slice(0)[0][offset];
				if (minYear > popMin | !(minYear)) {
					minYear = popMin;
				}
				var popMax = inc.slice(-1)[0][offset];
				if (maxYear < popMax | !(maxYear)) {
					maxYear = popMax;
				}
			})
			return [minYear, maxYear];
		}

// input: old data => output: min/max years of all data
			yrExtent = getExtent(data, 0);
			newData = processData(data, yrExtent);
			minData = newData[1800];

console.log(newData);	// filtered data

// populate menus
			populateMenus(minData, "#x-menu", "United States");
			populateMenus(minData, "#y-menu", "Canada");

// refactor to getNationData()
			var nation1Data = d3.nest()
				.key(function(d) { return d.name == "United States" })
				.object(data);
			var nation2Data = d3.nest()
				.key(function(d) { return d.name == "Canada" })
				.object(data);
			var nation1Series = nation1Data["true"][0].income;
			var nation2Series = nation2Data["true"][0].income;
			console.log("nation1Series", nation1Series);
			console.log("nation2Series", nation2Series);

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

var margin = { top: 20, right: 20, bottom: 20, left: 50 };
			var width = 930 - margin.left - margin.right;
			var height = 430 - margin.top - margin.bottom;

// min-max
			var xExtent = yrExtent;
			var yExtent = getExtent(data, 1);
			// var rExtent = getMinMax(data, "population");
			var colorDomain = d3.nest().key(function(d) { return d.region }).object(minData);
			// console.log("colorDomain", colorDomain);
			// console.log("xExtent = ", xExtent, "yExtent = ", yExtent);

// scales
			var xScale = d3.scaleTime()
				.domain([new Date(1800), new Date(2009)])
				.range([0, width]);
			var yScale = d3.scaleLinear()
				.domain(yExtent)
				.range([height, 0]);
			// var rScale = d3.scaleSqrt()
			// 	.domain(rExtent)
			// 	.range([0,90]);
			var colorScale = d3.scaleOrdinal()
				.domain(colorDomain)
				.range(["Pink", "LightCyan", "Gainsboro", "Thistle", "MintCream", "LemonChiffon"]);

// axes
			var x = d3.axisBottom()
				.scale(xScale)
				.tickFormat(d3.timeFormat("%Y"));
			var y = d3.axisLeft()
				.scale(yScale);

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

// svg
			var svg = d3.select(".graph")
				.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 yLabel = yAxis.append("text")
				.text("income (dollars)")
				.attr("class", "axis")
				.attr("transform", "translate(15, 0) rotate(-90)")
				.attr("text-anchor", "end");

var gNation1 = svg.append("g")
				.attr("id", "nation1");
			var gNation2 = svg.append("g")
				.attr("id", "nation2");

var line = d3.line()
				.x(function(d) { return xScale(d[0]) })
				.y(function(d) { return yScale(d[1]) });

var path1 = svg
				.append("path")
				.attr("class", "line1")
				.datum(nation1Series)
				.attr("d", line);

var path2 = svg
			.append("path")
				.attr("class", "line2")
				.datum(nation2Series)
				.attr("d", line);
		});
	</script>
</body>
</html>

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