nations-line-v3-menu

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">
</head>
<body>
	<div class="container" style="width: 990px;">
		<div id="menu" class="row">
			<div class="col-md-4 col-xs-4">
				<select id="menu-1">
					<option value="null" selected>Nation 1</option>
				</select>
			</div>
			<div class="col-md-4 col-xs-4">
				<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: 60, right: 50, bottom: 20, left: 50 };
		var width = 960 - margin.left - margin.right;
		var height = 500 - margin.top - margin.bottom;

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

// populates dropdown menus and targets an id
		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; });
		}

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

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

function update(data, nations) {
			var nation1 = d3.select("#menu-1").property("value");
			var nation2 = d3.select("#menu-2").property("value");
			var series = d3.selectAll(".series:checked").property("value");

// console checks
			if (nation1) { 
				console.log("Nation 1:", nation1); 
			}
			if (nation2) { 
				console.log("Nation 2:", nation2); 
			}
			if (series) { 
				console.log("Series:", series); 
			}
			if (nation1 != "null") {
				var nation1data = getNationData(data, nation1, series);
			}
			if (nation2 != "null") {
				var nation2data = getNationData(data, nation2, series);
			}
		}

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

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

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

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

d3.select("#menu")
				.on("change", function(d) {
					update(data, nations);
				});
		})
	</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