Category Archives: Data Visualization

Infographic: 11 Awesome Data Visualizations Way Ahead of Their Time


Veronica Johnson from recently sent me this infographic that I want to share with you.

If you or your company have any insightful infographics or data visualizations you would like me to share, please feel free to e-mail them to me at

All the best,



Dataviz: Periodic Table of U.S. Coins


PCGS CoinFacts has just released a poster of their Periodic Table of U.S. Coins. Here is the link to order it on Amazon.

Below are some screenshots from the poster.



Periodic Table US Coins

Periodic Table US Coins CloseupPeriodic Table US Coins Legend

DataViz: Famous Logos Look Better Lettered By Hand (Co.DESIGN)

3045394-slide-s-8-famous-logos-look-better-lettered-by-handIn the age of Adobe Illustrator, a sincere, hand-lettered sign or logo is a rare artifact of the past.

But as a student at Auckland University of Technology, designer Sara Marshall redrew 10 famous logos with paintbrushes, markers, and pilot pens. It wasn’t just some fantasy project in which she reimagined Subway and Burger King with flowers and filigree. She meticulously translated these rigid, well-known brands through careful calligraphy. And the results are like an uncanny peek into an alternate universe where computers and printers never came to be, and all branding must be drawn by hand.

The logos are not all perfect, hand-lettered duplicates. Marshall’s FedEx logo looks like a spitting image to the real logo in my mind’s eye, until I load up the real thing and realize, of course, FedEx isn’t drawn in italics. The chasm is even greater with Subway. The real Subway logo is written in all-caps bold italic, with arrows leading in and out of the wordmark. Marshall’s mixes upper and lower case letters, and it ditches the arrows.

3045394-inline-i-2-famous-logos-look-better-lettered-by-handThe remake is a much friendlier logo than Subway’s original. But unless you’re looking side-by-side, there’s a good chance you won’t even notice what’s missing. With the green extrusion, and the mix of white and yellow lettering, Subway still feels like Subway. Marshall’s greatest accomplishment is in picking up on just enough of the original brand essence to make the new versions feel familiar and right.

Despite a relatively positive Internet response to her work since it has been discovered on Behance, Marshall looks back on the project now and sees the imperfections. “It was a really fun project to work on, but something people don’t realize is the time pressure I was under while creating them—there were many sleepless nights and 16- to 20-hour working days,” Marshall says. “There were many changes I really wanted to make to the project as well, but it took off before I had a chance.”

Now, Marshall says she doesn’t have the time to redo any of the work. She’s too busy in her day job—as a professional letterer.

[All Images: Sara Marshall]

Source: Mark Wilson, Famous Logos Look Better Lettered By Hand, Co.DESIGN, Fast Company, April 24,2015,

3045394-slide-s-1-famous-logos-look-better-lettered-by-hand 3045394-slide-s-2-famous-logos-look-better-lettered-by-hand 3045394-slide-s-3-famous-logos-look-better-lettered-by-hand 3045394-slide-s-4-famous-logos-look-better-lettered-by-hand 3045394-slide-s-5-famous-logos-look-better-lettered-by-hand 3045394-slide-s-6-famous-logos-look-better-lettered-by-hand 3045394-slide-s-7-famous-logos-look-better-lettered-by-hand 3045394-slide-s-8-famous-logos-look-better-lettered-by-hand 3045394-slide-s-9-famous-logos-look-better-lettered-by-hand 3045394-slide-s-10-famous-logos-look-better-lettered-by-hand

DataViz: A Periodic Table Of Elements That The World Is Running Out Of

This is one chemistry class the tech industry needs to get right.

You might not realize it, but almost everywhere around you are rare metals from the earth.

In your phone, computer, or any other LCD screen, for example, you’ll find a dash of indium, a soft, malleable metal that is in short supply in the Earth’s crust. Gallium, which can emit light from a jolt of electricity, is used in semiconductors, LEDs, lasers, and the solar industry. Rhenium, one of the rarest elements in the earth’s crust, is most commonly needed in jet engines.

In other words, in our daily lives, we rely on many metals that are either uncommon, environmentally damaging, or located almost solely in places like China, Bolivia, or the war-torn Democratic Republic of Congo (i.e., not nations the U.S. is always on good terms with). What’s the risk that one day we won’t be able to depend on any of these elements?

That’s the question asked by researchers from Yale University, who have now catalogued how much we’re in danger of putting all our eggs in one basket.


The concentration of elements on a printed circuit board.

