D3 Examples - suicides attacks since 1970

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>suicides 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 = 650,
    scale = 150;
    var radius = d3.scale.sqrt()
    .range([0, 15])
​
    d3.tsv("kills.tsv", function(error, suicides) {
        radius.domain(d3.extent(suicides, function(d){
            return +d.nkill;
        }));
        d3.json("world.json", function(error, d) {
            topojson.presimplify(d)
            var map = new StaticCanvasMap({
                element: "body",
                width: width,
                height:height,
                projection: d3.geo.robinson()
                .scale(scale)
                .translate([width / 2, height / 2])
                .precision(.1),
                data: [
                    {
                        features: topojson.feature(d, d.objects["land"]),
                        static: {
​
                            prepaint: function(parameters, d) {
                                // painting sphere
                                parameters.context.beginPath()
                                parameters.path({type: "Sphere"})
                                parameters.context.lineWidth = 2
                                parameters.context.strokeStyle = "rgb(170, 170, 170)"
                                parameters.context.stroke()
                                parameters.context.fillStyle = "rgba(2,120,156,0.03)";
                                parameters.context.fill()
                                // graticule
                                parameters.context.beginPath();
                                parameters.path(graticule());
                                parameters.context.lineWidth = 0.4;
                                parameters.context.strokeStyle = 'rgb(122,148,149)';
                                parameters.context.stroke();
​
                            },
                            // coastline
                            paintfeature: function(parameters, d) {
                                parameters.context.lineWidth = 0.1;
                                parameters.context.strokeStyle = "rgba(122, 148, 149, 0.8)";
                                parameters.context.stroke();
                                parameters.context.save()
                                parameters.context.shadowColor = "rgba(122, 148, 149, 0.5)";
                                parameters.context.shadowBlur = 8
                                parameters.context.fillStyle = "rgb(255,255,255)";
                                parameters.context.fill()
                                parameters.context.restore()
                            }
                        }
                    },
                    {
                        features: topojson.feature(d, d.objects["countries"]),
                        static: {
                            // countries
                            paintfeature: function(parameters, d) {
                                parameters.context.lineWidth = 1;
                                parameters.context.strokeStyle = "rgb(150,150,150)";
                                parameters.context.stroke();
                                parameters.context.fillStyle = "rgba(245,241,233,0.9)";
                                parameters.context.fill();
                            }
                        }
                    },
                    {
                        features: topojson.feature(d, d.objects["roads-no-ferrys"]),
                        static: {
                            // roads
                            paintfeature: function(parameters) {
                                parameters.context.lineWidth = 0.2;
                                parameters.context.strokeStyle = "rgba(232,230,223,1)";
                                parameters.context.stroke();
                            },
                            // draw attacks
                            postpaint: function(parameters, d) {
                                suicides.forEach(function (d,i) {
                                    var projectedPoint = parameters.map.settings().projection([+d.longitude, +d.latitude]);
                                    parameters.context.beginPath();
                                    parameters.context.arc(projectedPoint[0], projectedPoint[1] / parameters.scale, radius(d.nkill), 0, 2 * Math.PI, true);
                                    parameters.context.lineWidth = 1.5;
                                    parameters.context.strokeStyle = "rgba(205,23,25,0.2)";
                                    parameters.context.stroke();
                                    parameters.context.fillStyle = "rgba(205,23,25,0.01)";
                                    parameters.context.fill();
                                })
                            }
                        }
                    }
                ]
            })
            map.init()
        })
    })
    </script>
</body>
</html>
​
    