nations-line-v3

forked from danaoira's block: nations-line-v1

<!DOCTYPE html>
<head>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.2.1.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">

.circle:hover {
			fill: #808080;
			fill-opacity: 0.75;
			stroke: White;
		}

.title {
			font-size: 20px;
		}

div.tooltip {   
			position: absolute;
			text-align: center;
			width: 160px; 
			height: 48px;
			padding: 2px;
			font: 12px sans-serif;  
			background: #f0f0f0;
			border: 0px;
			border-radius: 2px;
			pointer-events: none;
			color: #000;
		}

.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 id="menu" class="row">
			<div class="col-md-4 col-xs-4">
				<p>Select nations to explore data.</p>
				<select id="menu-1">
					<option value="null" selected>Nation 1</option>
				</select>
			</div>
			<div class="col-md-4 col-xs-4">
				<p>&nbsp;</p>
				<select id="menu-2">
					<option value="null" selected>Nation 2</option>
				</select>
			</div>
			<div class="col-md-4 col-xs-4">
			<form id="series">
				<input class="series" type="radio" name="series" value="income" checked /> Income<br/>
				<input class="series" type="radio" name="series" value="lifeExpectancy" /> Life Expectancy<br/>
				<input class="series" type="radio" 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 margin = { top: 0, right: 20, bottom: 20, left: 72 };
		var width = 960 - margin.left - margin.right;
		var height = 430 - margin.top - margin.bottom;

// =====================================================

// populates dropdown menus with numeric values from numVals list
		function setMenu(data, menuID) {
			var dropdown = d3.select(menuID);
			dropdown.selectAll("option")
				.data(data)
				.enter()
				.append("option")
				.attr("value", function(d) { return d; })
				.text(function(d) { return d; });
		}

// setters ---------------------------------------------

function setDomain(data1, data2) {
			var xExtent;
			var yExtent;

if (data1 && data2) {
				xExtent = d3.extent(data1.map(function(d) { 
					return d[0]; 
				}).concat(data2.map(function(d) { 
					return d[0]; 
				})), function(d) { 
					return d; 
				})

yExtent = d3.extent(data1.map(function(d) { 
					return d[1]; 
				}).concat(data2.map(function(d) { 
					return d[1]; 
				})), function(d) { 
					return d; 
				})
			} else if (data1) {
				xExtent = d3.extent(data1, function(d) { return d[0]; })
				yExtent = d3.extent(data1, function(d) { return d[1]; })
			} else if (data2) {
				xExtent = d3.extent(data2, function(d) { return d[0]; })
				yExtent = d3.extent(data2, function(d) { return d[1]; })
			}

return {
				x: xExtent,
				y: yExtent
			}
		}

function setRange() {
			return {
				x: [0, width],
				y: [height, 0]
			}
		}

function setScale(domain, range) {
			return {
				x: d3.scaleLinear()
					.domain(domain.x)
					.range(range.x),
				y: d3.scaleLinear()
					.domain(domain.y)
					.range(range.y)
			}
		}

function setAxis(scale) {
			return {
				x: d3.axisBottom()
					.scale(scale.x)
					.tickFormat(d3.format("d")),
				y: d3.axisLeft()
					.scale(scale.y)
			}
		}

function setLabel() {

}

// getters ---------------------------------------------

function getNationData(data, nation, series) {
			var result = data.find(function(d) {
				if (d.name === nation) {
					return d;
				}
			})
			return result[series];
		}

// append axes, title, svg -----------------------------

function appendX(svg) {
			return svg.append("g")
				.attr("id", "axis-x")
				.attr("transform", "translate(0, " + height + ")");
		}

function appendY(svg) {
			return svg.append("g")
				.attr("id", "axis-y");
		}

function appendSVG() {
			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 + ")");
			return svg;
		}

function appendLabel(svg) {
			svg.select("#axis-y")
				.append("text")
				.text("")
				.attr("transform", "translate(15, 0) rotate(-90)")
				.attr("text-anchor", "end")
				.attr("fill", "black")
				.attr("class", "label-y");
		}

function updateLabel(svg, series) {
			var label;

if (series == "income") {
				label = "Income (USD$)";
			} else if (series == "lifeExpectancy") {
				label = "Life Expectancy (Years)";
			} else if (series == "population") {
				label = "Population";
			}

svg.select(".label-y")
				.text(label);
		}

// update ----------------------------------------------

function update(data, svg, axisX, axisY, line1, line2) {
			var nation1 = d3.select("#menu-1").property("value");
			var nation2 = d3.select("#menu-2").property("value");
			var series = d3.selectAll(".series:checked").property("value");
			var nation1data = (nation1 !== "null") 
				? getNationData(data, nation1, series) 
				: undefined;
			console.log("nation1data = ", nation1data);
			var nation2data = (nation2 !== "null") 
				? getNationData(data, nation2, series) 
				: undefined;
			console.log("nation2data = ", nation2data);

// console checks
			if (nation1) {
				console.log("nation1 = ", nation1); 
				console.log(nation1data);
			}
			if (nation2) { 
				console.log("nation2 = ", nation2); 
			}
			if (series) { 
				console.log("series = ", series); 
			}

var domain = setDomain(nation1data, nation2data);
			var range = setRange();
			var scale = setScale(domain, range);
			var axis = setAxis(scale);

axisX.transition()
				.duration(1000)
				.call(axis.x);

axisY.transition()
				.duration(1000)
				.call(axis.y);

updateLabel(svg, series);

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

if (nation1 !== "null") {				
				line1.datum(nation1data)
					.transition()
					.duration(1000)
					.attr("d", line);
			}

if (nation2 !== "null") {
				line2.datum(nation2data)
					.transition()
					.duration(1000)
					.attr("d", line);
			}

}

// main ------------------------------------------------

d3.json("nations.json", function(error, data) {
			if (error) return error;
			console.log("data = ", data);

var nations = data.map(function(d) { return d.name; });

// set initial dropdown menu values
			setMenu(nations.sort(d3.ascending), "#menu-1");
			setMenu(nations.sort(d3.ascending), "#menu-2");

var svg = appendSVG(svg);
			var axisX = appendX(svg);
			var axisY = appendY(svg);
			var labelY = appendLabel(svg);
			var line1 = svg.append("g")
				.append("path")
				.attr("class", "line1");
			var line2 = svg.append("g")
				.append("path")
				.attr("class", "line2");

d3.select("#menu")
				.on("change", function(d) {
					update(data, svg, axisX, axisY, line1, line2);
				});
		})
	</script>
</body>
</html>

Modified http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js to a secure url

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

https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.js