Posts for Tag: graphics

Iceberger Remixed – Iceberg Simulator

Posted In: Fun | Water

The code has been updated to allow for multiple chunks of icebergs now, which can occur via melting and also if you draw an iceberg a certain way.

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).

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.
  • 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 and center of gravity of the iceberg.

Some Math – 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.

Iceberger simulation

Countries Mapped onto Solar System Bodies

Posted In: Maps
US on the Moon

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.


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.


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.

Mapping Countries onto Planets

US Postal Service vs Private Delivery

Posted In: Government

The US Postal Service mail volume is enormous and can’t easily be replaced by private delivery services

The US Postal Service (USPS) has been getting a good deal of press recently because of Trump’s attacks on the security of mail in voting and recent moves by political appointees to reduce the capability of the agency to delivery mail in a timely fashion. These changes reportedly include removing mail sorting equipment and changing overtime hours.

Some have suggested privatizing the postal service but currently the volume of mail and packages through private delivery services is far smaller than that carried by the federal agency.

Note that the USPS carries about 55 billion pieces of first class mail annually out of the reported 143 billion pieces of total mail.

Source and Tools:
Data on Fedex, UPS and Amazon deliveries is from this article. Data for the USPS comes from Graph is made using the plotly open source javascript library.

How much will masks reduce coronavirus transmission rate R0?

Posted In: Health

It depends on their effectiveness and how many people wear them

R0 is the transmission rate which is defined as the average number of cases that are expected to be produced from a single case in an uninfected population. R0 is dependent on a number of different factors that include transmissibility of a disease (how infectious it is), the amount of social contact and the duration of social contact.

A baseline level of social contact is related to the population density (how often you come into contact with other people) and social distancing (limiting gatherings, not going in to work or school, etc) will reduce the amount of social contact with different people. Given what we know about coronavirus and its transmission, the amount of “contact” can also be influenced by mask wearing. This interactive graph shows the effect of mask wearing and effectiveness on reducing R0 even further.

This graph is a work-in-progress so please feel free to provide suggestions and feedback on issues of scientific concepts as well as for improvements in conveying the concepts/ideas.


R0 values for different regions and population densities are estimated from Youyang Gu’s machine learning model for spread in Feb and early-March (i.e. before social distancing and mask wearing).

Baseline R0,baseline based on population density – R0 value ranges from about 6 in very high density places like New York City with lots of transit use where you are in close contact with other people for long periods of time to 2 in rural areas with much less contact.