Looking at each of 62 metals that we use today, including each element’s scarcity, concentration in one nation, and the difficulty of finding suitable replacements, the study creates a periodic table of risk (or as the researchers call it, “criticality”).

Metals like zinc, copper, and aluminum—the ones most commonly used in manufacturing industries since long before the computing revolution—pose little risk, and therefore have relatively low “criticality” scores.

However, unlike metals that were common in eras passed, those used in today’s newer and emerging technologies, including smartphones, batteries, advanced solar cells, and various medical applications, are not as reliably easy to get, the assessment shows. Some of these elements, like arsenic and selenium, can’t even be mined alone; they are usually the byproduct of other mining processes.

Elements with the greatest supply risk. Red is high, blue is low.

The study, published in the Proceedings of the National Academy of Sciences, found that supply limits are most important for metals used in electronics, such as gallium and selenium. For environmental implications, metals like gold and mercury proved the biggest risks. Imposed supply restrictions could affect the supply of metals like chromium and niobium, which go into forming important steel alloys, and tungsten and molybdenum, which are used for high-temperature alloys.

The larger point for the study’s authors is to underscore the need for greater electronics recycling programs as well as a change in thinking about design. The more these metals are put back into circulation, the less the demand for fresh mining becomes, notes the lead author, industrial ecologist Thomas Graedel.

“I think these results should send a message to product designers to spend more time thinking about what happens after their products are no longer being used,” he says.


DataViz: The Meaning of the Three-Letter Airport Abbreviations

Airport Codes

It’s one of those things that you’ve perhaps never explicitly thought about, but it may have tickled the back of your mind a few times as you make airplane reservations or stare at a departure screen. Where do the three letter codes used to delineate between airports actually come from? What’s the deal with the “X” in LAX? Why EWR for Newark?

Thanks to a new site from simple and effective new site from designers Lynn Fisher and Nick Crohn we can finally know where these little acronyms are derived from.

Called International Air Transport Association (IATA) codes, the clean, visually appealing site lets you click on a number of different codes (laid over an image of the airport’s location), which delivers provides a simple, concise explanation of its origin.

The mysterious X is finally understood: it’s simply the letter that’s plugged in if the necessary letter is already taken by another airport. The site also points out that up until the 1930s, airports only used two letter codes. That’s how you get LAX for Los Angeles International Airport, which was previously just LA. The strange Newark code EWR is also revealed. After switching the three letter codes, the Navy reserved all codes beginning with N. Thus, Newark was forced to begin with their second letter.

Many more fun tidbits like these can be found in this very informational little site. Have fun.


Source: Co.DESIGN, What The Hell Do Those Three-Letter Airport Abbreviations Mean?, Fast Company, March 19, 2015,

DataViz: U.S. Bachelor’s Degrees by Gender and Ethnic Diversity


[Click on image for interactive version and author information]U.S. Bachelors Degrees

Chart: Baking Units Demystified

A handy chart by Andrew M.H. Alexander.



Shapes, Pictures and Colors: Environmental Print as a Teaching Tool

Environmental Print

My wife and I were driving in the car last weekend and were discussing environmental print. My wife is a retired Special Education teacher who taught in the K-3 grades for 39 years. Currently, she is Adjunct Faculty at Arizona State University. I found her discussion of it very interesting and saw some parallels with what we try to do with data visualization and infographics. My blog today discusses what environmental print is and how it is used to help teach literacy in our early stages of education. It is from a paper by  Rebecca McMahon Giles and Karyn Wellhousen Tunks (source noted at the end of the blog post).

Best Regards,


What is Environmental Print?

“Hey, Ms. McMillan, you have three McDonald’s in your name.” This observation, made by 4-year-old Jadin as his pre-kindergarten teacher wrote her name, reflects young children’s familiarity with popular logos and commercial print that they see every day. [1]

Early encounters with environmental print, words, and other graphic symbols found in children’s surroundings are among their first concrete exposures to written language.

These experiences

  • provide an introduction to making meaning of abstract symbols and
  • offer children their first opportunity to make sense of the world through print.

As a result, children typically read print from their environment before reading print in books.

Why Environmental Print Is Important in Early Literacy

More than four decades of research on the role of environmental print has substantiated its important influence in young children’s literacy development. The preponderance of studies on environmental print, however, took place in earlier decades and focused on its impact on early reading behaviors. Interest in the impact of environmental print on children’s early writing is a more recent development.

