Qualities for explanatory data visualizations

The following qualities for explanatory data visualizations were described in the free, online course Data Visualization and D3.js.

  • understand the context- who will be viewing the visualization, what is the cultural context?
  • choose appropriate type of visual- should it be a map, chart, etc?
  • identify and eliminate clutter – remove non-essential details, show only informational design elements
  • direct audience attention – show the viewer what is important, guide their experience through the visualization
  • tell a story – tie your visualization to a larger narrative

A person-friendly web of information exchange


People communicate in myriad ways. We have channels of information taking various forms such as encyclopedias, dictionaries, maps, photo albums, journals, letters, postcards, and more. Often, information exists in separate realms, and is difficult to combine. This, in turn, makes it difficult to create into rich and evolving forms.


People need an information tool(kit) that is easy to use. There needs to be little separation, or contortion, from working directly with the information we wish to remix and share.


We need to reward activities such as

  • improvement of existing commonwealth resources,
  • removing barriers to access
  • providing usefulness and/or relevance.

This, while filtering and discouraging abusive behaviour.

The Challenge

Create an open source interface that abstracts the complexities of API/data management. Enable people of all skills and abilities to create graphs and composite views of information from many sources.

The Interface

People will select information types and sources, and then connect the information on a canvas to create a composite display. These composites can be bundled and shared as well as embedded within other composite displays, in modular fashion.


The system might consist of modules to work with data. Generally speaking, there are at least three primary categories of modules.


Make request(s) for information, about the condition of information, and search for relevance.


Once information is located it may need to be modified, combined, filtered, etc.


Information may be rendered in at many stages of the process and in many forms, such as documents, tables, graphs, and multimedia output.


Brett Victor‘s work on interface design, and presentations such as Learnable Programming.

OpenStreetMap meets Blender3D

A new Blender3D plugin has been created enabling the import of OpenStreetMap data for 3D extrusion, visualization, modelling, simulation, etc.

OSM objects can be imported as flat Blender objects or as extruded ones with the specified thickness. Either new custom properties latitude and longitude are set for the active Blender scene or previous values of the custom properties latitude and longitude are kept. In either case the Blender scene is said to be georeferenced.

Quick Guide For Firefox OS App Development

If you are interested in producing applications for the mobile web, please consider building using native technologies such as HTML, CSS, and JavaScript.

Firefox OS is a mobile operating system built on web standard technologies.

To get started with Firefox OS, I recommend the following book:

Developing for Firefox OS - Quick Guide

Developing for Firefox OS – Quick Guide

Quick Guide For Firefox OS App Development by Andre Garzia.

“Learn how easy and quick it is to develop applications for Firefox OS, the new mobile operating system by Mozilla. Empowered by this books practical approach you will learn thru examples how to develop apps from the beginning all the way to the distribution in the Firefox Markeplace.”

You can download the book for free, or choose to pay the author a reasonable sum for his work 🙂

Grid Design Notes

Grid alignment is  a tool to help users discover content quickly. A well designed grid helps us scan content for meaningful patterns, and identify important elements.

Grids are comprised of two primary elements:

  • columns – vertical divisions of the layout
  • gutters – space between columns

Need Finding

Participant Observation

“Deep hanging out.”

Sit with people while they perform a task. Observe difficulties, experience, and intuitive behaviors.

  1. What do people do now? (baseline)
  2. What values and goals do people have?
  3. How are particular activities embedded within the larger activity/context? (ecology)
  4. What are similarities and differences between people?


Learn by hanging around experts.


Pay attention to how people ‘hack’ their environment. These are good clues about usability bugs, and ideas for improvement. Users are not dumb. Design technology to be familiar, simple, intuitive, self-documenting, etc..


Pay more attention to what users do, less to what they say.


Be careful how you construct surveys and questions.


Paper Prototyping

Mock-up the UI on paper. Use markers, colors, post it, index cards, etc..

Work quickly and reuse components where possible.


  • Widgets
    • Paper
    • Cardboard
    • Transparencies
    • stick-its
  • Connectors
    • Tape
    • Glue
    • Rubber Cement
  • Drawing
    • Markers
    • Pens
    • Color is good


Get users and stakeholders involved. This empowers and encourages people to play an active role in design process.


People will give feedback liberally due to the ad-hoc nature of paper prototypes.

Digital Mock-ups

You can make digital mock-ups with several tools,  including:

  • Inkscape
  • Pencil
  • GNU Image Manipulation Progrem

Digital mock-ups are generally:

  • High fidelity
  • Time consuming
  • Visually appealing

Users may give less feedback as it seems that more effort has been spent creating a digital mock-up.


Notes from the Human Computer Interaction class at Stanford University.

Focus on task that project is designed to support. What will the UI help a person accomplish?

Storyboarding is about communicating ideas.

Star People

Star people are quick and easy to draw. Their name comes from their resemblance to stars:

Star People

Star People

Star people can point, gesture, talk, and be drawn performing other activities.


People, environment, task


  • Steps to complete task
  • What leads people to use the application?
  • What task is illustrated?


What are the accomplishments? How is satisfaction measured?


Storyboarding is holistic. It portrays a whole sequence of events to meet a goal.

Time Bound

Emnforce a time limit when storyboarding. E.g. 20 minutes is often sufficient.