Posts for Tag: animation

Scaling the physical size of States in the US to reflect population size (animation)

Posted In: Maps
Facebooktwittergoogle_plusredditpinterestlinkedinmail
States sized to New Jersey’s population density


Choropleth maps are a pretty useful kind of map that colors distinct areas of the map (e.g. states, counties or countries) to reflect different numerical or categorical values. It is useful to show differences across geographic regions. I’ve been making a bunch of these recently (stressed states, bitcoin electricity consumption, college admissions). One of the issues that can be problematic with these maps is that some regions can be very large but only have very few people. If the choropleth map is tracking a intensity value (like CO2 emissions per capita), a large area with a high color value might visually indicate that total emissions (emissions per capita x # of people) is also high. In the US this is reflected in states like Alaska, Montana and Wyoming, which are large but have very few people.

I decided to make a modified choropleth map (updated after learning that it’s called a cartogram) that scales the size of the states to be the proportional to the state’s population. States with larger populations show up as larger. This is equivalent to making each state have the same population density. Since New Jersey has the highest population density of any state in the US (1200 people/square mile), it stays the same size in this map and all the other states shrink, to reflect their lower population density. For example, California has a larger population than NJ (4.4x), but its physical size is about 20x larger. So California is shrunk to about 20% its original size to make its physical size 4.4x the size of NJ.

The states are also colored to show population as well (darker redder colors reflect larger population while yellow/beige reflects small populations).

States sized to California’s population density

Living in California, I decided to make another animation, this time with scaled to the density of California, so some states that are less dense will shrink, while others that are denser will grow. New Jersey grows quite a bit. Because many of the dense Northeast states grow a bit, I had to space them out (manually) so you could still see them otherwise they’d overlap too much.

Data Sources and Tools:
2015 population and population density data comes from Wikipedia and leaflet.js open source mapping library was used to create the maps. State outlines in geoJSON format come from leaflet. Javascript code was used to scale the coordinates of the geoJSON polygons to the appropriate size and animate the map.

state size scaled by population

Heatmap of Electric Vehicle (EV) Sales in California (Animation)

Posted In: Energy | Transportation
Facebooktwittergoogle_plusredditpinterestlinkedinmail


(more…)

Real Country Sizes Shown on Mercator Projection

Posted In: Maps
Facebooktwittergoogle_plusredditpinterestlinkedinmail


I remember as a child thinking that Alaska was as large as 1/2 of the continental US. Later, however, I learned that while it is the largest state, it is actually only about 1/5 the size of the lower 48 states. My son has also remarked that Greenland is very big. And while it is very big, it’s nowhere near the size of the continent of Africa.

The map above shows the distortion in sizes of countries due to the mercator projection. Pressing on the button animates the country ‘shrinking’ to its actual size or ‘growing’ to the size shown on the mercator projection. It was inspired by a similar animation that I saw on reddit and decided I wanted to try to build the same thing.

The mercator projection is a commonly used projection on computer maps because it has perpendicular latitude and longitude lines (forming rectangles). It is formed by projecting the glob onto a cylinder A variant of the was adopted by Google maps, which helped establish it as the informal standard for web-based maps (although Google maps now uses a globe view, instead of a map projection when zooming out to a very wide view).

Areas far from the equator are distorted in terms of their distances and are shown much larger than they actually are. This is one of the major issues with a projection of a globe onto a cylinder area. This is why Greenland, Russia and Canada shrink so much in the animation, they are fairly high in latitude in the Northern Hemisphere.

This next graph shows each country plotted with their actual land area and apparent land area as shown on a Mercator projection. The further the countries are from the 1:1 line the greater the overestimate of their size from the Mercator (also color coded to be red). It is a logarithmic plot showing many different orders of magnitude in country size. The table also shows the top 10 countries whose size is overestimated (and the difference in land area in square kilometers or as a percentage reduction from the size in the Mercator projection).

As it shows, Greenland is the country that has the largest percent difference between its apparent size in a Mercator projection and it’s real size (it’s only about 1/4 of the apparent size). And Russia is the country with the largest absolute difference between these two sizes.

mercator projection real size

Data and tools: This visualization was made using the Leafletjs javascript mapping library and country shapefiles (converted to geojson). I calculated the area in two ways, one assuming latitude and longitude are rectangular coordinates (i.e. Mercator projection) and the other was the actual area. Then I calculated the latitude and longitude coordinates for the outline of the “real” size by modifying the original latitude and longitude by the ratio of these two areas to draw the new smaller, “real” country size.

Solar (Sun) Intensity By Location and Time

Posted In: Energy | Science
Facebooktwittergoogle_plusredditpinterestlinkedinmail

This visualization shows the amount of solar intensity (also called solar insolation and measured in watts per square meter) all across the globe as a function of time of day and day of year. This is an idealized calculation as it does not take into account reductions in solar intensity due to cloud cover or other things that might block the sun from reaching the earth (e.g dust and pollution).

As would be expected, the highest amount of solar intensity occurs on the globe right where the sun is overhead and as the angle of the sun lowers, the solar intensity declines. This is why the area around the equator and up through the tropics is so sunny, the sun is overhead here the most. If you click on the map you should see a popup of the intensity of sunlight at that location.

As the earth rotates over the course of a day, the angle of the sun changes and eventually the angle is so low, the sun is blocked by the horizon (this is sunset).

Instructions
  • The default is to show the sunlight intensity for the current date and time but you can change it by moving the sliders for hour or day.
  • You can also toggle between the orientation of the surface that you measure the sunlight on. The default shows the intensity of sunlight on a horizontal surface. The other option shows the intensity on a surface that is oriented to face the sun (i.e. perpendicular)

Again, the intensity will depend on the angle it makes with the sun and so it depends on your location on earth (i.e. latitude). Latitudes around the equator will receive more sunlight because their angle is closer to perpendicular.

Shifting through the days of the year, you can start to see the cause of the seasons as the amount of sunlight changes and more or less sunlight goes to each of the northern and southern hemispheres.

Calculations and Tools:
The calculations for solar intensity are based on equations from “Renewable and Efficient Electric Power Systems” by Gilbert Masters Chapter 7. Calculations were made using javascript and visualized using the Leaflet.js library with Open Street Map tiles.

This was a fun project for me to learn online mapping tools and programming.

Shall We Play A (Market Timing) Game?

Posted In: Financial Independence | Money
Facebooktwittergoogle_plusredditpinterestlinkedinmail


The Market Timing Game simulation is premised on the idea that buying-and-holding index investing and index funds are a no-brainer investment strategy and market timing (i.e. trying to predict market direction and trading accordingly) is a less than optimal strategy. The saying goes “Time in the market not timing the market”. In this simulation, you are given a 3-year market period from sometime in history (between 1950 and 2018) or you can run in Monte Carlo mode (which picks randomly from daily returns in this period) and you start fully invested in the market and can trade out of (and into) the market if you feel like the market will fall (or rise). The goal is to see if you can beat the market index returns.
(more…)

Interactive Dot Illusion (Individual Linear Motion Yields Circular Motion)

Posted In: Fun
Facebooktwittergoogle_plusredditpinterestlinkedinmail

This post doesn’t really involve data, but I was just messing around with animation and the canvas in Javascript and decided to make this. It’s a fun little interactive web animation that makes aggregate circular motion from a bunch of dots moving in straight lines. There are no real instructions except to mess with the controls and see what it does to the animation (i.e. change the number of dots, the speed slider, the dot colors, and show the dot paths).
(more…)