Sample sketches

Concept development for explorative visualizations of complex data

circle-project-by-year
circle-project-by-year4-01
circle-project-by-year_standard-01

Conditions Wheel Concept

Detail of a Spinning Wheel concept (2018.07.26) for the Canadian Energy Regulator’s Conditions visualization. (Explore The Conditions Visualization.) Our data for this project consisted mainly of legal text called Conditions. Conditions are placed on companies making pipeline applications. Conditions are organized according to themes and other multi-dimensional data, such as time, company, project, type of application, or whether or not a condition is standard or non-standard. For this concept, because legalese is fairly daunting, I wanted to be able to get an overview of all projects with conditions and be able to dive into the details about the projects through a playful interaction, in this case, spinning a wheel. In the top view, above the wheel, conditions for a project are displayed as coloured horizontal lines. The colours correspond to themes. This view shows all the projects with Environmental Protection themes. The projects are represented on the wheel by small rectangles and displayed according to the year of the project. Projects are heat mapped according to how many environmental protection conditions they have. Darker green rectangles have more conditions with an environmental protection theme.

The second view shows how all themes can be visualized in tandem. When the wheel is spun, the distribution of themes is shown for a selected project, which bumps out, and is displayed as a larger rectangle. The third view shows how unique versus standard conditions might be represented. The viewer spins the wheel to select a year. In this case, 2014 is displayed, and the viewer can scrub through projects by hovering over the small rectangles. The rectangle that is selected bumps out and the viewer then sees a small visualization of how many standard versus unique conditions there are for that project.

ferns-05

Fronds

Detail of a Frond concept (2018.06.14) for the Canadian Energy Regulator’s Conditions visualization. Explore The Conditions Visualization here. (Conditions are placed on companies making pipeline applications. Conditions consist of legal text and they are organized according to themes and other variables.) My challenge for this visualization was how to represent the text for conditions for multiple projects over many years, and how to get an overview of all the conditions placed on companies. For this concept, I used a biomorphic pattern from ferns that coil, where each frond represents a project. There are ten projects for 2018. Projects have multiple conditions that are placed on them. Each leaf on a frond represents a single condition on that project. Larger coiled fronds would represent projects with a large amount of conditions. When you click on a frond, like the multi-coloured one above, it uncoils to reveal the theme conditions, where themes are encoded using colour. The advantage of this concept is that projects with lots of conditions need not take up a large amount of real estate, and people can get a quick overview of projects.

sea-urchins-06

Sea Urchins

Detail of a Sea Urchins concept (2018.06.19) for the Canadian Energy Regulator Conditions visualization. (The Conditions Visualization is now live.) Again, the challenge here was how to represent the legal text in the conditions placed on companies over multiple years. In this sketch, each urchin represents a project; the colour of the urchin represents the type of project, such as a gas pipeline. The conditions for each project are represented by spines around the urchin. The length of the spine reveals the length of the condition text, so long spines reveal conditions with lots of text. Urchins that are lopsided reveal whether they have primarily unique or standards conditions. The big blue urchin is a 2016 project with many unique conditions, in this case, it is the TMX pipeline with hundreds of conditions, many of them very lengthy.

balloons-07

Balloon Tree

An early concept (2018.06.12) for the Canadian Energy Regulator’s Conditions visualization. (The Conditions Visualization is now live.) In this sketch, you see company projects along a single vertical timeline. Each project is represented by a balloon. The shape of the balloon is mapped to whether the project has more unique conditions or more standard conditions. The colour of the balloon conveys the type of project, such as a gas pipeline. When you click on a ballon, the balloon pops and reveals the conditions inside as coloured bubbles, The bubbles appear next to the balloon, so that on hover, the condition text can be read from each bubble. The theme for each bubble is represented by its colour. The small timeline (right), allows people to see a quick overview of all projects.

water-balloons

Water Balloons

This concept was coded using real data from the Canadian Energy Regulator on import and export of electricity. My idea was to communicate flows of electricity between US States and Canadian Provinces. I used the metaphor of a water balloon that inflates or deflates geographical boundaries. As individual relationships exist between states and provinces, they each inflate or deflate accordingly.