Posts for Tag: animation

Visualizing the Variation in Sunlight by Latitude and Time of Year

Posted In: Science

How does the Earth’s tilt affect sunlight and seasons by latitude?

This visualization looks at the variation in the amount of sunlight different latitudes receive over the different days of the year. The amount of sunlight can be classified in 3 different categories:

  • The number of hours of sunlight received each day
  • The average sunlight intensity (in watts per square meter)
  • The total amount of sunlight received across an entire latitude band (in gigawatt hours)

The default view is to see the number of hours of sunlight received by latitude on the current date, shown by the yellow bars. The sunlight hours range from 0 to 24 hours per day while most latitudes range from 9 to 15 hours.

If you hover over the yellow bars (or click on mobile), you will see the exact number of hours for that latitude band for that date.

Pressing the ‘Start Animation’ button, will change the angle of the sun relative to the Earth (as the earth rotates around the sun) and change the distribution of sunlight across the globe.  You can view this animation with the earth fixed and the sun angle changing (the default view) or with the sun location fixed and the earth’s tilt changing.

This visualization helps to show how the seasons come about. When the Northern Hemisphere is tilted towards the sun, the amount of sunlight it receives increases (hours of daylight, average sun intensity and total amount of sunlight received). As the hemisphere tilts away from the sun, the amount of sunlight it receives decreases. The amount of sunlight a region receives causes the seasons that we experience.

Interestingly, when you are at the equator, the amount of sunlight per day does not really vary too significantly over the course of the year, whereas if you are near the poles, the difference between summer and winter is very dramatic. When looking at total sunlight received, the poles generally have lower sunlight because even in their summer, there is much lower land area relative to the middle latitudes (close to the equator)

The second visualization shown here shows how the tilt of the Earth’s axis is changed over the course of the Earth’s revolution around the sun.  The Earth’s axis is tilted at 23.5 degrees relative to the plane of the Earth’s orbit around the sun. Like the last visualization, you can look at Earth the way we normally do (without the tilted axis) or from the perspective of the sun (with a tilted axis). This makes it a bit clearer why the tilt of the Earth’s axis can change from the north pole angled away to angled towards the sun.


Sources and Tools:

The equations for average daily solar insolation come from online lecture notes from University of Albany. The equations for number of hours of daylight comes from Wikipedia.   The visualizations are made using the javascript d3 data visualization library and the interface and animation are made using javascript.


daylight hours

Moon Phases Visualization

Posted In: Science

Animation and Description of the Moon Phases

This visualization shows the phases of the moon. It’s a fairly simple visualization that shows a photo of the moon and covers it with a shadow to show only the lit up portion of the moon. Half of the moon is always lit up (half of the sphere) but we can usually only see part of the lit up portion.

You can use the slider to control the opacity of the shadow. There is a button that lets you start and stop the animation and you can also step through the animation with the ‘Back’ and ‘Forward’ buttons or the left and right arrow keys.

Moon Phases

  • Full Moon – we can see the entire lit up portion of the moon
  • New Moon we can’t see any of the lit up part (moon is dark when viewing from Earth).
  • Waxing – refers to the moon when the lit up portion is getting bigger (i.e. we can see more of it each subsequent day)
  • Waning – refers to the moon when the lit up portion is getting smaller (i.e. we see less of it each subsequent day)
  • Crescent – is when the visible moon is less than half lit up
  • Gibbous – is when the visible portion of the moon is more than half lit
  • Quarter Moon – when the visible portion of the moon is exactly half of the circle

These are combined to get eight different distinct phases:

  • Waxing Crescent
  • Quarter Moon
  • Waxing Gibbous
  • Full Moon
  • Waning Gibbous
  • Quarter Moon
  • Waning Crescent
  • New Moon

The moon goes through these phases once every 29.5 days. Because it’s not exactly a whole number of days, the size of each crescent isn’t exactly the same each lunar cycle. The rate of change in the size of the lit up portion of the moon is fastest when the moon is close to a quarter moon and slowest when the moon is closest to a new moon or full moon. This has to do with the way the light is projected onto a 3D sphere but viewed as a 2D disc.

