Update data using slider

forked from anonymous's block: fresh block

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <div id="soda_franchise_map"></div>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>

<body>
  <script>
   var config  = {},
		width   = 0,
		height  = 0,
		margins = {};

config.div_id = "soda_franchise_map",
config.map_shift_horizontal = 2,
config.map_shift_vertical = 2,
config.states = ["Arizona", "Idaho", "Nevada", "Utah"];

d3.queue()
	.defer(d3.json, "https://gist.githubusercontent.com/michellechandra/0b2ce4923dc9b5809922/raw/a476b9098ba0244718b496697c5b350460d32f99/us-states.json")
	.defer(d3.csv, "https://rawgit.com/becausealice2/FA-viz/master/soda/soda_data.csv")
	.awaitAll(render_map);

// Load world map topojson
function render_map(error, result_data){
	if (error) { console.error(error) };

var topology  = result_data[0],
			locations = result_data[1];
  
  var id = 0
  
  locations.forEach(function(d){
    d.id = id
    id = id + 1
  })

// Get target element's width and use aspect ratio to set height
	width  = document.getElementById(config.div_id).clientWidth,
	height = width * (2/3),
	// Set margins around rendered map
	margins.top    = 0,
	margins.bottom = 0,
	margins.left   = 0,
	margins.right  = 0;

var projection = d3.geoAlbersUsa().translate([width/2.75, height/2.75]);
	// Geo-paths take a GeoJSON geometry/feature object and generate an SVG path data string or render the path to a Canvas
	var path = d3.geoPath().projection(projection);

// Filter through all states to isolate selected states
	topology["features"] = topology["features"].filter(function select_states(state_obj){
																									return config.states.filter(function(state_name){
																										return state_name == state_obj["properties"]["name"];
																									}).length !== 0;
																								});

var min_year = d3.min(locations, function(d) { return d["Opening year"]; }),
			max_year = d3.max(locations, function(d) { return d["Opening year"]; });
	
	// Select target element
  var svg = d3.select("#"+config.div_id)

// Slider
	svg.append("input")
				.attr("type", "range")
				.attr("min", min_year)
				.attr("max", max_year)
				.attr("step", "1")
				.attr("id", "year")
				.on("input", function input() {
					update();
				});

// Select target element and attach <svg> and <g> elements
	var svg = d3.select("#"+config.div_id)
		.append("svg")
			// Set SVG element's top left corner and width/height attributes
			.attr("viewBox",margins.top+" "+margins.left+" "+(width-margins.right)+" "+(height-margins.bottom))
			// Supposed to make map responsive. Works sometimes.
			.attr("preserveAspectRatio", "xMidYMid meet")
			// Group together map paths and location markers	
		.append('g')
			.attr('class', config.div_id+"_group");
	
	// Group together country shape paths and enter data
	svg.append("g")
			 .attr("class", config.div_id+"_states")
			 .selectAll("path")
			 .data(topology.features)
			 .enter()
			 // Render and style map
			 .append("path")
				 .attr("d", path)
				 .style("fill", "#FFF")
				 .style("stroke", "#000")
				 .style("stroke-width", "1px");

// Group together location markers
	var loc = svg.append("g").attr("class", config.div_id+"_locations");

// Variables for reuse
	var lon = "Longitude",
			lat = "Latitude";

function location_color(location){
		switch (location["Company"]){
			case "Swig 'n Sweets":
				return "yellow";
			case 'FiiZ':
				return "blue";
			case 'Sodalicious':
				return "red";
		}
	}

function update(){

var slider_year = document.getElementById("year").value;

var new_loc = locations.filter(function filter_by_year(d){ if (d["Opening year"] <= slider_year) { return true; } });
    
    console.log(new_loc)

// Render and style circle location marker for each observation in reviews dataset
		var circles = loc.selectAll("circle")
    
    var join = circles.data(new_loc, function(d){ return d.id })
    
    var enter = join.enter()
    var exit = join.exit()

enter.append("circle")
			 	 .attr("class", config.div_id+"_location_markers")
				.attr("cx", function(d) { return projection([d[lon], d[lat]])[0]; })
				 .attr("cy", function(d) { return projection([d[lon], d[lat]])[1]; })
				 .attr("r", 2)
				 .style("fill", function(d){ return location_color(d)});

exit.remove();			
	}

update();

}; // Close d3.json("https://d3js.org/us-10m.v1.json", function render_map(topology){
  </script>
</body>

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