Dynamic Choropleth with Play Button

<!doctype html>
<html>
<head>
		<title>Ageing Population Singapore</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
		<script src="//d3js.org/topojson.v1.min.js"></script>
		<script src="https://d3js.org/d3-geo.v1.min.js"></script>
		<script src="https://d3js.org/d3-scale.v1.min.js"></script>
		<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
		<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
		<div id="tooltip" class="hidden">
			<p><span id="value"></p>
		</div>
<script>

// Margin Convention
var margin = {top: 20, right: 20, bottom: 20, left: 20},
		padding = {top: 0, right: 0, bottom: 50, left: 50}, //left padding for button, bottom padding for legend
		vizWidth = 960,
		vizHeight = 500,
		plotWidth = vizWidth - margin.left - margin.right,
		plotHeight = vizHeight - margin.top - margin.bottom,
		panelWidth = plotWidth - padding.left - padding.right,
		panelHeight = plotHeight - padding.top - padding.bottom;

var viz = d3.select("body").append("svg")
						.attr("class", "viz")
    				.attr("width", vizWidth)
    				.attr("height", vizHeight);

var plot = viz.append("g")
		.attr("class","plot")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var panel = plot.append("g")
		.attr("class","panel")
    .attr("transform", "translate(" + padding.left + "," + padding.top + ")");

//button drawing
//the class of the button is the what happened to the animation after you
//press the button
var buttonHeight = 20, buttonWidth = padding.left;

var button = viz.append("g")
								.attr("id","button")
								.classed("play",true)
								.attr("transform", "translate(" + margin.left + "," +
											margin.top + ")");

button.append("rect")
			.attr("height",buttonHeight)
			.attr("width",buttonWidth)
			.attr("fill","white")
			.on("mouseover",function(){d3.select(this).attr("fill","grey")})
			.on("mouseout",function(){d3.select(this).attr("fill","white")})
			.style("stroke","black");

button.append("text")
			.attr("x",buttonWidth/2)
			.attr("y",buttonHeight/2)
			.attr("text-anchor","middle")
			.attr("alignment-baseline","central")
			.text("PLAY") //since the starting class is play

//show the year the choropleth correspond to
var currYear = viz.append("text")
										.attr("transform","translate("+margin.left+","
										+(margin.top+buttonHeight) + ")")
										.attr("x",buttonWidth/2)
										.attr("y",buttonHeight/2)
										.attr("text-anchor","middle")
										.attr("alignment-baseline","central")

//Tooltip drawing
function drawTooltip(d,currYear) {
		var xPosition = d3.event.pageX;
    var yPosition = d3.event.pageY;

d3.select("#tooltip")
			.classed("hidden",false)
			.style("left", xPosition + "px")
			.style("top", yPosition + "px")
			.html(d.properties.PA + "<br>"+ d.properties[currYear]);
}

// Legend Drawing
var legendWidth = panelWidth/2, legendHeight = 10;

var legend = viz.append("g")
								.classed("legend",true)
								.attr("transform", "translate(" + (margin.left +panelWidth/4)
								+ "," + (margin.top+panelHeight + margin.top) + ")")

legend.append("rect")
			.attr("width", legendWidth)
			.attr("height", legendHeight)
			.attr("fill","white")
			.style("stroke","black")

legend.append("image")
			.attr("transform", "translate(" + 0.5 +","+0.5+")")
			.attr("id","legendRect")
			.attr("xlink:href", "YlOrRd.png")
			.attr("preserveAspectRatio","none")
			.attr("width", legendWidth-1)
			.attr("height", legendHeight-1)

//Data binding
d3.json("singapore and elderlies 20170905.json", function(sg) {
	var years = Object.keys(sg.features[0].properties),
			years = years.filter(foo => foo!=="PA"),
			index = 0;

currYear.text(years[index]);

var allPop = sg.features.map(
		function(obj,ind){
			var pop = Object.assign({},obj.properties)//make a deep copy
			delete pop.PA
			return Object.values(pop)
		})
	var allPop = [].concat.apply([], allPop),
			maxPop = d3.max(allPop),
			minPop = d3.min(allPop);

var mapToOne = d3.scaleLinear()
									.range([0,1])
									.domain([minPop,maxPop])

var getColor  = d3.scaleSequential(d3.interpolateYlOrRd)
										.domain([minPop,maxPop]);

var projection = d3.geoMercator().fitSize([panelWidth,panelHeight],sg),
			geoPath = d3.geoPath(projection);

var ticks = d3.axisBottom(d3.scaleLinear()
														.domain([minPop,maxPop])
														.range([0,legendWidth]));
	legend.append("g")
		.attr("transform","translate(" + 0 + "," + legendHeight + ")")
		.call(ticks);

function updateColor(index){
		areas.transition()
				.style("fill",function(d){
					return getColor(d.properties[years[index]]);});
	}
	function updateButton(newClass){
		button.classed(newClass,true)
		d3.select("#button text")
			.transition()
			.text(newClass.toUpperCase())
	}
	function updateCurrYear(index){
		currYear.transition()
							.text(years[index])
	}

console.log(years.length);

button.on("click",function(){
		if(button.classed("reset")){
			button.classed("reset",false);
			index = 0;
			console.log(index);//
			updateColor(index);
			updateButton("play");
			updateCurrYear(index);
		}else if(button.classed("play")){
			button.classed("play",false);
			timer = d3.interval(function(elapsed){
				console.log(elapsed);
				index +=1;
				if(index < years.length){
					console.log(index);
					updateColor(index);
					updateButton("pause");
					updateCurrYear(index);
				} else{
					index -= 1; //hard coding for tooltips to make sense
					console.log(index);
					timer.stop();
					updateButton("reset");
				}},500);
		}else if(button.classed("pause")){
			button.classed("pause",false);
			timer.stop();
			updateButton("play");
		}
	})

});

</script>
</body>
</html>

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

https://d3js.org/topojson.v1.min.js

https://d3js.org/d3-geo.v1.min.js

https://d3js.org/d3-scale.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js