data-driven dropdown

#data-driven dropdown

A simple d3js component that generates html <select></select> and <option></option> elements from data.

Sharing this in hopes that seeing the pattern in isolation with simple data makes it easier to add this functionality to your d3js project.

<html>
	<head>
		<script src="https://d3js.org/d3.v2.js"></script>
		<style>
			select { position: absolute; left: 50px; top: 50px; }
			p { position: absolute; left: 280px; top: 32px; }
		</style>
	</head>
	<body>
		<script type="text/javascript">

// specify a format function we'll use later
// https://github.com/mbostock/d3/wiki/Formatting
var comma = d3.format(",");

d3.json("cities.json", function(data) {

// create the drop down menu of cities
	var selector = d3.select("body")
		.append("select")
		.attr("id", "cityselector")
		.selectAll("option")
		.data(data)
		.enter().append("option")
		.text(function(d) { return d.city; })
		.attr("value", function (d, i) {
			return i;
		});

// generate a random index value and set the selector to the city
	// at that index value in the data array
	var index = Math.round(Math.random() * data.length);
	d3.select("#cityselector").property("selectedIndex", index);

// append a paragraph tag to the body that shows the city name and it's population
	d3.select("body")
				.append("p")
				.data(data)
				.text(function(d){ 
					return data[index]['city'] + " - population " + comma(data[index]['population']); 
				})

// when the user selects a city, set the value of the index variable
	// and call the update(); function
	d3.select("#cityselector")
	.on("change", function(d) {
		index = this.value;
		update();
	})

// update the paragraph text to match the selection made by the user
	function update(){
		d3.selectAll("p")
			.data(data)
			.text(function(d){ 
				return data[index]['city'] + " - population " + comma(data[index]['population']); 
			})
	}

})
		</script>
	</body>
</html>

https://d3js.org/d3.v2.js