D3 Examples - Map with Pixi.js + D3

xxxxxxxxxx
 
<!DOCTYPE html>
<html>
<body>
<script src="pixi.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/topojson.v2.min.js"></script>
<script>
​
var width = 960,
    height = 500,
    extent = [[30, 30], [width - 30, height - 30]];
​
var app = new PIXI.Application(width, height, { backgroundColor: 0xffffff });
​
document.body.appendChild(app.view);
​
var graphics = new PIXI.Graphics();
​
var textContainer = new PIXI.Container();
​
var textStyle = new PIXI.TextStyle({
    fontFamily: 'Arial',
    fontSize: 12,
    fill: '#666666',
    dropShadow: true,
    dropShadowColor: '#ffffff',
    dropShadowBlur: 2,
    dropShadowDistance: 0
});
​
var projection = d3.geoMercator();
​
var path = d3.geoPath()
    .projection(projection)
    .context(graphics);
​
d3.json('topo.json', function(error, topo) {
    if (error) throw error;
​
    var land = topojson.feature(topo, topo.objects.land);
    var italy = topojson.feature(topo, topo.objects.italy);
    var cities = topojson.feature(topo, topo.objects.cities).features;
​
    projection.fitExtent(extent, italy);
​
    // Land
    graphics.beginFill(0xf7f7f7, 1);
    graphics.lineStyle(1, 0xcccccc, 1);
    path(land);
    graphics.endFill();
​
    // Italy
    graphics.beginFill(0xfcfcfc, 1);
    graphics.lineStyle(1, 0x666666, 1);
    path(italy);
    graphics.endFill();
​
    // City labels
    var markerWidth = 4;
    graphics.lineStyle();
    graphics.beginFill(0xA45341, 1);
    cities.forEach(function(city) {
        // Marker
        var p = projection(city.geometry.coordinates),
            x = p[0] - markerWidth / 2,
            y = p[1] - markerWidth / 2;
        graphics.drawRect(x, y, markerWidth, markerWidth);
​
        // Text
        var text = new PIXI.Text(city.properties.name, textStyle);
        text.x = p[0] + 7;
        text.y = p[1] - 8;
        textContainer.addChild(text);
    });
​
    app.stage.addChild(graphics);
    app.stage.addChild(textContainer);
});
​
​
​
</script>
</body>
</html>
    