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.

forked from micahstubbs's block: data-driven dropdown

<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