This map of the United States visualizes over 28,000 cities in the 50 states. The interactive visualization lets you type in a name (or part of a name) and see all of the cities that contain those string of letters. The points on the map show the geographic center of each city.
For example, if you type in “N”, you will highlight all cities that start with an N in the US. As you type in another letter (e.g. “e”, it will narrow down the cities that begin with those two letters (“Ne”). It will progressively narrow down the number of cities as you type in more letters. You can see an scrollable list of the cities (ordered by city population) that contain the string of letter that you have typed.
You can click on the check box to show or hide the outlines of the states.
Sources and Tools:
City name and location data was downloaded from simplemaps.com. And the visualization was created using javascript and the open source leaflet javascript mapping library.
The map has been updated to include the latest 2020 results and also adds the option to color the circles by the win margin rather than just looking at the winner.
Click here to view a visualization that looks more explicitly at the correlation between population density and votes by county.
This interactive map shows the election results by county and you can display the size of counties based on their land area or population size.
Previously, I created a map (cartogram) that showed the state by state electoral results from the Presidential Election by scaling the size of the states based on their electoral votes. The idea for that map was that by portraying a state as Red or Blue, your eye naturally attempts to determine which color has a greater share of the total. On a normal election map, Red states dominate, especially because a number of larger, less populated states happen to vote Republican. That cartogram changed the size of the states so that large states with low population, and thus low electoral votes tended to shrink in size, while smaller states with moderate to larger populations tended to grow in size. Thus, when your eyes attempt to discern which color prevails, the comparison is more accurate and attempts to replicate the relative ratio of electoral votes for each side.
This map looks at the 2020 and 2016 presidential election results, county by county. An interesting thing to note is that this view is even more heavily dominated by the color red, for the same reasons. Less densely populated counties tend to vote republican, while higher density, typically smaller counties tend to vote for democrats. As a result, the blue counties tend to be the smaller ones so blue is visually less represented than it should be based on vote totals. More than 75% of the land area is red, when looking at the map based on land areas, while shifting to the population view only about 46% of the map is red. Neither of these percentages is exactly correct because each county is colored fully red or blue and don’t take into account that some counties are won by a large percentage and some are essentially tied. However, the population number is certainly closer to reality as Trump won about 48.8% of the votes that went to either Trump or Clinton.
This tool should be relatively straightforward to use. Just click around and play with it.
The map has a few different options for display:
This was my second attempt at using d3 to generate visualizations. I typically use leaflet to do web-based mapping but I wanted the power of d3 which has functions for the circles to prevent overlapping. This map was inspired by Karim Douieb’s cool visualization of 2016 election results. I modified it in a number of different ways to try to make it more interactive and useful.
This visualization does not actually simulate the collisions between the circles on your browser. It is a bit computationally taxing and causes my computer fan to turn on after awhile. So instead I ran the simulation on my computer and recorded the coordinates for where each circle ended up for each category. Then your browser is simply using d3 transitions to shift positions and sizes of the circles between each of the maps, which is simpler, though with 3142 counties, it can still tax the computer occasionally.
Data and Tools
County level election data for 2016 is from MIT Election Lab. The 2020 county level data is downloaded from the New York Times county election data API and processed using a python script. Population data used is for 2018. The visualization was created using d3 javascript visualization library.
function resized3map(){ //this function is called from the javascript from within the iframe after the contents of iframe are loaded (and after an additional 150ms delay) setTimeout(function (){ mm = document.getElementById('mapframe'); mm.height = mm.contentWindow.document.body.scrollHeight+20+"px"; console.log("resize"); mobilewarn();
}, 150); }
function reloadiframes(){ document.getElementById('mapframe').contentWindow.location.reload(); }
window.addEventListener("orientationchange", function() { reloadiframes(); resizemap(); }, false);
Based on earlier popularity of the country-by-country animation, this map lets you watch as the world is built-up one state at a time. This can be done along a large range of statistical dimensions:
These statistics can be sorted from small to large or vice versa to get a view of the US and its constituent states plus DC in a unique and interesting way. It’s a bit hypnotic to watch as the states appear and add to the country one by one.
You can use this map to display all the states that have higher life expectancy than the Texas:
select “Life expectancy”, sort from “high to low” and use the scroll bar to move to the Texax and you’ll get a picture like this:
or this map to display all the states that have higher population density than California:
select “Population density, sort from “high to low” and use the scroll bar to move to the United States and you’ll get a picture like this:
I hope you enjoy exploring the United States through a number of different demographic, economic and physical characteristics through this data viz tool. And if you have ideas for other statistics to add, I will try to do so.
Data and tools: Data was downloaded from a variety of sources:
The map was created with the help of the open source leaflet javascript mapping library
function resizemap(){ //this function is called from the javascript from within the iframe after the contents of iframe are loaded (and after an additional 150ms delay) setTimeout(function (){ mm = document.getElementById('USmap'); mm.height = mm.contentWindow.document.body.scrollHeight+20+"px";
mobilewarn();
}, 150); }
function reloadiframes(){ document.getElementById('USmap').contentWindow.location.reload(); }
window.addEventListener("orientationchange", function() { reloadiframes(); resizemap(); mobilewarn(); }, false);
function mobilewarn(){ w=window.innerWidth; if (w<600){ document.getElementById('mobilewarning').innerHTML="On mobile devices, visualizations are best viewed in landscape mode."; } else { document.getElementById('mobilewarning').innerHTML=""; } } mobilewarn();
These statistics can be sorted from small to large or vice versa to get a view of the globe and its constituent countries in a unique and interesting way. It’s a bit hypnotic to watch as the countries appear and add to the world one by one.
You can use this map to display all the countries that have higher life expectancy than the United States:
select “Life expectancy”, sort from “high to low” and use the scroll bar to move to the United States and you’ll get a picture like this:
or this map to display all the countries that have higher population density than the United States:
select “Population density, sort from “high to low” and use the scroll bar to move to the United States and you’ll get a picture like this:
I hope you enjoy exploring the countries of the world through this data viz tool. And if you have ideas for other statistics to add, I will try to do so.
Data and tools: Data was downloaded primarily from Wikipedia: Life expectancy from World Health Organization (2015) | GDP from United Nations (2017) | Population from United Nations (2017) | Land Area from CIA factbook (2016)
The map was created with the help of the open source leaflet javascript mapping library
function resizemap(){ //this function is called from the javascript from within the iframe after the contents of iframe are loaded (and after an additional 150ms delay) setTimeout(function (){ mm = document.getElementById('molleweide'); mm.height = mm.contentWindow.document.body.scrollHeight+20+"px";
mobilewarn();
}, 150); }
function reloadiframes(){ document.getElementById('molleweide').contentWindow.location.reload(); }
window.addEventListener("orientationchange", function() { reloadiframes(); resizemap(); mobilewarn(); }, false);
function mobilewarn(){ w=window.innerWidth; if (w<600){ document.getElementById('mobilewarning').innerHTML="On mobile devices, visualizations are best viewed in landscape mode."; } else { document.getElementById('mobilewarning').innerHTML=""; } } mobilewarn();
This interactive map shows how population is distributed by latitude or longitude. It animates the creation of a bar graph by shifting population from its location on the map to aggregate population levels by latitude or longitude increments. Each “block” of the bar graph represents 1 million people. Population is highest in the northern hemisphere at 25-26 degrees North latitude and 77-78 degrees East Longitude.
It should be relatively explanatory. Press the “Aggregate Population by Latitude” button to make a plot of population by line of latitude (i.e. rows of the map).
Press the “Aggregate Population by Longitude” button to make a plot of population by line of longitude (i.e. columns of the map). To see the population distributed across the map, press the “Show Population Grid” button.
This map was inspired by some mapping work done by neilrkaye on twitter and reddit.
Data Sources and Tools:
This map projection is an equirectangular projection. Data on population density comes from NASA’s Socioeconomic Data and Applications Center (SEDAC) site and is displayed at the 1 degree resolution. This interactive visualization is made using the awesome leaflet.js javascript library.
Recent Comments