Comments (10)
@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). :)
from d3-book.
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^
from d3-book.
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!
from d3-book.
@ExtremelySeriousChicken some of the values are a bit off, but it shouldn't be that bad. Can you post a screenshot?
@jackparmer thank you!
from d3-book.
from d3-book.
from d3-book.
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;
});
});
});
});
from d3-book.
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.
from d3-book.
All, I updated the values using geocaching. Just change from .txt to .csv.
us-cities.txt
from d3-book.
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!
from d3-book.
Related Issues (20)
- chapter_13/06_stacked_area.html does not run HOT 2
- Chapter_07 - 09_time_scale.html HOT 7
- chapter_11/01_line_chart.html HOT 4
- 06_stacked_area HOT 1
- Chapter 16 parseTime -> d3.timeParse HOT 1
- Chapter 16 parseTime => d3.timeParse() HOT 1
- chapter_08/09_time_axis_prettier.html + chapter_07/09_time_scale.html HOT 3
- d3 v5 - update to d3.json (Chapter 14) HOT 1
- converting rows in d3.csv() HOT 2
- Question: Storing Selections in Variables HOT 3
- time-based axes code? HOT 4
- Ch7_Code_09_time_scale.html HOT 1
- Incorrect hyperlink in Chapter 2 on oreilly.com HOT 1
- Chapter 5 HANDLING DATA-LOADING ERRORS HOT 6
- Tooltips HOT 2
- MDN shortlink in chapter 3 redirects to old page that 404s
- Chapter 3 scope clarification (AKA who will gotcha the gotchas?)
- Chapter 14 - Dragging event HOT 1
- Chapter 12 - freakOut function in each() HOT 1
- Chapter 8 - Positioning Axes suggestion HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from d3-book.