Monthly Archives: December 2012

Alberta Urban Population Density Map: Gomitoli


OK, this is the last visualization of Albertan Urban Population Density for a while. Again, inpired by this Gomitoli chart designed for Excel, I made this example using Albertan cities. The circle area roughly approximates the true city area, and there is a random point on the circle circumference drawn for every 1000 people in the city’s population. Smoothed PaperJS lines connects the points. Finally jQuery UI sliders and PaperJS¬†buttons enable zoom and pan.

Alberta Urban Population Density Map


Inspired by the Gomitoli visualization (found here), I made this map to show population density in Albertan cities. I admit it’s not nearly as nice as the Gomitoli example, but it demonstrates nice features such as navigating the underlying Google Map with jQuery sliders¬†and PaperJS buttons, and redrawing the cities in the correct pixel coordinates on zoom/pan. Dots represent 5000 people (red lines connect the dots). The city rectangle area is mostly arbitrary.

Maps, missiles, and moving labels


This is my second fear mongering post seemingly focused on 10,000km-range North Korean missiles (the first can be found here). I’m really not all that concerned about North Korean missiles in my day-to-day life. The real point of this post is that the web map (here) features animated SVG symbols that are (that is, appear to be) animated along circles, not simple polylines (they actually are polylines in the shape of geodesic circles). Also, notice that the “symbols” are in fact numbers, not simple shapes, which took a while to code, so I hope you enjoy them.

Are you within reach of North Korea?


Want to know if you’ll be safe from North Korea’s 10,000km-range rockets? Here’s a map to figure it out. Interesting fact: the border between Glendale and Phoenix, AZ is 10,000km from Pyongyang.

Note: my web map is a total, shameless, absolute rip-off of the very interesting post and map presented on the disastermapping blog.

PaperJS Heatmap


This map uses the Google Maps Directions Service to generate PaperJS lines between locations, hit tests those line corners, and increases the opacity of the corresponding pixels (in an originally transparent PaperJS raster grid). The end result is a map showing the pixels most often used in the directions (well, technically, it’s the pixels most often turned at in the directions).