D3 Examples - Dynamic Choropleth

xxxxxxxxxx
 
<!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>
​
    