How We Built USA Today's Election Night Maps(mapbox.com)
mapbox.com
How We Built USA Today's Election Night Maps
http://mapbox.com/blog/election-mapping-usatoday/
19 comments
I've worked on real-time displays of election results data in a newsroom setting, so I know how much planning goes into something like this. This looks great!
This is a great write-up.
I love seeing your thought process on how you tackled the project. The bonus playback of realtime results and the not preloading county data are two very good examples of problems that need solving when you take on a project like this. Super write up.
I love seeing your thought process on how you tackled the project. The bonus playback of realtime results and the not preloading county data are two very good examples of problems that need solving when you take on a project like this. Super write up.
I really like that map with overlaid discs representing the number of EV for each state. I think it's much clearer than the usual method of distorting the map to make each state's area proportional to its number of EV.
"each state's area proportional to its number" = that class of map is called a cartogram
http://www.usatoday.com/election-2012/results/
Broken here. Chrome and FF.
Broken here. Chrome and FF.
I learned about this: R2D3:
> Since it doesn’t get bogged down with supporting legacy browsers without SVG support, we switched over to R2D3 for versions of Internet Explorer less than IE9. https://github.com/mhemesath/r2d3/
It's that easy to provide IE support for D3?
> Since it doesn’t get bogged down with supporting legacy browsers without SVG support, we switched over to R2D3 for versions of Internet Explorer less than IE9. https://github.com/mhemesath/r2d3/
It's that easy to provide IE support for D3?
IE9 works well with D3 without any work. For IE < 9, generally it was pretty easy, though we had to do a few extra things we needed to work around:
1. remove the use of SVG groups which are not supported in VML (though I think r2d3 has had a recent update with some level of group support) 2. Avoid selecting features paths by class (e.g. us d3.select('path') instead of d3.select('path.state') Class selectors just wouldn't work for us. 3. for performance, we used only the most simplified geographic data in IE < 9 4) 4. Avoid using d3.mouse for mouse location. Didn't work right in IE
1. remove the use of SVG groups which are not supported in VML (though I think r2d3 has had a recent update with some level of group support) 2. Avoid selecting features paths by class (e.g. us d3.select('path') instead of d3.select('path.state') Class selectors just wouldn't work for us. 3. for performance, we used only the most simplified geographic data in IE < 9 4) 4. Avoid using d3.mouse for mouse location. Didn't work right in IE
How long did it take? Any idea how much the AP data feed costs?
I was hoping for some code listings.
Yeah, that's a little unwieldy.
Sure, what are you looking for?
I'd like to know more about the SVG / VML fallback for rendering. We are working on a system where we are doing SVG directly and have a "TODO" for figure out how to get it rendered in IE
Less narrative, I guess, but I think that's just a different preference of meaning for "how."
Personally, I loved the narrative. Which I mention not to suggest you shouldn't want something else, but so that the authors know that people liked it as is.
I also found the narrative really helpful. We run some similar products around maps, it was interesting to see how they approached this!
Ok, well if there's anything specific, I'm happy to post some gists.
What data source(s) did you use to display counties?
For the county shapes, the low res data is from D3: https://github.com/mbostock/d3/tree/master/examples/data and the hi res data is processed from the US census: http://www.census.gov/geo/www/cob/