CODEWITHSUNDEEP
javascriptjsond3.jssvggeojson
Sergio Hernandez
Sergio Hernandez

Reputation: 181

projection([lat,lng]) keeps returning null

I'm trying to map several points from a GeoJSON file onto a map using the albersUsa projection. My code is as follows, but it fails to add the cx and cy attributes to the circle elements:

var width = 960, height = 500;

// set projection
var projection = d3.geo.albersUsa()
.scale(1000)
.translate([width / 2, height / 2]);

// create path variable
var path = d3.geo.path().projection(projection);

d3.json("us.json", function(error, topo) {

states = topojson.feature(topo, topo.objects.states).features

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

// add states from topojson
svg.append("g").attr("class", "feature").selectAll("path")
    .data(states).enter()
    .append("path")
    .attr("class", "feature")
    .attr("d", path);

// put border around states 
svg.append("g").attr("class", "mesh").append("path")
    .datum(topojson.mesh(topo, topo.objects.states, function(a, b) { return a !== b; }))
    .attr("class", "mesh")
    .attr("d", path);

d3.json("data/bhutan.json", function(error, bhutan) {

    // add circles to svg
    svg.selectAll("circle")
    .data(bhutan.features)
    .enter()
        .append("circle")
        .attr("class", "bhutan")
        .attr("cx", function(d) {
            var longitude = d.geometry.coordinates[0];
            var latitude = d.geometry.coordinates[1];
            return projection(latitude);
        })
        .attr("cy", function(d) { 
            var longitude = d.geometry.coordinates[0];
            var latitude = d.geometry.coordinates[1];
            return projection(longitude);
        })
        .attr("r", "8px");
});

And my JSON:

{
    "type": "FeatureCollection",
    "features": [{
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [39.13, -84.48845]
        },
        "properties": {
            "state": "Ohio",
            "city": "2816 Cincinnati",
            "arrivals": "1"
        }
    }, {
        "type": "Feature",
        "geometry": {
            "type": "Point",
            "coordinates": [32.44874, -99.73314]
        },
        "properties": {
            "state": "Texas",
            "city": "Abilene",
            "arrivals": "178"
        }
    }, {
        …
    }]
}

Can anyone help me figure out what I'm doing wrong?

Upvotes: 1

Views: 632

Answers (1)

Lars Kotthoff
Lars Kotthoff

Reputation: 109232

You're calling the projection incorrectly -- it needs to be given a pair of coordinates:

.attr("cx", function(d) {
        var longitude = d.geometry.coordinates[1];
        var latitude = d.geometry.coordinates[0];
        return projection([longitude, latitude])[0];
    })
    .attr("cy", function(d) { 
        var longitude = d.geometry.coordinates[1];
        var latitude = d.geometry.coordinates[0];
        return projection([longitude, latitude])[1];
    })

Upvotes: 2

Related Questions