How to draw bubbles on a D3 Map with mercator projection?

Question

I made a world map in D3 with a mercator projection and trying to draw circles/bubbles as well, but they are not showing up on the map. I am using the same projection for the paths for the map as for the circles to calculate the cx and cy projections, but get the following error in my code below:

Uncaught TypeError: Cannot read property 'coordinates' of null

  var margin = {top: 20, right: 20, bottom: 20, left: 20};  

  var w = 1100 - margin.left - margin.right;

  var h = 900 - margin.top - margin.bottom;

  var svg = d3.select("#chart")
              .append("svg")
                .attr("width", w + margin.left + margin.right)
                .attr("height", h + margin.top + margin.bottom)
              .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var meteorsData = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json";

var geoData = "https://raw.githubusercontent.com/johan/world.geo.json/master/countries.geo.json";

var geo = {};

var meteors = {};

d3.json(geoData, function(data){
//load world map data  

   geo = data.features;

   d3.json(meteorsData, function(data){

        meteors = data.features;

        var projection = d3.geo.mercator()
                     .scale(150)
                     .translate([w/2, h/2]);

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

        svg.selectAll("path")
            .data(geo)
            .enter()
            .append("path")
            .attr("fill", "#95E1D3")
            .attr("stroke", "#34495e")
            .attr("stroke-width", 0.5)
            .attr("class", "countries")
            .attr("d", path);

        svg.selectAll(".circles")
           .data(meteors)
           .enter()
           .append("circle")
           .attr("cx", function(d){ return projection(d.geometry.coordinates)[0]})
           .attr("cy", function(d){ return projection(d.geometry.coordinates)[1]})
           .attr("r", 10)
           .attr("fill", "ccc");

            })

})

Someone can help me? Thanks

Im presuming this part of the code `d.geometry.coordinates` is throwing the errors. It looks like your data does not have a `geometry` attribute. — Craicerjack, Feb 03 '17 at 09:35
hi, it does, this is the dataset: https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json — chemook78, Feb 03 '17 at 09:37
Yeah I was just looking at the dataset, but in your code it seems to be null. if you do a `console.log(d)` before you return your projection, is there a geometry in the logged data? — Craicerjack, Feb 03 '17 at 09:39
yes there is for the cx attribute. But the strange thing it doesn't for the cy attribute and I have no idea why? Here is working example: http://codepen.io/chemok78/full/xgWYQx/ — chemook78, Feb 03 '17 at 09:44

score 3 · Accepted Answer · answered Feb 03 '17 at 10:38

So in the data you were using https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/meteorite-strike-data.json
there was one data point that did not have a geometry and that was causing the error

{
    "type": "Feature",
    "geometry": null,
    "properties": {
      "mass": "2250",
      "name": "Bulls Run",
      "reclong": null,
      "geolocation_address": null,
      "geolocation_zip": null,
      "year": "1964-01-01T00:00:00.000",
      "geolocation_state": null,
      "fall": "Fell",
      "id": "5163",
      "recclass": "Iron?",
      "reclat": null,
      "geolocation_city": null,
      "nametype": "Valid"
    }
},

so if you put in a check in your cx and cy functions that should solve the issue:

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

Working codepen here http://codepen.io/anon/pen/xgjrmR

How to draw bubbles on a D3 Map with mercator projection?

1 Answers1