Play with an interactive 3D model of some popular National Parks in the US
I wanted to try my hand at creating 3D elevation models and thought trying to model some of the popular (and some of my favorite) national parks would be a good starting point.
Instructions
Once a 3D elevation model is selected and shown you can manipulated it in multiple ways:
Zoom – You can zoom in and out, though the method depends on the device you are using. Try scrolling or pinch to zoom. You can also select the magnifying glass in the toolbar and drag to zoom.
Rotate – You can rotate and change the angle of the model using by clicking and dragging on the model. This is the default selection in the toolbar (circular arrow around z axis)
Pan – You can move the model around with if you select the panning tool from the toolbar (arrows going in all directions)
Show contours – if you hover or click on part of the map, it can show all the areas of the model with the same elevation and the tooltip will show the geographic coordinates and elevation (you can toggle showing the tool tip if you select the tooltip bar)
Save image – click on the camera icon in the toolbar to save as png
Colors – you can change the color scale used to show elevation. You can also reverse the color scale.
Change vertical exaggeration – you can select whether the vertical height is exaggerated using the ‘Height Scale’ slider. You can change between 1 (no exaggeration) to 11 (vertical scale is exaggerated by factor of 11).
Change min elevation – you can select whether the minimum elevation is sea level or the lowest elevation in the park.
You can select a number of different parks from the drop down menu. If you have suggestions for additional parks, I may be able to add them to the list.
Note: the elevation files are data intensive since the visualization is downloading the elevation across in some cases, many hundreds or thousands of square miles. To keep the data needs down, I’ve reduced the resolution of the elevation data. Though the original data is 90 meter resolution (elevation is specified across every 90 x 90 m square in each park, I’ve averaged these squares together so that each park model only has about tens of thousands of these squares, regardless of the actual area of the park. This improves data loading and rendering times and makes the improves the responsiveness of the model.
Sources and Tools:
This visualization is written in HTML/CSS/Javascript. Digital elevation data is obtained from Open Topography and uses Shuttle Radar Topography Mission GL3 (90 meter resolution). The elevation data is downloaded using the opentopography API and parsed in a python script which downsamples the data to limit the number of elevation cells. The script also determines if a point is inside or outside of the park boundaries in order to create the elevation model. The 3D model is rendered using the Plotly open-source javascript graphing library.
We can compare the sizes of countries and continents to planets and moons by projecting a map of a specific country onto another planet. Select a country and planet or moon to find out.
In one of my kid’s favorite books, there’s a picture demonstrating how Pluto is the same size as Australia. It has a satellite image of the country and an image of the former ninth planet superimposed on top as if it were hovering above the country. That image has stuck with me and I thought it would be interesting to see how other countries would compare with other planets and bodies in our solar system. As I’ve been working with javascript graphing/mapping library, D3.js and making maps/globes, I realized I should try to “project” individual countries onto these planets to see what they looked like.
Instructions
This visualization should be pretty self explanatory. You can select a country or continent and a planet or moon (or the sun) in the solar system. The visualization will then project the land onto the body and you have a simple visual comparison of the size of the country/continent and the planet or moon. You can drag on the visualization to rotate the planet.
There are some combinations that are not possible because the country/continent is too large to be projected onto the body without overlap. In these cases, the planet or country will be greyed out in the selection menu. You can click the “Get URL” button and share a specific map combination (country and planet) by copying the address in the url address bar.
The visualization also displays the area of the country/continent and the surface area of the planet or body. In some cases, the percentage may not look correct but remember that you can only see half of the planet surface and that it’s actually a hemisphere (half a sphere and not just a circle). It becomes clearer if you draw the surface of the planet around.
Calculations
The calculations to project a country onto another body involves starting with a set of coordinates (made up of longitude and latitude values) which define the border of the country, in the geojson format. To display them on Earth, the coordinates are modified so that the center of the country is centered at the intersection between the equator and prime meridian [0 deg latitude, 0 deg longitude].
To display them projected on a different planet or moon, it is necessary to change the latitude and longitude values of each point of the polygon country border so that it represents the same distance away from the polygon center. I used the Haversine formula to calculate the distance and bearing between two points on a sphere and then used the inverse to find the coordinates that were that distance and bearing from the center point on a sphere of a different size. These formulas can be found here. The main idea is that the distance representing one degree of latitude on Earth will be half as large on a planet that is half the size of Earth (like Mars). Thus, the distance between the center of a country and a point on the border will be a different number of degrees latitude and longitude from the center point on a different planet than on Earth. And this calculatin is done using these formulae.
Sources and Tools:
This visualization was made using the open-source, d3 javascript dataviz library and UI are made using HTML, CSS and javascript.
What does it look like if you center a map on a specific country? Click on a country to find out.
World maps are used to show the geographic relationships between the countries and regions of the world. Their design shapes our perception of the world and those relationships. Two of the important aspects of map design are the choice of map projection and what is centered in the map. The idea for this map dataviz is to let users create their own country centered map by centering the map where you choose (on a country of your choice or a specific point) and the map projection.
As discussed in my real country size mercator map, there aren’t any perfect map projections as you try to represent the 3-dimensional surface of a sphere on a 2-dimensional map. Each map projection has advantages and disadvantages.
Instructions
Click on a country or point on the ocean to center the map projection onto this area
You can choose between the following map projections:
Orthographic (globe) – a map projection that looks like a globe
Mercator – a very common cylindrical map projection used in many web maps which expands sizes of land near the top and bottom edges
Mollweide – a pseudocylindrical projection that maintains equal area of land masses. Areas near the top and bottom edges can be distorted
Equirectangular – another cylindrical projection but latitude lines are kept equidistant. Areas near top and bottom edges of map are wider than in reality.
Gall Peters – an equal area cylindrical projection that stretches shapes vertically at the equator and shrinks shapes vertically at the poles.
In addition, you can:
Rotate the map in increments of 45 degrees using the ⟲ and ⟳ buttons.
Share maps of your home country, chosen map projection and rotation by clicking on the share button (and copying the URL).
The number of different maps you can create is quite large and will give you a different and often unusual perspective on the world. If you choose the cylindrical projections (Mercator, equirectangular, Gall Peters) you will see some interesting distortions when you focus on different countries or regions. The reasoning is that because the map is rectangular (i.e. the longitude lines are kept parallel on the map, while in reality longitude lines converge at the poles), land masses near the top and bottom of the map will grow as they are widened (and in the case of the Mercator, made taller) to accommodate the map projection. Because the Orthographic and Mollweide projections have converging longitude lines, they do not exhibit the same level of distortion.
If you are interested in map projections, they are described in this wikipedia article. For a cylindrical projections, you can think of it as encircling the globe with a rolled surface which forms the side of a cylinder. See this image from wikipedia.
In the standard projection, the globe is touching this cylinder at the equator, but this map lets you move any country or point to the place where it intersects the cylinder and then projects the land masses onto the cylinder. Land masses at the top and bottom of the sphere in this orientation will be more distorted at top and bottom of the map projections in these cylindrical projections.
Visualize the large number of coronavirus cases and deaths in the US each day/hour in about 10 seconds
The rate of COVID-19 deaths and cases in the US is crazy high after the 2020 winter holidays and maybe still be going up. This visualization shows the number of COVID cases that occur in one hour or the COVID deaths that occur in one day based on the average of the last five days. This is another attempt to show the true scale of how many cases and deaths the US is dealing with, since it is often hard to understand large numbers. I have also attempted to show the scale of US deaths/cases here and here. Unfortunately, there are so many people getting sick and dying, it’s hard to fathom just how many people this actually is.
The 5-day averaging was done to smooth out any peaks and troughs in data reporting due to weekends/holidays, since I noticed that some states were literally reporting zero COVID cases some days while reporting many hundreds or thousands of cases other days.
The dots shown on the animation are located in the state that the cases or deaths occur but are randomly spread out within the state. This is done for visual clarity since if they were shown in their actual location, most of the dots would be overlapping in urban, high density areas. This approach lets you see which states have high COVID instances but still locate them by state.
You can share this animation by putting ?cat=deaths or ?cat=cases behind the url or copying and sharing one of these links:
How many electoral votes did each state have across two centuries of elections?
This animation shows the number of electoral votes each state had during each of the 59 presidential elections in US history between 1788 and 2020. It’s interesting to see the number of US states and their relative population sizes (in terms of electoral votes) over many different presidential elections. The population is counted every 10 years in the census so if a presidential election occurs between a census, it likely will not see any difference in numbers of electoral votes, unless something else happens (such as addition of a new state to the country).
Instructions
You can use the slider to control the election year to focus on a specific election and toggle the animation by hitting the Start/Stop button. Hovering over each state will tell you the number of electoral votes and the percentage of the total number of electoral votes in that election.
In the elections during and immediately after the US Civil War, we also see some states whose electoral votes for president are not counted (shown in purple). Wyoming, the state with the lowest population in the US, has the highest number of electoral votes per person in the state, while the three most populous states, California, Florida and Texas have the least number of electoral votes per person. Wyoming has four times the number of electors per capita than these 3 states have (i.e. accounting for their population sizes). That will be the subject of another map dataviz.
Interactive Choropleth of the Number of States That Border Each State
This is a fun little map that shows the number of states that border each state. I’m working on improving the interactivity of maps and this was a good project to try this with. The base map is a choropleth map which color codes each state by the number of states it shares a border with. If you hover over (or touch on mobile) a state, it will highlight the state and show you (and list) the bordering states.
It’s important to note that officially New York and Rhode Island share a water border (between Rhode Island and Long Island, NY) and that Michigan and Minnesota also share a border (in Lake Superior).
Recent Comments