Posts for Tag: visualization
Iceberger Remixed and Improved – Iceberg Simulator
The melting algorithm has been updated so that melting below water is faster than melting above the waterline. It’s fun to try to get the iceberg pieces to radically change orientation when the iceberg breaks apart due to melting.
Draw (or choose) an iceberg and visualize how it will float and melt
I was so impressed with the interactive Iceberger tool that Josh Tauberer (@JoshData) made that I had to modify it and add some additional features. Click here to see the original. My additions allow you to conjure up pre-made “icebergs” to see how they float and also allow some interaction. Try “poking” the icebergs you make.
Josh and I were both inspired by a tweet by Megan Thompson-Munson (@GlacialMeg).
Today I channeled my energy into this very unofficial but passionate petition for scientists to start drawing icebergs in their stable orientations. I went to the trouble of painting a stable iceberg with my watercolors, so plz hear me out.
(1/4) pic.twitter.com/rtkCYub38b
— Megan Thompson-Munson (@GlacialMeg) February 19, 2021
Instructions
You can choose between 3 different iceberg creation options:
- Draw Iceberg – the original Iceberger option. Choose this option and draw any shape you want and see how it floats.
- Select State – Choose this option and select from one of the states of the United States to see how it will float.
- Select Shape = Choose this option and select from one of the premade shapes to see how it will float.
Once the iceberg has been created, you can also affect it in a couple of different ways:
- Click on the Iceberg – This lets you push on the left side of the iceberg to induce some rotation and see if there are multiple stable orientations. Click it several times in a row if you want to flip the iceberg over. If you push on the right size it will rotate the iceberg clockwise and if you push on the left size, it will rotate counter clockwise. if you push in the middle third of the iceberg, it will push it straight down.
- Melting – You can select between different options – No melting, slow medium and fast. This took awhile to code correctly. Previously, I’d just scale parts of the iceberg but this new code actually takes material away from the surface of the iceberg in a uniform way. It works more like you would expect melting ice to behave. Also melting occurs more quickly underwater than in the air.
- Changing the Sky – You can change the colors of the sky between sunrise, midday and sunset colors.
- Showing forces – You can toggle whether to show the center of buoyancy (B) and center of gravity (B) of the iceberg.
Some Physics – no equations
The force of gravity (G) affects the entire body regardless of where it is or how it is oriented. If you show the forces, the red dot labeled G shows where the center of mass of the iceberg is. The blue dot labeled B shows where the center of buoyancy is. This is the center of mass of the part of the iceberg that is submerged. The force acting on the submerged part is equal to the volume of water displaced. If the center of buoyancy is below the center of gravity, then the forces will be equal and object will be in stable equilibrium. If the center of buoyancy is somewhere other than under the center of gravity, then the buoyant force will be pushing up on a different place than the gravity force and this will induce a rotation until they are directly over one another.
The code has been updated so that multiple icebergs are now allowed. Melting can separate a single piece of iceberg into multiple pieces, just as in real life. The melting process was a bit difficult to program because of the complexity of shapes that could be produced.
If you have additional suggestions for shapes or countries to add to the list or other improvements to make, let me know in the comments. Also if you are using this as a teaching tool, I’d love to hear how you are incorporating it into your curriculum.
Sources and Tools:
This visualization uses HTML/CSS/Javascript code from the Iceberger app to simulate the buoyancy of icebergs. Melting was accomplished with the help of code from the turf.js, polygon-offset and simplify.js javascript libraries. Additional elements of the UI and other features are also made using HTML, CSS and javascript.
California Rainfall Totals
How do current California rainfall and precipitation totals compare with Historical Averages?
If you are lookin at this visualization, it’s likely winter in California and that means the rainy season (snowy in the mountains). I wanted to visualize how the current year compares with historical levels for this time of year. I used data for California rainfall totals from the California Department of Water Resources. Other California water-related visualizations include reservoir levels in the state as well.
There are three sets of stations that are tracked in the data and these plots:
- Northern Sierra 8-station index
- Tulare Basin 6-station index
- San Joaquin 5-station index
These stations are tracked because they provide important information about the state’s water supply (most of which originates from the Sierra Nevada Mountains). Data from the CDEC website appears to be updated at around 8:30am PST each day.
The visualization consists of two primary graphs both of which show the range of historical values for precipitation. The top graph is a histogram of water year precipitation totals on the specified date (in blue) as well as the precipitation total for the current water year in red.
The second graph shows the percentiles of precipitation over the course of the historical water year, spreading out like a cone from the start of the water year (October 1). You can see the current water year plotted on this to show how it compares to historical values. It also shows the present precipitation level and its percentile within the historical data for the day of the water year.
You can hover (or click) on the graph to audit the data a little more clearly.
Sources and Tools
Data is downloaded from the California Data Exchange Center website of the California Department of Water Resources using a python script. The data is processed in javascript and visualized here using HTML, CSS and javascript and the open source Plotly javascript graphing library.
Countries Mapped onto Solar System Bodies
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.
Country Centered Map Projections
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.
Sources and Tools:
This map was made using the open-source, d3 javascript dataviz library and based on Mike Bostock’s observable maps notebook.
Animation of Coronavirus Cases and Deaths in US
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:
https://engaging-data.com/animation-of-us-covid/?cat=cases
https://engaging-data.com/animation-of-us-covid/?cat=deaths
Sources and Tools:
The coronavirus data comes from the covidtracking.com API. The data is parsed daily using a custom python script and visualizations are made using the open-source Leaflet javascript mapping library and the interface and animation are made using HTML/CSS/javascript.
Stimulus Check Calculator (Late 2020 & Early 2021)
How much money can you expect in your stimulus check?
Updated to include the $1400 stimulus payment per adult and dependent in March 2021.
Use this stimulus check calculator to figure out how much you will receive in your thrid stimulus check.
On December 21, 2020, Congress passed a $900 billion dollar stimulus package in response to the COVID pandemic. The bill authorizes economic assistance to Americans in the amount of $600 per person subject to income limits. It also includes expanded unemployment benefits, rental assistance and an extension to the eviction ban. This calculator helps you calculate the amount of stimulus check that you can expect to receive based on your 2019 tax return filing status, adjusted gross income and number of dependents under 17.
Changing the inputs to the calculator, will show you how your expected stimulus check amount will change. The graph shows for a giving filing status (single, married filing jointly or head of household) how the stimulus check amount will change as a function of income and number of children. You can share a URL with specific parameters included
Sounds like some checks may even get to folks at the end of December and many more will get them in January 2021.
On March 5, congress passed the American Rescue Plan which includes $1400 payments for all Americans. The phase out of this stimulus check is different in that over a $10000 range the stimulus goes from 100% to 0% at the phase out threshold, no matter how many dependents you have. This changes things significantly as you’ll see in the calculator.
Sources and Tools:
The stimulus check calculator is made using javascript and the plotly open source graphing library. It is based on news reports of the expected stimulus amounts and income thresholds.
Iceberger Remixed and Improved – Iceberg Simulator
The melting algorithm has been updated so that melting below water is faster than melting above the waterline. It’s fun to try to get the iceberg pieces to radically change orientation when the iceberg breaks apart due to melting.
Draw (or choose) an iceberg and visualize how it will float and melt
I was so impressed with the interactive Iceberger tool that Josh Tauberer (@JoshData) made that I had to modify it and add some additional features. Click here to see the original. My additions allow you to conjure up pre-made “icebergs” to see how they float and also allow some interaction. Try “poking” the icebergs you make.
Josh and I were both inspired by a tweet by Megan Thompson-Munson (@GlacialMeg).
Today I channeled my energy into this very unofficial but passionate petition for scientists to start drawing icebergs in their stable orientations. I went to the trouble of painting a stable iceberg with my watercolors, so plz hear me out.
(1/4) pic.twitter.com/rtkCYub38b
— Megan Thompson-Munson (@GlacialMeg) February 19, 2021
Instructions
You can choose between 3 different iceberg creation options:
- Draw Iceberg – the original Iceberger option. Choose this option and draw any shape you want and see how it floats.
- Select State – Choose this option and select from one of the states of the United States to see how it will float.
- Select Shape = Choose this option and select from one of the premade shapes to see how it will float.
Once the iceberg has been created, you can also affect it in a couple of different ways:
- Click on the Iceberg – This lets you push on the left side of the iceberg to induce some rotation and see if there are multiple stable orientations. Click it several times in a row if you want to flip the iceberg over. If you push on the right size it will rotate the iceberg clockwise and if you push on the left size, it will rotate counter clockwise. if you push in the middle third of the iceberg, it will push it straight down.
- Melting – You can select between different options – No melting, slow medium and fast. This took awhile to code correctly. Previously, I’d just scale parts of the iceberg but this new code actually takes material away from the surface of the iceberg in a uniform way. It works more like you would expect melting ice to behave. Also melting occurs more quickly underwater than in the air.
- Changing the Sky – You can change the colors of the sky between sunrise, midday and sunset colors.
- Showing forces – You can toggle whether to show the center of buoyancy (B) and center of gravity (B) of the iceberg.
Some Physics – no equations
The force of gravity (G) affects the entire body regardless of where it is or how it is oriented. If you show the forces, the red dot labeled G shows where the center of mass of the iceberg is. The blue dot labeled B shows where the center of buoyancy is. This is the center of mass of the part of the iceberg that is submerged. The force acting on the submerged part is equal to the volume of water displaced. If the center of buoyancy is below the center of gravity, then the forces will be equal and object will be in stable equilibrium. If the center of buoyancy is somewhere other than under the center of gravity, then the buoyant force will be pushing up on a different place than the gravity force and this will induce a rotation until they are directly over one another.
The code has been updated so that multiple icebergs are now allowed. Melting can separate a single piece of iceberg into multiple pieces, just as in real life. The melting process was a bit difficult to program because of the complexity of shapes that could be produced.
If you have additional suggestions for shapes or countries to add to the list or other improvements to make, let me know in the comments. Also if you are using this as a teaching tool, I’d love to hear how you are incorporating it into your curriculum.
Sources and Tools:
This visualization uses HTML/CSS/Javascript code from the Iceberger app to simulate the buoyancy of icebergs. Melting was accomplished with the help of code from the turf.js, polygon-offset and simplify.js javascript libraries. Additional elements of the UI and other features are also made using HTML, CSS and javascript.
California Rainfall Totals
How do current California rainfall and precipitation totals compare with Historical Averages?
If you are lookin at this visualization, it’s likely winter in California and that means the rainy season (snowy in the mountains). I wanted to visualize how the current year compares with historical levels for this time of year. I used data for California rainfall totals from the California Department of Water Resources. Other California water-related visualizations include reservoir levels in the state as well.
There are three sets of stations that are tracked in the data and these plots:
- Northern Sierra 8-station index
- Tulare Basin 6-station index
- San Joaquin 5-station index
These stations are tracked because they provide important information about the state’s water supply (most of which originates from the Sierra Nevada Mountains). Data from the CDEC website appears to be updated at around 8:30am PST each day.
The visualization consists of two primary graphs both of which show the range of historical values for precipitation. The top graph is a histogram of water year precipitation totals on the specified date (in blue) as well as the precipitation total for the current water year in red.
The second graph shows the percentiles of precipitation over the course of the historical water year, spreading out like a cone from the start of the water year (October 1). You can see the current water year plotted on this to show how it compares to historical values. It also shows the present precipitation level and its percentile within the historical data for the day of the water year.
You can hover (or click) on the graph to audit the data a little more clearly.
Sources and Tools
Data is downloaded from the California Data Exchange Center website of the California Department of Water Resources using a python script. The data is processed in javascript and visualized here using HTML, CSS and javascript and the open source Plotly javascript graphing library.
Countries Mapped onto Solar System Bodies
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.
Country Centered Map Projections
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.
Sources and Tools:
This map was made using the open-source, d3 javascript dataviz library and based on Mike Bostock’s observable maps notebook.
Animation of Coronavirus Cases and Deaths in US
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:
Sources and Tools:
The coronavirus data comes from the covidtracking.com API. The data is parsed daily using a custom python script and visualizations are made using the open-source Leaflet javascript mapping library and the interface and animation are made using HTML/CSS/javascript.
Stimulus Check Calculator (Late 2020 & Early 2021)
How much money can you expect in your stimulus check?
Updated to include the $1400 stimulus payment per adult and dependent in March 2021.
Use this stimulus check calculator to figure out how much you will receive in your thrid stimulus check.
On December 21, 2020, Congress passed a $900 billion dollar stimulus package in response to the COVID pandemic. The bill authorizes economic assistance to Americans in the amount of $600 per person subject to income limits. It also includes expanded unemployment benefits, rental assistance and an extension to the eviction ban. This calculator helps you calculate the amount of stimulus check that you can expect to receive based on your 2019 tax return filing status, adjusted gross income and number of dependents under 17.
Changing the inputs to the calculator, will show you how your expected stimulus check amount will change. The graph shows for a giving filing status (single, married filing jointly or head of household) how the stimulus check amount will change as a function of income and number of children. You can share a URL with specific parameters included
Sounds like some checks may even get to folks at the end of December and many more will get them in January 2021.
On March 5, congress passed the American Rescue Plan which includes $1400 payments for all Americans. The phase out of this stimulus check is different in that over a $10000 range the stimulus goes from 100% to 0% at the phase out threshold, no matter how many dependents you have. This changes things significantly as you’ll see in the calculator.
Sources and Tools:
The stimulus check calculator is made using javascript and the plotly open source graphing library. It is based on news reports of the expected stimulus amounts and income thresholds.
Recent Comments