Posts for Tag: graph

Visualizing the Orbit of the International Space Station (ISS)

Posted In: Science | Technology
international space station orbital paths

Where is the International Space Station currently? And what pattern does it make as it orbits around the Earth?

This visualization shows the current location of the International Space Station (ISS), actually the point above the Earth that the station is closest to. It is approximately 260 miles (420 km) above the Earth’s surface The station began construction in 1998 and had its first long term residents in 2000.

The visualization can also show the animated future orbital path of the ISS using ephemeris calculations, which makes a nice, cool pattern over an approximately 3.9 day cycle, where it starts to repeat. The animation allows you to view the orbital patterns on the globe (orthographic projection) or a mercator or equirectangular projection.

One of the cooler features is to drag and rotate the globe view while the orbital paths are being drawn. You can also adjust the speed of the orbit as well as keep the ISS centered in your view while the globe spins around underneath it. If you select the “rotate earth” checkbox, it becomes apparent that the ISS is in a circular orbit around the earth and that the pattern being made is simply a function of the earth’s rotation underneath the orbit.

This visualization only shows the approximate location of the ISS as there are several confounding factors that are not represented here. The speed of the ISS changes somewhat over time as the station experiences a small amount of atmospheric drag, which slows the station over time. But it still goes over 7000 meters per second or about 17000 miles per hour. As it slows, its orbit decays so it falls closer to earth and it experiences even more atmospheric drag. Occasionally, the station is boosted up to a higher orbit to counteract this decay. Secondly the earth is not a perfect sphere and this also causes the calculations to be only approximately correct.

Some other cool facts about the International Space Station:

  • the angle the orbit makes relative to the equator is 51.6 degrees (i.e. this means the highest and lowest latitudes it will reach are 51.6 degrees North and South and doesn’t orbit over the poles
  • the circular orbit around the earth makes a sin wave pattern on 2D map projections (shown on the mercator and equirectangular projections
  • one orbit takes about 90 minutes. This means there are approximately 16 orbits per day and astronauts aboard the ISS will see 16 sunrises and sunsets

Other cool space-related orbital art can be seen at the inner planet spirographs.

Here are a couple of images showing the final pattern made by the ISS on different map projections.

international space station orbital pattern on globe
international space station orbital pattern on map projection

Sources and Tools:
I used the satellite.js javascript package and the ISS TLE file to calculate the position of the ISS.
The visualization was made using the d3.js open source graphing library and HTML/CSS/Javascript code for the interactivity and UI.

iss visualization

Visualizing Olympic Sports

Posted In: Sports
Shows All 339 Olympic Sports Organized by Sport

See all 339 Olympic Events in the Tokyo 2020/2021 Olympics

It had always seemed like the most decorated US Olympians tended to be swimmers, so I wanted to see how all the various events are distributed across the different types of sports. Each sport (like swimming) has a number of individual events and are show in a treemap as a collection of boxes. And indeed swimming does have the most individual events of any of the sports in the 2020/2021 Olympics.

I also wanted to see how you can categorize the different Olympic events, so I looked at several different dimensions, which are color coded:

  • Athlete Gender – Events are categorized into Men’s, Women’s, Mixed and Open Events. Mixed is when a specified number of Men and Women are in an event (i.e. one man and one woman) while Open events can be either Men or Women.
  • Team vs Individual – Events are categorized into whether the competitors are individuals or a team (more than one individual)
  • Competition Type – Events are categorized into the type of competition, such as a Race (competitors are performing simultaneously to see who finishes first), Individual (where the competitor performs the event by themselves), Opponent (where the competition is one opponent vs another) or Mixed (where there’s some combination of these types)
  • How winner are Determined – Events are categorized by the type of scoring: Timed (including all races), Judged, Scored (either in ball sports such as soccer or tennis, or in fighting sports like boxing and wrestling), Completion (where each competitor attempts to complete a jump or lift and the winner is the one who can complete the highest level), Distance (jumping and throwing events) and Hybrid (a combination of these types).

The sports with the largest number of individual events is swimming, then track, cycling, and field. Some the fighting sports have many individual events but they are all exclusive categories (i.e. you can’t compete in two different boxing or wrestling events).

Sources and Tools:
I grabbed a list of Olympic sports from Wikipedia and manually coded the information about gender, competition type and other factors. The visualization uses the plotly.js open source graphing library and HTML/CSS/Javascript code for the interactivity and UI.

visualization of olympic events

Early Retirement Calculators and Tools

Posted In: Financial Independence

Interested in Early Retirement or FIRE (Financial Independence to Retire Early)?

Here are some interactive and educational planning tools that I developed to help you understand the concepts of FIRE and calculate how long it will take to achieve retirement and how likely you are to survive retirement. Click on the tools below to try them out.

Financial Independence Calculators

Regardless of where you are on your path to FIRE, there are several types of tools that are useful:

These tools all focus on the concept of FIRE. FIRE is the concept that revolves around saving and investing to achieve Financial Independence (FI) and to potentially Retire Early (RE). One of the core concepts is that once you can save up enough money, you can retire by withdrawing a fraction of this money annually to cover your living expenses. Other important topics related to this core concept have to do with reducing spending so you can save money and investing so your money can grow and sustain your retirement over many decades.


Other visualizations and tools related to Financial Independence

These tools relate to taxes and stock market returns.

Data Sources and Tools:
See the individual tool to learn more about how it was made.

California Rainfall Totals

Posted In: Environment | Water
California Rainfall

How do current California rainfall and precipitation totals compare with Historical Averages?

Check out the California reservoir dashboard.

It’s winter in California and that means the rainy season (snowy in the mountains). This year has been a relatively dry year and wanted to visualize how this 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.

California Rainfall

Country Centered Map Projections

Posted In: Geography | Maps
country centered map

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.


  • 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.
wikipedia cylindrical projection
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.

US covid case death animation

Animation of Coronavirus Cases and Deaths in US

Posted In: Health | Maps

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

    US covid case death animation