how to load geometryCollection of geojson file in d3

Question

I successfully converted a UK map shapefile to geojson using mapshapers. But I am unable to load this geojson in d3.js. Please help. script is as follows.

<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var canvas = d3.select("body").append("svg")
        .attr("width", 760)
        .attr("height", 700)

        d3.json("Areas_uk_geo.json", function (data) {
            var group = canvas.selectAll("g")
                .data(data.geometries)
                .enter()
                .append("g");

            var projection = d3.geo.mercator();
            var path = d3.geo.path.projection(projection);

            var areas = group.append("path")
                .attr("d", path)
                .attr("class", "area");
        });
</script>

The geojson file has a geometryCollection instead of featureCollection. The geojson file is of the below mentioned format.

{
    "type" : "GeometryCollection",
    "geometries" : [{
            "type" : "MultiPolygon",
            "coordinates" : [[[[-2.2241804372470533, 56.88745481725907],

.... }, ... and so on.

The error I am getting is "d3.geo.path.projection is not a function"

Thomas Gratier Thomas Gratier · Accepted Answer · 2014-12-20T11:36:33

As mentionned in @vincent-beltman comment, it should be

d3.geo.path().projection(projection);

You can confirm this with Mike Bostock post "Let’s Make a Map"

how to load geometryCollection of geojson file in d3

1 Answers