Posts for Tag: interactive

Election Results and Population Density

Posted In: Elections
election county population density

How do 2020 presidential election results correlate with population density?

The visualization I made about county election results and comparing land area to population size was very popular around the time of the 2020 presidential election. As the counties were represented by population, it was clear that democratic-leaning areas on that map tended to grow in size, while republican-leaning areas tended to shrink. This raised the question of exactly how population density correlates with election results.

Hover over (or click on) the bubbles to see information about the county.


It’s clear there is a very strong correlation between the vote margin and population density.  Vote margin is the percentage amount that one candidate beat the other candidate by in the county (0% means a tie while 50% means that one candidate got 75% and the other got 25% of the voteshare).  Population density is calculated as people per square mile in the county and is shown in the graph on a log scale, where each major grid line is 10 time greater than the previous one.  This is done because there is one to two orders of magnitude difference in the densest counties (in New York City) and even moderately dense counties.  There are also several counties with population density below 1 person per square mile (several in Alaska because of the size of their counties) but these are excluded from the graph.

Richmond County, NY (i.e. the Borough of Staten Island) is the densest county (17th densest) in the country that Trump won. The densest counties favored Biden quite heavily as he won 45 of the 50 densest counties in the country, which also tend to have a fairly high population.

This second graph is a histogram that specifically categorizes counties into discreet bins by population density. Note that they are on a log scale as well. You can toggle the graph to show the number of counties won by each candidate or the number of votes won in each of the population density bins. The black line shows the percentage of counties (or votes) won by the democratic candidate (Joe Biden) in each of those bins.

Hover over (or click on) the bars to see information about each county bin.

It’s pretty clear in these graphs that low population density areas clearly favor the republican while the denser areas favor the democrat.


Data and Tools
The 2020 county-level election data is downloaded from the New York Times county election data API and processed using a python script. Population data used is for 2018. The visualization was created using the open-source plotly javascript graphing library.

How many Americans have contracted Coronavirus?

Posted In: Health | Maps

The number of US coronavirus cases is equal to the population of several states put together.

click on the buttons below to see a new set of states. The number of Americans who have contracted the Coronavirus keeps going up with little indication of slowing down. This is an amazingly large number of cases is the highest in the world and I wanted to visualize how many people this actually is. While the number of US COVID-19 cases is very large, comparing these number to the size of the populations in several states helps to provide more context. The visualization shows a random collection of states whose total population is equal to the latest coronavirus numbers. If you click the button you can see a different set of states that have a population equal to the current number of coronavirus cases.
The graph is updated daily using data from It’s important to note that the number of people with COVID-19 is an underestimate as many coronavirus cases are asymptomatic (i.e. people don’t get sick or show any symptoms) and the positivity rate of tests is quite high. Stay safe out there: stay away from people and wear your mask!

Sources and Tools:

Data on coronavirus cases was obtained from The visualization was created using javascript and the open source leaflet javascript mapping library.

US coronavirus cases

Van Gogh As Drawn By A Traveling Salesman

Posted In: Fun | Math
Van Gogh Portrait Line Drawing

FacebooktwitterredditpinterestlinkedinmailThis “art project”, like the Mona Lisa one, draws a portrait of Vincent Van Gogh as a single continuous line. When it’s on the slow setting, is oddly satisfying and calming to watch the picture get drawn.

Click the “Draw Van Gogh” button below to see his famous self portrait drawn with a single continuous line with 120,000 segments.

The traveling salesman problem (TSP) is a classic problem in operations research and mathematical programming. It seeks to answer the question, given a set of destinations, what is the shortest possible travel route someone could take to visit them all. It is a notoriously challenging problem to solve when the number of destinations grows. A picture of the famous Van Gogh self-portrait was converted to 120,000 dots and a challenge was created to find the most optimal solution to visiting each of these 120 thousand points (i.e. drawing the shortest continuous line that goes through each and every point.

The current most-optimal solution that has been found to this Van Gogh self-portrait challenge was calculated in 2013 by Honda, Nagata and Ono. I used the order of destinations (also called the “tour) that he developed and animated the line segments to create an animated drawing of the portrait as a single continuous line.

Here an analogous TSP drawing for the Mona Lisa.

Each time you click on the “Draw Van Gogh” button, it chooses a different starting point but follows the same order of destination points, looping around until all the points are visited.

You can also change the speed at which the individual line segments are drawn. It is surprisingly relaxing and satisfying to watch the line wind its way around the screen to fill in the famous Van Gogh self-portrait.

For a very high res version of the entire photo click here (around 4 MB file size).

Data and Tools:
I downloaded the 120,000 points and the tour from Honda, Nagata and Ono that is currently the shortest that has so far been calculated from the TSP Art website and the University of Waterloo.
Javascript was used to draw on the HTML canvas and animate the process.

van gogh tsp

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

US Senate Representation

Posted In: Government

FacebooktwitterredditpinterestlinkedinmailEach state has two senators in the Senate, even though there is a great disparity in the populations of the states. This was a compromise that the framers of the Constitution dealt with in creating the framework of the US government. While the US House of Representatives is based on proportional representation, the Senate was designed to have two senators per state regardless of population. This leads to some interesting variations in the number of votes that some senators get relative to other senators (and how many people they represent).

Graph of Total Votes for Each Current Senator (2014, 2016 and 2018)

This graph is called a treemap and shows the total number of votes cast for the winner of each senate race of the current sitting senators. They are shown in order from largest to smallest vote totals, where the area of the rectangle is proportional to the number of votes. The treemap can be organized by party if desired. This graph does not show the number of votes that their opponents got.
If you hover over (click, on mobile) one of the boxes in the treemap, you can compare the number of votes received by that senator to the number of senators that received the same number of votes combined. This helps highlight the disparities in the representation of voters in large states in the Senate relative to that of voters in states with low populations.

For example, Kamala Harris, Democratic senator of my home state of California, received 7.5 million votes when she won her senate race in 2016. This large number of votes is larger than the combined votes for 22 of her Republican colleagues in small states. This is even more impressive since, as noted before, she ran against another Democrat Loretta Sanchez, in the election.

Note that some of the recently elected senators shown in the table are no longer serving in the Senate:

  • John McCain’s seat is currently held by Martha McSally
  • Johnny Isakson’s seat is currently held by Kelly Loeffler

Because of the large variation in population sizes and a tendency for more populous states to vote for democrats, Democratic Senators received many more votes in their elections than their Republican colleagues did, despite having fewer numbers. The 47 Democratic (and Independent) senators received a total of 67.5 million votes while the 53 Republican senators received 59.5 million votes.

Graph of Margin of Victory over Opposing Party for Each Current Senator (2014, 2016 and 2018)

This graph shows a slightly different set of data. Instead of total votes for the winning candidate, it shows the vote margin (i.e. the number of votes the winner received vs the opponent of a different party). The reason I specify it this way is that the two Democratic California senators defeated other democrats to win their elections (i.e. no republican was on the ballot in the general election because no republican got enough votes in the primary). This comparison is interesting because not only do some senators receive very few votes (because they live in small states), but they may only win by a small margin over their opponents. Comparing margins of victory, shows how few votes it would take to “flip” a Senate seat between the two parties.

If you take Kamala Harris’s margin of victory over Republicans to be her vote total (7.5 million votes) since there was no Republican running against her, her margin of victory is greater than the margin of victory of 43 of her Republican Senate colleagues combined.

Sources and Tools:

Senate election data was downloaded from MIT election lab. The data was processed using python/pandas and the visualization was created using javascript and plotly.js, the open source javascript graphing library.

state borders