D3 Examples - Russian research stations in Antarctica

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8" />
<body>
    <div class="js-map"></div>
​
    <script src="d3.js"></script>
    <script src="topojson.js"></script>
    <script src="rbush.js"></script>
    <script src="spam.js"></script>
​
    <script type='text/javascript'>
    d3.tsv("antarctic-bases.tsv", function(error, bases) {
​
​
​
        d3.json("antarctica.json", function(error, d) {
            topojson.presimplify(d)
​
            var map = new StaticCanvasMap({
                element: ".js-map",
                width: 960,
                height: 900,
                projection: d3.geo.stereographic()
                .scale(1000)
                .translate([960 / 2, -650])
                .clipAngle(180 - 1e-4)
                .precision(.1),
                data: [
                    {
                        features: topojson.feature(d, d.objects["antarctica"]),
                        paintfeature: function(parameters, d) {
                            parameters.context.lineWidth = 1.2 / parameters.scale
                            parameters.context.strokeStyle = "rgb(197,197,197)"
                            parameters.context.stroke()
                            parameters.context.fillStyle = "#F8F8F8";
                            parameters.context.shadowColor = "rgba(4,117,128,.4)";
                            parameters.context.shadowBlur = 3
                            parameters.context.fill()
                        },
                        postpaint: function(parameters, d) {
​
                            bases
                            .filter(function(d){
                                return d.countries=="Russia";
                            })
                            .forEach(function(d){
                                
                                var projectedPoint = parameters.map.settings().projection([Number(d.lng), Number(d.lat)])
​
                                //labels
                                parameters.context.beginPath()
                                parameters.context.textAlign = "center"
                                parameters.context.font = "bold 12px " + "sans-serif"
                                parameters.context.fillStyle = "rgb(70,70,70)"
                                parameters.context.shadowColor = "transparent";
                                parameters.context.fill();
​
                                // bases point
                                parameters.context.rect(projectedPoint[0], projectedPoint[1] / parameters.scale, 5,5, 2 * Math.PI, true)
                                parameters.context.fillText(d.name, projectedPoint[0], projectedPoint[1]-6)
                                parameters.context.shadowColor = "transparent";
                                parameters.context.fill()
                            });
​
                        }
​
​
                    }
                ]
            })
            map.init()
        })
    })
    </script>
</body>
</html>
​
    