Research clearly shows the benefits of exposure to environmental print for emergent readers and writers. In one study of preschoolers, 60% of the 3-year-olds and 80% of 5-year-olds could read environmental print in its context of cereal boxes, toothpaste cartons, traffic signs, and soft drink logos.

Children typically read environmental print first.

Children are initially dependent on the label or logo associated with the word. As their understanding of print and phonetic skills necessary for reading increases, they gradually begin to read words presented separately from the logo.

Children’s responses to environmental print are the direct outcomes of their prior experience with it. Academically at-risk preschoolers recognized significantly fewer environmental print logos than did their academically advantaged peers. However, studies consistently show that regardless of socioeconomic status or home language all children benefit from exposure to print in their environment.

Barbie - Environmental Print

Choose Suitable Environmental Print

Using environmental print in preschool, kindergarten, and primary classrooms is an important part of developing a language/literacy-rich learning environment. Many products marketed in the United States are labeled in English, French, and Spanish, so they can be tools to broaden children’s language experiences even further. Even so, reading environmental print is likely to be individual and dependent upon geographic location. For this reason, children should collect much of the environmental print that they will learn from at school.

  • Experiences in which children take ownership, such as cutting out a recognizable name or label from a container or magazine found at home, are particularly beneficial.
  • Contributing their own examples of environmental print to create class books or displays also strengthens the home-school connection.

Activities like these reinforce the fact that readable and writable print can be found everywhere, while ensuring that the print is actually familiar to the children.

Env Print2The purpose of using familiar environmental print for instruction is to form a bridge between the known and new, so it is important that teachers use
examples that are meaningful for the children in each group. Horner (2005) recommends emphasizing the use of child-familiar logos—such as those from toys, movies, and television shows—rather than community signs or household items. These were found to be most recognizable by both males and females of various ages. For instance, the journal entries in Photo 1 (above) [1] by two kindergarten girls, reflect their recognition of and interest in the text found on a classmate’s lunchbox.

Horner (2005) also points out that an educator’s use of logos could imply approval of the products they represent. She recommends that teachers use acceptable toy names whenever possible. Children usually enter learning settings already familiar with a wide variety of commercial environmental print, such as road signs and household product logos. Their classrooms often are filled with homemade environmental print, such as daily schedules, labels on shelves, and a list of birthdays. Initial experiences with both types of environmental print enable children to associate print with meaning. This enables them to build confidence in their ability to read, which is necessary for becoming successful readers. In addition to supporting young readers, recent research demonstrates how print from the environment gives young children confidence to experiment and use print resources to improve their writing. These researchers found that children experimenting with writing engage in  “environmental printing”— copying conventional forms of print—directly from sources in their immediate surroundings.

This study of kindergarteners’ journal-writing behavior revealed three distinct ways children used environmental print.

  • Some children used environmental print simply as a source to copy without regard to its meaning.
  • Environmental print also served as a resource for the correct spelling of particular words or phrases, such as the day of the week, needed in the child’s message.
  • Environmental print inspired children’s choices of writing topics.

Environmental Print in Daily Explorations

Env PrintEarly writing attempts can easily be promoted by deliberately stocking children’s play and learning areas with a combination of authentic environmental print and writing supplies along with other props. For example, a block center that contains street signs, “under construction” labels, and corporate logos such as those from
restaurants and manufacturers encourages the use of environmental print when building. Coupling such signs with blank index cards, sticky notes, and markers promotes environmental printing as children label or write about their structures.
Placing cookbooks, large colorful paper, and blank recipe cards in the pretend play area may prompt children to record the dishes being served.

They might design restaurant menus or transfer information from a cookbook to a personalized recipe box using the original text as a model and spelling reference. By adding labeled measuring utensils in pretend and water/sand play, children begin to see the relationship between quantities, numerals, and words. Setting up a classroom movie rental facility, pet rescue service, or grocery store with children for their dramatic play is another way to provide familiar environmental print as a motivation for writing. Telephone books, magazines, travel brochures, play money, and similar items all can expand children’s early literacy resources.

With a wide array of manipulatives that spark the use of environmental print, children will soon be able to write words to their favorite songs, learn color name words (in three languages) from crayons or markers, and match the names and shapes of seashells. Immersing children in a learning setting intentionally filled with environmental print to be used as a writing resource increases their ability and motivation to write.


Children who are surrounded by print flourish in literacy development and are often more successful in school. As children observe, read, discuss, and copy the signs and symbols in their world, they become aware that literacy is part of everyone’s daily activities. They come to realize that reading and writing fulfill various purposes and functions in their lives. Environmental print

  • provides models for children’s writing,
  • helps them internalize correct spellings of commonly used words, and
  • inspires their own writing through environmental printing. With support and guidance, young children eventually learn to write conventionally, composing messages for a variety of purposes and audiences.

