D3 Examples - world malaria cases with spam.js

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Malaria cases</title>
</head>
<body>
    <script src="d3.min.js"></script>
    <script src="topojson.min.js"></script>
    <script src="rbush.min.js"></script>
    <script src="d3.geo.projection.min.js"></script>
    <script src="spam.min.js"></script>
    <script type="text/javascript">
    
    var graticule = d3.geo.graticule(),
    width = 960,
    height = 960;
​
    d3.csv("malaria_cases.csv", function(error, malaria) {
        d3.json("world-50m.json", function(error, d) {
            topojson.presimplify(d)
​
            var map = new StaticCanvasMap({
                element: "body",
                width: width,
                height:height,
                projection: d3.geo.azimuthalEqualArea()
                .clipAngle(180 - 1e-3)
                .scale(237)
                .translate([width / 2, height / 2])
                .precision(1)
                .rotate([-65,0,0]),
                data: [
                    {
                        features: topojson.feature(d, d.objects["countries"]),
                        static: {
                            prepaint: function(parameters, d) {
                                parameters.context.beginPath();
                                parameters.path(graticule());
                                parameters.context.lineWidth = 0.4;
                                parameters.context.strokeStyle = 'rgb(170,170,170)';
                                parameters.context.stroke();
                            },
                            paintfeature: function(parameters, d) {
                                parameters.context.lineWidth = 1;
                                parameters.context.strokeStyle = "rgb(255,255,255)";
                                parameters.context.stroke();
​
                                parameters.context.fillStyle = "rgba(197,197,197,0.9)";
                                parameters.context.fill();
                            },
                            postpaint: function(parameters, d) {
                                malaria.forEach(function (d) {
                                    var projectedPoint = parameters.map.settings().projection([+d.longitude, +d.latitude]);
                                    parameters.context.beginPath();
                                    parameters.context.arc(projectedPoint[0], projectedPoint[1] / parameters.scale, 2.1, 0, 2 * Math.PI, true);
                                    parameters.context.lineWidth = 1.5;
                                    parameters.context.strokeStyle = "rgba(255,192,27,0.1)";
                                    parameters.context.stroke();
                                    parameters.context.fillStyle = "rgba(205,23,25,0.15)";
                                    parameters.context.fill();
​
​
                                })
                            }
                        }
                    }
                ]
            })
            map.init()
        })
    })
    </script>
</body>
</html>
​
    