Dynamic Choropleth

<!doctype html>
<html>
<head>
		<title>Singapore Planning Area</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>
		<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
		<div id="tooltip" class="hidden">
			<p><span id="value"></p>
		</div>
<script>

var margin = {top: 50, right: 30, bottom: 10, left: 30},
		padding = {top: 0, right: 0, bottom: 0, left: 0},
		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 color = {yellow: "#ffe74c", red: "#ff5964", white:"#ffffff",
					 green: "#6bf178", blue: "#35a7ff"};

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

// Creating the Slider
var slider = viz.append("g")
    .attr("class", "slider")
    .attr("transform", "translate(" + margin.left + "," + margin.top / 2 + ")");

var x = d3.scaleLinear()
    .domain([0, 180])
    .range([0, plotWidth])
    .clamp(true);

slider.append("line")
    .attr("class", "track")
    .attr("x1", x.range()[0])
    .attr("x2", x.range()[1])
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-inset")
  .select(function() { return this.parentNode.appendChild(this.cloneNode(true)); })
    .attr("class", "track-overlay")
    .call(d3.drag()
        .on("start.interrupt", function() { slider.interrupt(); })
        .on("start drag", function() { hue(x.invert(d3.event.x)); }));

slider.insert("g", ".track-overlay")
    .attr("class", "ticks")
    .attr("transform", "translate(0," + 18 + ")")
  .selectAll("text")
  .data(x.ticks(10))
  .enter().append("text")
    .attr("x", x)
    .attr("text-anchor", "middle")
    .text(function(d) { return d; });

var handle = slider.insert("circle", ".track-overlay")
    .attr("class", "handle")
    .attr("r", 9);

slider.transition() // Gratuitous intro!
    .duration(750)
    .tween("hue", function() {
      var i = d3.interpolate(0, 70);
      return function(t) { hue(i(t)); };
    });

function hue(h) {
  handle.attr("cx", x(h));
  viz.style("background-color", d3.hsl(h, 0.8, 0.8));
}

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 + ")");

var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("display", "none");

//Important Functions
function drawTooltip(d){
		var xPosition = d3.event.pageX;
    var yPosition = d3.event.pageY;

d3.select("#tooltip")
			.classed("hidden",false)
			.style("left", xPosition + "px")
			.style("top", yPosition + "px")
			.text(d.properties.PLN_AREA_N);
}

function mouseout() {
	d3.select("#tooltip").classed("hidden", true);
	d3.select(this).classed("highlight",false)
}

d3.json("sg plan area 20170903.json", function(sg) {
		var projection = d3.geoMercator().fitSize([panelWidth,panelHeight],sg),
				geoPath = d3.geoPath(projection);

var areas = panel.selectAll("path")
										.data(sg.features)
										.enter()
										.append("path")
												.attr("d",geoPath)
												.classed("area",true)
												.on('mouseover', function(d) {
													d3.select(this).classed("highlight",true);
													drawTooltip(d);})
												.on('mouseout',mouseout);
});

</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