D3 Examples - Choropleth

xxxxxxxxxx
 
<!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: 100, bottom: 20, left: 20},
        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 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 + ")");
​
//Tooltip drawing
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")
            .html(d.properties.PA + "<br>"+ d.properties[2016]);
}
​
// Legend Drawing
var legend = viz.append("g")
                                .classed("legend",true)
                                .attr("transform", "translate(" + (2* margin.left + plotWidth)
                                + "," + margin.top + ")")
​
var legendWidth = 15, legendHeight = plotHeight;
​
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 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 areas = panel.selectAll("path")
                                        .data(sg.features)
                                        .enter()
                                        .append("path")
                                                .attr("d",geoPath)
                                                .classed("area",true)
                                                .style("fill",function(d){
                                                    return getColor(d.properties[2016]);})
                                                .on('mouseover', function(d) {
                                                    d3.select(this).classed("highlight",true);
                                                    drawTooltip(d);}) // call tooltip function
                                                .on('mouseout',function(){
                                                    d3.select("#tooltip").classed("hidden", true);
                                                    d3.select(this).classed("highlight",false);
                                                });
​
    //Drawing Legend Ticks
    var ticks = d3.axisRight(d3.scaleLinear()
                                                        .domain([minPop,maxPop])
                                                        .range([0,plotHeight]));
    legend.append("g")
        .attr("transform","translate(" + legendWidth + "," + 0 + ")")
        .call(ticks);
});
​
    </script>
</body>
</html>
​
    