Data Sources and Tools:
The moon image was downloaded from and taken by Mike Petrucci representing Delaware. The code to determine the size and draw the shadow was written in javascript and d3 open source data visualization library.

moon phases

Visualizing the outcome of Eeny Meeny Miney Moe

Posted In: Counting | Math
eeny meeny miney moe

Who is selected when kids do Eeny Meeny Miney Moe?

I was watching my kids try to pick who got go first by doing the kids rhyme,

“Eeny, meeny, miny, moe, catch a tiger by the toe, if he hollers let him go, eeny, meeny, miny moe.”

Since there were only two of them, it got me thinking, if you knew which one it would fall on at the end, you could decide who to start counting with to ensure that you select who you want. For each set with different numbers of options, you will get a different individual from that set chosen so I thought I’d visualize who gets selected.

Click “Start” to see which option gets selected when there are different numbers of options. Hover over the graph to see which option is chosen.

There are multiple variants of the rhyme, but the primary one mentioned above has 16 counting elements. The math is such that you take the modulo (which is equivalent to a remainder in long division). For example, if you have 15 choices for the 16 element phrase, you’ll count through all 15 and then go back to the first option and end on it (i.e. item number 1 is chosen). 16 divided by 15 has a remainder of 1. In the case that the remainder is zero, you choose the last item. I.e. if there are 16 items/people to choose among, the last option is chosen and the remainder will be 0.

Longer variants will have more words, which are also shown on the dropdown menu. If you know of other variations, let me know in the comments and I can add them.

Primary: “Eeny, meeny, miny, moe, catch a tiger by the toe, if he hollers let him go, eeny, meeny, miny moe.” – 16 counting elements (“catch a” is one element, “by the” is another, etc)

Variation#1: “Eeny, meeny, miny, moe, catch a tiger by the toe, if he hollers let him go, eeny, meeny, miny moe My mother told me to pick the very best one and that is Y O U” – 31 counting elements

Variation#2: “Eeny, meeny, miny, moe, catch a tiger by the toe, if he hollers let him go, eeny, meeny, miny moe My mother told me to pick the very best one and you are it” – 29 counting elements

Source and Tools:
The rhymes come from my childhood and my kids helped me remember some of the variants. Calculations are done in javascript and visualization is done with the open source Plotly javascript graphing library.

state borders

Number of Electoral Votes by State in the 59 US Presidential Elections

Posted In: Elections

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

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.

Here is another map that resizes the US states (i.e. shrink or grow) based on the number of electoral vote so that their electoral power is reflected in its size.

Sources and Tools:

Data on number of electoral votes by state for each election is from Wikipedia. And the visualization was created using javascript and the open source leaflet javascript mapping library.

state borders

Videoconferencing popularity before and during coronavirus lockdown

Posted In: Technology

Zoom has become the primary video conferencing app over the last few months as schools and workplaces increasingly turned to remote learning and meetings.

Since the shelter-in-place orders across the United States due to the coronavirus in early to mid-March, many things have changed about our daily lives. One of the main ones is that schooling and work is being done remotely through video conferencing apps on our computers, tablets and smartphones. Our kids have zoom meetings with their teachers, parents have zoom meetings with our work colleagues and we all have facetime and google hangouts chats with our friends and family.

I remembered just a few year ago Skype was a very popular app to use for video chats, so I wanted to see how Zoom came to be the most popular app. The animated graph above shows the relative search volumes for 5 popular video conferencing apps from January 1 to May 15th (before and during the coronavirus restrictions on travel and gatherings).

This article implies that the reason Zoom had taken over so much is because it is free and easy to use for consumers. Even my tech-challenged mother is doing zoom calls for friends and classes.

Data and Tools:
Data is from google trends analysis of videoconferencing apps. Data is processed in javascript and graphed using the plotly open source graphing library.
zoom popularity

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