Social distancing factor (SDF) – this is simply a reduction on the baseline R0 based on the amount of social distancing (ranges from 100% (no social distancing) to 33% (high levels of social distancing). This is a reduction in the amount of time and number of people the average person is exposed to compared to baseline levels.

Mask effectiveness (Kmaskeff) – is defined as the percentage reduction in transmission of coronavirus that mask wearing can provide. An N95 mask is at least 95% effective at blocking most particles, but because it also reduces the speed at which your exhalation can travel outward (providing more time for droplets to spread and diffuse to low concentration), an N95 can be much more than 95% effective in reducing coronavirus droplet and aerosol spread compared to the unmasked case. I’ve seen estimates for things like bandanas and homemade cloth mask having lower effectiveness maybe around 50% but I don’t know how scientifically they were estimated/calculated. Also depending on how mask are worn, this can also affect the effectiveness parameter. For example if an N95 mask does not fit tightly against the face and there are large gaps for air to flow, this will reduce the effectiveness of the mask. This parameter is shown on the x-axis.

Percent wearing masks (Kmaskfreq) – is simply the percentage of people wearing masks (varies from 0% to 100%). This parameter is shown on the y-axis.

The formula for effective Reffective is:

$R_\mathit{eff}=R_0,baseline \times SDF \times (1-K_{mask\mathit{eff}} \times K_{maskfreq})^2$

where $R_\mathit{eff}$ is the final average transmission value, $R_0,baseline$ is the $R_0$ value based on the population density, SDF is the social distancing factor, $K_{mask\mathit{eff}}$ is the average mask effectiveness and $K_{maskfreq}$ is the percentage of people wearing masks. The squared parameter on the right side of the equation is essentially the average reduction in transmission that is likely due to mask usage and is from a preprint from Howard et al.

As you move up and to the right of the graph, mask use and effectiveness become very high and the transmission of coronavirus declines significantly. If you hover over the graph (on a desktop) or click on the graph (on mobile) you will see a popup that shows the Reff value that results. The lower the Reff value is the better as it dramatically affects the rate of transmission. High numbers will lead to explosive exponential growth while values below 1.0 will eventually reduce coronavirus transmissions to near 0.

For example at R0 of 6 and no social distancing or mask usage, one initial case can lead to approximately 56,000 cases in only 30 days. Whereas an Reff of 0.5 will only lead to a total of ~1 additional case in 30 days.

Please let me know in the comments if you have any questions or suggestions on how the tool works, is structured or presented.

Source and Tools:
The reduction in R0 due to mask effectiveness and usage based on a model from a preprint from Howard et al. Baseline R0 are from Youyang Gu’s machine learning model. Calculations are done in javascript and visualization is done with the open source Plotly javascript graphing library.

mask usage reduces coronavirus transmission

Planetary Art – Inner Planet Orbital Spirograph

Posted In: Fun

Earlier, I had made a visualization showing that Mercury is the closest planet to Earth (on average) and not Venus or Mars. To make that, I downloaded a bunch of NASA ephemeris (orbital) data. I realized I could use the same data to make some cool orbital art inspired by a spirograph – a planetary spirograph.

Basically, you get to choose a planet and the visualization will draw a line connecting that planet and Earth every few days. These lines will then build up into a cool pattern over 40 earth years of orbital cycles. Each planet (Mercury, Venus and Mars) has a different orbital period around the sun than Earth does and as a result, interesting patterns emerges.

Orbital periods of the four inner rocky planets:

  • Mercury: 88 days
  • Venus: 225 days
  • Earth:365 days
  • Mars: 687 days

Also evident is that the orbits of some of the planets are not quite circular so the pattern isn’t quite centered on the sun. Venus has the most regular pattern, creating a distinctive 5-lobed design. The other planets also have visually stunning patterns, though they do not repeat perfectly over time.

You can change the planets using the drop down menu as well as change the speed of the spirograph, and hide the planets and the sun.

Data and Tools:
I had thought about simulating the planets but there are plenty of tools out there that generate this orbital data so instead just downloaded 40 years of ephemeris data (data related to positions of astronomical bodies) from NASA website.. I processed the data using javascript and drew the picture using HTML canvas tools.

Planetary Art Spirograph

Zip Code Map of the United States

Posted In: Maps
US zip code map

This zip code map of the United States visualizes over 42,000 zip codes in the 50 states. Zip codes are five digit postal codes used for mail delivery in the US. The points on the map show the geographic center of each zip code. The interactive visualization lets you type in a zip code and will show you where that zip code lies on the map. As you begin to type in the zip code, the map will highlight all the zip codes that begin with those numbers.

For example, if you type in “0”, you will highlight all zip codes that start with the zero in the Northeastern US. This will represent about 10% of the zip codes in the US. When you type in another number, it will narrow down the zip codes that begin with those two digits (approximately 1% of zip codes). It will progressively narrow down the number of zip codes as you type in more numbers, until you get to a full 5 digit zip code that represents 1 out of almost 43,000 zip codes (0.002% of zip codes). The map will then tell you the name of the city that that zip code is in.

You can explore how zip codes are distributed across the US by typing in different 1 and 2 digit numbers. You can also click on the check box to show or hide the outlines of the states.

Sources and Tools:

Zip code data was downloaded from And the visualization was created using javascript and the open source leaflet javascript mapping library.

US zip code map