Category Archives: Graphs

Sigils, Swastikas and Symbology

Design, Graphics, Graphs

Came across sigil in some technical documentation (https://github.com/apple/swift-evolution/blob/master/proposals/0029-remove-implicit-tuple-splat.md)

https://www.google.com/search?q=sigil : “an inscribed or painted symbol considered to have magical power.”

On a related note, after reading The Long Ships I though the name of one of the characters – Sigrun – was kind of neat since in Old Norse it means “victory rune”. However, the rune itself was horribly co-opted by the Nazi SS (the all-too-familiar double lightning bolt design, featuring two of them).  That is hardly the only example.

Years ago, my aunt presented a slide show from her travels around Asia. It was surprising to see “backwards” swastikas prominently featured on Buddhist temples. She explained their long history in that part of the world. Despite Japan’s alliance with Nazi Germany in WWII these weren’t remnants of that time.

However, now there is a Japanese proposal to substitute another symbol on maps for tourists (prior to the 2020 Olympics): http://www.bbc.com/news/world-asia-35349619. Farther in the body of the article there are, indeed, symbols that might benefit from a change, such as the encircled H, which to many might suggest an emergency helipad rather than a hotel. However, I’d be inclined to keep the swastika since if far preceded use by the Nazis and runs the other direction. In a way, it symbolizes the opposite while reminding us of the negative aspects of human nature.

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.

 

Power Generation Across the U.S.

Graphics, Graphs

NPR posted an interesting series of charts showing how the country and each state derives its mix of electric power generation: http://www.npr.org/2015/09/10/319535020/coal-gas-nuclear-hydro-how-your-state-generates-power us_power_gen One thing that stood out to me is that something we in the NW take for granted – hydro power – isn’t widely used:

%Hydro

US: 6
AK: 26
CA: 9 (dropped from 19!)
ID: 62 (dropped from 83)
ME: 31 (up from 20)
MT: 37
OR: 59
SD: 48
WA: 69

With the exception of the Missouri River dams in SD, I’d guess that it’s a combination of topography (suitable sites), the need to impound runoff for irrigation and flood control (and to a degree, navigation – Snake/Columbia), with a relatively decent amount of water.

Also interesting: contrasting two coal-producing states like WV and WY. The former depends almost entirely on coal. The latter, while still really high (89%), gets 11% from renewables and hydro. Incidentally, MT is getting close to half (44%) of its power generation from renewables and hydro. But OR at 63% and WA at 76% lead the country. (All you have to worry about is forest fire smoke).

ID is, despite its ultra-conservative mindset, is in the running for cleanest state. It gets 62% from hydro, 21% from renewables and 17% from natural gas (the latter being somewhat surprising. AFAIK, natural gas would have to be imported (presumably from WY, UT, and CO). VT gets all its power (with the exception of that portion of Renewables using biofuels) from non-carbon sources. However, 72% is nuclear. Presumably they’re not burying the waste in Bernie Sanders’ back yard.

On our last visit to Kauai, I was struck by how much photovoltaic generation there is now. However, renewables only make up 10% of the mix. HI is still heavily dependent on oil and coal. Midwestern states still love them some serious amounts of coal, yet another “quality” which doesn’t engender a desire to live there. AR actually increased its coal consumption!

In all, these graphs are nicely done and quite informative.

Labeling Graphs

Design, Graphics, Graphs

Recently, WikiLeaks released a draft text of the intellectual property chapter of the Trans-Pacific Partnership agreement. In what is otherwise an excellent (and somewhat disturbing) analysis of the data done by Gabriel Michael, a Ph.D. candidate at George Washington University, there is one problem: I couldn’t read the labeling on the graphs very easily. In this case, since the data is heavily tied to connections between countries, it’s essential to understanding the relationships presented in the graphs.

To a degree, this was exacerbated by the layout of the Washington Post’s article template (http://www.washingtonpost.com/blogs/monkey-cage/wp/2013/11/18/the-united-states-is-isolated-in-the-trans-pacific-partnership-negotiations/) which is where I first viewed these. But even viewed on the author’s original site – somewhat larger – they can still be difficult to read (http://topromotetheprogress.wordpress.com/2013/11/17/visualizing-negotiating-positions-in-the-tpp-ip-chapter/).

orginal

Allow me to make it clear that I’m not picking on anybody here or denigrating some very fine scholarship. I’m just adding a couple of modest improvements in the hope that graphics such as these will be able to reach an even wider audience. They carry a message that really needs to be received by as many people as possible.

First, the obvious. I increased the font size. However, it’s (usually) more legible to also change to a sans-serif typeface…and, while we’re at it, let’s bump up the weight. So now we have:

improved

It’s worth noting that I was able to save the image at a smaller size too. It’s 440 pixels wide (including a bit of white space) and could now conceivably be viewed on a phone.

There is another improvement that may be made: Getting rid of the thin black lines around the circles. They don’t fit with the rest of the imagery in the graphs. Furthermore, a hollow shape requires a bit more visual decoding by the viewer’s eyes. Of course, removing those lines also means reversing the text color and picking some solid color for the circles. I chose a grayish-blue, not too saturated, to provide a bit of contrast to the yellow-orange-red lines:

better

Again, this post is not meant to be anything more than constructive. We all have our strengths and weaknesses.

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.