javascriptd3.js

Why do these 9 U.S. cities not correspond to their actual locations on a D3 map when I plot them using long/lat with an Albers USA projection?


I'm trying to set up what seemed to be a basic D3 map of the U.S., with 9 of the most populated cities marked in circles, but have come up against what must be a very obvious, but confounding problem.

I'm using an Albers USA projection, a U.S. states GeoJSON file, and a .csv that includes:

  1. The city name
  2. The 2014 estimated population
  3. The latitude
  4. The longitude

I've calculated the long/lat values using Google Fusion tables' geocoding feature, and they match up with those available on Scott Murray's D3 book github page.

When I try to plot a circle where each city should be, almost every single one is out of place. Of the 9 cities I'm trying to plot — NYC, Philadelphia, Chicago, Houston, Dallas, San Antonio, Phoenix, San Diego, LA — only NYC and Philadelphia show up relatively intact. Chicago's shifted over towards Minneapolis. San Diego and LA are a mess. Cities in Texas and Arizona have disappeared from their states altogether.

Here's the d3.csv code:

        d3.csv("city_pop.csv", function(data){
                console.log(data);
            var rScale = d3.scale.linear()
                            .domain([0, d3.max(data, function(d){
                                return parseFloat(d.estimate_2014);
                            })])
                            .range([1,15]);

            dataset = data;

            svg.selectAll("circle")
            .data(dataset)
            .enter()
            .append("circle")
            .attr({
                "cx": function(d) { return projection([d.lon, d.lat])[0];},
                "cy": function(d) { return projection([d.lon, d.lat])[1];},
                "r": function (d) { return rScale(parseFloat(d.estimate_2014));}
            })
            .style({
                "fill": "red",
                "opacity": 0.8
            });
        }); 

Here's the gist: http://bl.ocks.org/iblind/2e90a6f516fee793380e

I've been playing with this all day. Does anyone have any ideas? I've been banging my head against the wall for what feels like forever, and am wholly lost.

tl;dr: why do the cities in this D3 map http://bl.ocks.org/iblind/2e90a6f516fee793380e not show up where they should be showing up?


Solution

  • The base data is wrong (city_pop.csv). Run your latitudes and longitudes through Google Map and you'll see the same pattern forms. For example Philadelphia,Pennsylvania (37.15477,-94.486114) is not where Pennsylvania is - https://www.google.ee/maps/place/37%C2%B009'17.2%22N+94%C2%B029'10.0%22W/@37.15477,-94.486114,4z/data=!4m2!3m1!1s0x0:0x0?hl=en