Some lat / lon values are incorrect

[jackparmer]

In,

https://raw.githubusercontent.com/alignedleft/d3-book/master/chapter_12/us-cities.csv

San Francisco and Boston are incorrect.

[scotthmurray]

@jackparmer so they are! I'll correct this for the 2nd edition of the book. Let me know if you notice any others that are incorrect.

In the meantime, note discussion in the book about the importance of manually verifying geocoder results (which I did not do here). :)

[ExtremelySeriousChicken]

Hey I noticed that most of the cities in the map has incorrect location (at least when I downloaded the content and tried the examples). For example, Chicago is not in Illinous, San Francisco is in Florida, etc. May I know if this only happens in my case? Thanks! ^u^

[jackparmer]

I used this: https://raw.githubusercontent.com/plotly/datasets/master/2014_us_cities.csv

For this map: https://plot.ly/python/bubble-maps/

Feel free to use if helpful!

[scotthmurray]

@ExtremelySeriousChicken some of the values are a bit off, but it shouldn't be that bad. Can you post a screenshot?

@jackparmer thank you!

[ExtremelySeriousChicken]

[ExtremelySeriousChicken]

[ExtremelySeriousChicken]

Here is the full code of the script part of the page...

        //Width and height
        var w = 500;
        var h = 300;

        //Define map projection
        var projection = d3.geo.albersUsa()
                               .translate([w/2, h/2])
                               .scale([500]);

        //Define path generator
        var path = d3.geo.path()
                         .projection(projection);

        //Define quantize scale to sort data values into buckets of color
        var color = d3.scale.quantize()
                            .range(["rgb(237,248,233)","rgb(186,228,179)","rgb(116,196,118)","rgb(49,163,84)","rgb(0,109,44)"]);
                            //Colors taken from colorbrewer.js, included in the D3 download

        //Create SVG element
        var svg = d3.select("body")
                    .append("svg")
                    .attr("width", w)
                    .attr("height", h);

        //Load in agriculture data
        d3.csv("us-ag-productivity-2004.csv", function(data) {

            //Set input domain for color scale
            color.domain([
                d3.min(data, function(d) { return d.value; }), 
                d3.max(data, function(d) { return d.value; })
            ]);

            //Load in GeoJSON data
            d3.json("us-states.json", function(json) {

                //Merge the ag. data and GeoJSON
                //Loop through once for each ag. data value
                for (var i = 0; i < data.length; i++) {

                    var dataState = data[i].state;              //Grab state name
                    var dataValue = parseFloat(data[i].value);  //Grab data value, and convert from string to float

                    //Find the corresponding state inside the GeoJSON
                    for (var j = 0; j < json.features.length; j++) {

                        var jsonState = json.features[j].properties.name;

                        if (dataState == jsonState) {

                            //Copy the data value into the JSON
                            json.features[j].properties.value = dataValue;

                            //Stop looking through the JSON
                            break;

                        }
                    }       
                }

                //Bind data and create one path per GeoJSON feature
                svg.selectAll("path")
                   .data(json.features)
                   .enter()
                   .append("path")
                   .attr("d", path)
                   .style("fill", function(d) {
                        //Get data value
                        var value = d.properties.value;

                        if (value) {
                            //If value exists…
                            return color(value);
                        } else {
                            //If value is undefined…
                            return "#ccc";
                        }
                   });

                //Load in cities data
                d3.csv("us-cities.csv", function(data) {

                    svg.selectAll("circle")
                       .data(data)
                       .enter()
                       .append("circle")
                       .attr("cx", function(d) {
                           return projection([d.lon, d.lat])[0];
                       })
                       .attr("cy", function(d) {
                           return projection([d.lon, d.lat])[1];
                       })
                       .attr("r", function(d) {
                            return Math.sqrt(parseInt(d.population) * 0.00004);
                       })
                       .style("fill", "yellow")
                       .style("opacity", 0.75)
                       .append("title")
                       .text(function(d){
                           return d.place + ":" + d.population;
                       });

                });

            });

        });

[scotthmurray]

Oh, you’re right! This is really bad, and must have been the result of me sorting the place names independently of lat/lon values. I’ll fix this, thanks.

[JaimeStill]

All, I updated the values using geocaching. Just change from .txt to .csv. us-cities.txt

[scotthmurray]

Thank you all very much for reporting this (huge) oversight on my part.

I've corrected the data for the 2nd edition of the book. Thanks!