Consciously capitalizing on their familiarity with environmental print as an aid for early writing is one way to promote their progress on the road to becoming independent authors and readers.



[1] Rebecca McMahon Giles and Karyn Wellhousen Tunks, Children Write Their World: Environmental Print as a Teaching Tool, Dimensions of Early Childhood, Fall 2010, Volume 39, Number 3,

Graph: How Winning Relates to Salary for the Top NFL Quarterbacks

QB Pay Graph

The old adage “You get what you pay for” applies in most situations. Apparently not in the NFL.

With the 2014 season in the books, compiled a list of the 25 highest-paid quarterbacks in terms of yearly average salary (data via and charted how they fared, as measured by wins.

QB Wins vs. Salary

Some of the results were expected. Aaron Rodgers, currently the highest-paid signal-caller in the NFL, is tied for the NFL lead among quarterbacks with 12 victories. Joining him at the top of the standings: Peyton Manning (No. 5 on the salary ranking), Tony Romo (No. 8) and Tom Brady (a bargain at No. 16).

Others surprised. NFC South quarterbacks looked egregiously overpaid this season, with Matt Ryan (the NFL’s second-highest paid quarterback), Drew Brees (No. 4) and Cam Newton (No. 20 as he’s still on his rookie-scale contract) all tallying seven wins or fewer. Jay Cutler’s deal (his $120M extension made him the fifth-highest paid quarterback) looks so bad that Phil Emery, the Bears’ GM who gave it to him, lost his job. Two quarterbacks (Sam Bradford and Matt Schaub) were paid nearly $20M combined last season … and won zero games.

Bargains do exist. Andrew Luck, who won 11 games, ranked 19th among all quarterbacks in pay. Recently retired Bills QB Kyle Orton won seven games for Buffalo, but didn’t even crack the top 20 in salary.

Find a full list below.




PhantomFlow: UI Testing With Decision Trees (Huddle Team)


PhantomFlow is an experimental approach to UI Testing, based on Decision Trees, created by James Cryer and the Huddle development team.

Available on GitHub, as a NodeJS wrapper for PhantomJS, CasperJS and PhantomCSS, PhantomFlow enables a fluent way of describing user flows in code whilst generating structured tree data for visualization.

PhantomFlow Report: Test suite overview with radial Dendrogram and pie visualisation

The above visualisation is a real-world example, showing the complexity of visual testing at Huddle.


  • Enable a more expressive way of describing user interaction paths within tests
  • Fluently communicate UI complexity to stakeholders and team members through generated visualisations
  • Support TDD and BDD for web applications and responsive web sites
  • Provide a fast feedback loop for UI testing
  • Raise profile of visual regression testing
  • Support misual regression workflows, quick inspection & rebasing via UI.


See also

PhantomFlow also comes as grunt plugin! grunt-phantomflow

Try it!

  • node test/test.js – First run will create visual test baslines with PhantomCSS
  • node test/test.js – Second run will compare baseline visuals with the latest screenshots. This’ll pass because there have been no changes.
  • node test/test.js report – An optional step to load the Decision tree visualisation into your Web browser

Mac OSX users should be aware that PhantomJS doesn’t load the FontAwesome glyths used in the test suite, I don’t understand why. I fixed this locally by downloading FontAwesome and double clicking on the .otf file to install the font.

There are two example test suites, these suites will be executed in parallel, the command line output is a bit muddled as a result.

The D3.js visualisation opens with a combined view which merges the test decision trees. Click on a branch label or use the dropdown to show a specific test. Hover over the nodes to see the PhantomCSS screenshots. If there is a visual test failure the node will glow red, hover and click the node to show the original, latest and generated diff screenshots.

Test Example

The demo describes a fictional Coffee machine application.

flow("Get a coffee", function(){
    step("Go to the kitchen", goToKitchen);
    step("Go to the coffee machine", goToMachine);
        "Wants Latte": function(){
                "There is no milk": function(){
                    step("Request Latte", requestLatte_fail);
                        "Give up": function(){
                            step("Walk away from the coffee machine", walkAway);
                        "Wants Espresso instead": wantsEspresso
                "There is milk": function(){
                    step("Request Latte", requestLatte_success);
        "Wants Cappuccino": function(){
                "There is no milk": function(){
                    step("Request Cappuccino", requestCappuccino_fail);
                        "Request Espresso instead": wantsEspresso
                "There is milk": function(){
                    step("Request Cappuccino", requestCappuccino_success);
        "Wants Espresso": wantsEspresso

And below is the visualisation generated by this simple feature test.

PhantomFlow Report: Feature test visualisation as tree Dendrogram

The visualisations

Deciding how to visualise this data is the hard part. It has to be readable and insightful. These visualisations are still evolving, it would be great to see contributions for better visualisations. Visit for inspiration.

PhantomFlow methods

  • flow (string, callback) : initialise a test suite with a name, and a function that contains Steps, Chances and Decisions
  • step (string, callback) : a discrete step, with a name and a callback that can contain a PhantomCSS screenshot as well as CasperJS events and asserts.
  • decision (object) : Defines a user decision. It takes an object with key value pairs, where the key is the label for a particular decision, and the value is the function to be executed. The function can contains further decisions, chances and steps
  • chance (object) : The same as a decision but offers the semantic representation of a chance event, as opposed to a deliberate possible action by the user

NodeJS setup example

    var flow = require('../phantomflow').init({
        // debug: 2
        // createReport: true,
        // test: 'coffee'

    //; // Show report{
        process.exit(code); // callback is executed when PhantomFlow is complete

NodeJs Methods

  • run (callback) : Runs all the tests. Takes a callback which is executed when complete
  • report () : Spins up a local connect server and loads a browser window with the visualisation generated on the last test run.


  • createReport (boolean) : Should a report/visualisation be built?
  • debug (number) : A value of 1 will output more logging, 2 will generate full page screenshots per test which can be found in the test-results folder. Forces tests onto one thread for readability.
  • earlyexit (boolean) : False by default, if set to true all tests will abort on the first failure
  • includes (string) : Defaults to ‘include’, it is the root directory of custom global includes (within the PhantomJS domain)
  • port (number) : Defaults to 9001, this is the port that will be used to show the report/visualisation
  • results (string) : Defaults to ‘test-results’, it is the root directory of the test results
  • remoteDebug (boolean) : Enable PhantomJS remote debugging
  • remoteDebugAutoStart (boolean) : Enable autostart for PhantomJS remote debugging
  • remoteDebugPort (number) : Defaults to 9000, the port on which Web Inspector will run
  • skipVisualTests (boolean) : If set to true the visual comparison step will not be run
  • test (string) : Test run filtering with a substring match
  • tests (string) : Defaults to ‘test’, it is the root directory of your tests
  • threads (number) : How many processes do you think you can parallelise your tests on. Defaults to 4.


Test execution is parallelised for increased speed and a reduced test to dev feedback loop. By default your tests will be divided and run on up to 4 spawned processes. You can change the default number of threads to any number you think your machine can handle.


Debugging is often a painful part of writing tests with PhantomJS. If you’re experiencing trouble try the following.

  • Enable debug mode 1, to show more logging. This will also prevent parallelisation – better for readability, but slower.
    var flow = require('../phantomflow').init({
        debug: 1
  • Enable debug mode 2, same as mode 1 but will also generate full-page screenshots per step, to allow to see what’s actualy going on.
    var flow = require('../phantomflow').init({
        debug: 2
  • PhantomJS provides remote debugging functionality. This setting allows you to use the debugger; statement and add breakpoints with the Web Inspector interface. Remote debugging can be use in conjunction with the debug modes described above.
    var flow = require('../phantomflow').init({
        remoteDebug: true
        // remoteDebugAutoStart: false
        // remoteDebugPort: 9000

Rebasing visual tests

Rebasing is the process of deleting an original visual test, and creating a new baseline, either by renaming the diff image, or running the test suite again to create a new image. The PhantomFlow UI provides a quick way to find and inspect differences, with a ‘rebase’ button to accept the latest image as the baseline.

PhantomFlow UI: Rebase button

What next?

James and the Huddle Team have been using this testing style for many months on Huddle’s biggest UI application. It’s still an evolving idea but for the team actively worked on it, it’s making a huge difference to the way they think about UI, and how they communicate about UI. It supports TDD well, they use it for ‘unit’ testing UI but it has great potential for end-to-end as well. James would also like to do more work on the visualisations, they look great and are very communicable, but he feels they could be a better. Of course, this is an Open Source project and it would be great to see contributions.

Source: Created by James Cryer and the Huddle development team.


Get every new post delivered to your Inbox.

Join 473 other followers