D3.js display Topojson

Question

I've been having a problem drawing Venezuela using topojson. I got the GeoJson data for Venezuela from: http://code.highcharts.com/mapdata/countries/ve/ve-all.geo.json

After, I tried to approaches using the topojson console utility and importing it to this site: http://www.mapshaper.org/ and exporting it as topojson. I haven't been able to get the map rendered. Here's my code:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script>
    var width = 960,
        height = 1160;

    var svg = d3.select("body").append("svg")
            .attr("width", width)
            .attr("height", height);

    d3.json("venezuela.json", function(error, ve) {
        var path = d3.geo.path();
        svg.append("path")
                .datum(topojson.feature(ve, ve.objects['ve-all.geo']))
                .attr("d", d3.geo.path().projection(d3.geo.mercator()));
    });

</script>

</body>
</html>

And the topojson: https://gist.githubusercontent.com/rickitan/665af7cc271baf652a90/raw/ed7341aa5431524083c6a1783eb9d32501357a91/mapShaperOutput

I'm not sure if the problem is with the conversion from geojson to topojson or something else.

Thank you so much,

Ricardo

score 0 · Answer 1 · answered Jul 16 '15 at 06:18

First of all you should declare a path and projection before you add the layers like:

var projection = d3.geo.mercator().translate([0, 0]).scale(8400000);
var path = d3.geo.path().projection(projection);

That makes it more clean when you import the layers. And after that just call something like this:

var featureCollection = topojson.feature(currentMap, currentMap.objects.poly_bg);
            g.append("g")
                .selectAll("path")
                .data(featureCollection.features)
                .enter().append("path")
                .attr("d", path);

D3.js display Topojson

1 Answers1