Category Archives: Maps

Less is (almost always) more

geospatial, Graphics, Graphs, Interactives, Maps, User Interface

This morning, I came across a tweet linking to a National Geographic article on data visualization and eye candy, which I emailed to a few friends (when we want to carry on a more in-depth conversation Twitter just doesn’t cut it):

http://news.nationalgeographic.com/2015/09/150922-data-points-visualization-eye-candy-efficiency/

“Find a metaphor, start simple, and build up from there.”

One, who works at an economics research organization, replied with:

“We have lots of tools that allow relatively informed users to explore data and answer questions that they have, but few of our visualizations actually stick to a single story line.  We’re trying to improve the balance of exploratory tools vs. simple, compelling stories.”

My response:

That’s highly similar to the approach often taken with interactive mapping interfaces – either attempting to duplicate desktop GIS functionality or show a particular facet of data with spatial attributes. Finding the balance between them is tricky. Generally, end users want to answer one or two questions though.

The trails web app I linked to recently – https://helenamontanamaps.org/Html5Viewer/?viewer=trails – is about as far as I’d ever go towards the GISFunc side of things anymore (there are a few gee-wiz, that’s cool features like mixed transparency for the base layers…but are they really necessary in most cases? No way).

http://mapbrief.com/2015/01/09/daring-to-build-a-citizen-centric-homepage-the-philadelphia-story/ is one of the best pieces I’ve read on user-focused functionality.

Incidentally, I read that NatGeo article on my phone and many of the visualizations were too small to be intelligible. For some reason, this one on landslides stood out to me as good on the phone (although on my desktop monitor the map background is barely visible):

landslides

A couple days ago, one of these correspondents sent me a link to a draft page showing all kinds of data related to load times, download sizes, CMSes used, and number of subscribers for a raft of news publications. I can’t share that page in its current state but will say that I wrote back encouraging him to make it way simpler. Just ’cause Tableau gives you a kitchen sink toolbox doesn’t mean you have to use it.

 

That’s “Code” Comfort

geospatial, GIS, Graphics, Maps
I’ve been working on a mobile app that will support adding vector-based mapping polygons. Using California and Massachusetts to do a test on MULTIPOLYGON states and a map extent spanning the lower 48, I imported the data, ran the code and when I saw the visual, thought something was messed up:
How could the code be putting California at the top of the image? I went back to my source map and sure enough, the northern tip of California really does go as high as central Massachusetts. It occurred to me that it could be because of the Lambert Conformal Conic projection for the contiguous U.S. that I’m using. But it turns out the northern boundary of California is 42° and so is the southern boundary of western Mass (or at least it seems that was the intention at the time, given the quality of surveying and certain conditions facing surveyors – see the Granby Notch story (http://www.nytimes.com/2001/01/26/nyregion/driveway-another-state-blunder-1642-creates-headaches-today-for-homeowners-who.html) .

File:Masscolony.png

Incidentally, several states share 42° as an official boundary:

File:42nd parallel US.svg
Sometimes our notions of things, based on certain conceptions, distort reality. I can see where my perceptions of California as being in the southwestern part of the country and being mostly warmer than the chilly, northeasterly Massachusetts would make it hard to believe they could have boundaries near the same latitude. At least I know my routines work. That’s “code comfort.” Still lots of work to do!

Now That’s a Detour

geospatial, Graphics, Maps

Here’s a screenshot from Flightradar24. It’s typical of flights between Beirut and Amman. I can see why, given the situation in Syria, flights wouldn’t go that way. But I’d be curious to know if planes detour around Israeli airspace because they aren’t allowed there. Or is it because of some Arab political decision?

beirut_amman

I find the app fascinating, especially when you see a flight heading right over Helena that’s going from somewhere like SFO to Dubai. Or even the Fedex flights from Anchorage and everywhere else that all still flock to Memphis. I wonder, despite the package processing infrastructure there, why someone hasn’t come up with a more efficient set of routing algorithms to use the least effort to get packages from A to B. Amazon Air anyone?

Getting percentage graphics right

Graphics, Graphs, Interactives, Maps

A friend forwarded me a link to an interactive on water (http://www.texastribune.org/library/data/cheap-water-in-texas/). It is one of the best I’ve seen. I really like the way you can click on a column and see the data resorted in the table and redrawn on the map. However, one thing caught my eye. When you click on the drought column, for example, the percentages represented by the circular areas are not proportional.

There is no way that the circle size representing 5% should be that large in relation the circle representing 83%. Here they are enlarged for clarity:

In order to see what the correct size for the smaller circle should be I first had to extrapolate from the larger circle to find out the area of a circle that would represent 100%. To do this, I calculated the area of the 83% circle. Then I multiplied that amount by 1.205 (1 / .83) to get the area of the larger circle. Dividing the area by pi, then getting the square root of the result yielded the radius of the 100% circle.

Multiplying the area of the 100% circle by .05 to get area of the 5% circle, I performed a similar calculation to get its radius as well. That allowed me to draw this graphic:

As you can see, the 5% area would be quite a bit smaller it done proportionally. One might argue that it doesn’t really matter, but try visualizing these same percentages in some other ways. For instance, on a linear graph:

You wouldn’t expect to see 5% to be shifted to the right on this line. Likewise, why would anyone expect to see it shifted in an areal graph? The principle is the same:

The second part of that example shows the data being taken back into a non-linear form. And that leads to another visual proof that is closer to the circular area. In this case, there are 400 grid squares approximating a circle. Twenty of those squares have been colored orange to represent 5%. The area in blue + orange is 328 squares or 82%, which is as close as I could come to 83% and maintain a roughly circular shape. If we went to 1600 squares the circles would be, well, more circular. But for purposes of this demonstration, this will do:

Now, compare it with the true circular areas juxtaposed over it and you can see why it’s important to get proportions right when using areas to depict percentages:

I’d be remiss if I didn’t include the math to calculate graphics like these. If you want to use circles to depict percentages, then:

  1. Calculate the area of the 100% circle, e.g. if the circle is 100px in diameter, then the area is 50^2 * pi or 7853.98
  2. Multiply the 100% area by the percentage desired, e.g. 7853.98 * .83 = 6518.8
  3. Divide this number by pi, then get its square root, e.g. SQRT(6518.8/pi) = 45.55, to get the radius
  4. Multiply times 2 to get the diameter, e.g. 91.1 pixels.