Atomic Design is the concept that we aren’t designing pages anymore. Rather, we’re designing systems of components. In short, we can start with atoms, such as a title, a byline, or a link. From those atoms you can create molecules and organisms, i.e. a blog post preview or site header. Our page templates are then made up of different combinations of our organisms. Atomic Docs is a new tool that manages your components (and their underlying code) and automatically generates a frontend style guide. I recently came across it in an article and wanted to put it to the test to see how it would impact my workflow. Here are my takeaways.
Atomic Docs was very easy to get started with. I set up a WordPress site with our distro and starter theme. Then, I downloaded the source files from github and moved them into the root of my theme. That’s pretty much it. I simply needed to change the destination CSS file path in our gulpfile.
One of the hardest and most important tasks of a frontend developer is naming things such as classes, ids, field names, filenames, etc. The names we choose must convey meaning to other developers, designers, and site admins and the choices are endless. Atomic Docs makes this task much simpler. The user interface is intuitive and easy to use and you can easily rename your components and categories, saving you from needing to go into many different places in your project to manually change names. The best part is, it generates all the SCSS and PHP partials you need for development, and puts them in organized folders and in the proper order. The extra head space Atomic Docs provides allows you to focus on what your components will be called, rather than where they will live and if they’re in the right place in your folder structure.
Design Driven Development
As the name suggests, Atomic Docs is a great tool for the Atomic Design process or Style Guide Driven Development. Atomic Docs isn’t limited to these processes though. The practice of developing and designing your user interface separate from backend technology can benefit any team. You can also deliver a living style guide to your client and design team for future use.
When using Atomic Docs, it’s important to remember to name categories and components the same way you would manually. Most importantly, do not use spaces, as filenames with spaces are obviously invalid. This is not a major fault, however, it wasn’t clear initially that there was a one-to-one correlation between the generated filename and the name you assign it in the tool. This is also worth noting if you use BEM naming conventions. Filenames have the potential to get a little confusing when you get down to the Modifier level as you can see in the screenshot above.
Atomic Docs is awesome! It delivers a great developer experience for creating and managing SCSS partials and makes it easy to create a living style guide. I’m looking forward to utilizing it on my next project.
If you’d like to learn more, get in touch!
Welcome to Part 2 of this two part series on data visualization tools. In Part 1 we looked at dimple, Plotly, and D3Plus. In this article, we’ll look at three more: morris.js, NVD3, and vis.js.
I didn’t think it was possible to get much simpler than dimple, but Morris manages to do it. Morris is pretty limited—aside from donut charts, it supports bar charts, times series, line, and area charts—but what it does, it does well. Based on Raphaël, Morris creates attractive interactive charts with a minimum of coding. For most charts, you just need to grab some data, tell it which field to use for the x axis and y axis, and line or area labels, and, voilà! You’ve got a chart.
You can customize your charts, setting colors, line widths etc, but even without any customization at all, you’ll get a good-looking chart.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts
- Data Input Sources: JSON
- Data Output: SVG
Ease of Use
The default colors may be a little dull for some tastes, but they’re easy to change. And the charts are appealingly rendered by default, with nicely formatted tooltips.
Morris only offers a handful of charts, and its option list is less extensive than others.
Yet another child of D3, NVD3 has closer ties to its parent than any chart we’ve looked at so far. It was inspired by an article by D3 developer, Mike Bostock on Reusable Charts, and while NVD3 charts aren’t all that difficult to implement, the D3 syntax may be off-putting.
NVD3 has some nice features built in, like clickable legends for line and bar charts that let users show or hide individual data elements, but there are also some gotchas.
For example, discrete bar charts let you stagger bar labels for a better fit, but too many bars on too small a screen can turn them into an unreadable mess.
NVD3 has some charts that not even Plotly can offer, like the sunburst chart (shown above), and interactive sparklines. And thanks to myriad configuration options, even standards like donut charts can get a new look. If you’re willing to put in some extra time and effort, NVD3 will reward you with unique and beautiful charts.
- Visualization Types Supported: Simple Line, Scatter, Stacked, Area, Bar, Pie, Bullet, HTML Indented Tree, Monitoring, Sparkline, Parallel Coordinates, Candlestick OHLC, Sunburst, Box Plot
- Data Input Sources: JSON, CSV, TSV, anything D3 can process
- Data Output: SVG
Many Visualization Types
Besides the types listed above, NVD3 offers plenty of combinations and specializations such as scatter plus line charts, and time series bar charts.
A Multitude of Options
NVD3 offers a lot of built-in options for each graph type, including some nice features like noData, to add a message if data isn’t available — especially useful when users can filter data, or you’re using data from an external source which may not always be available, and id, which adds a CSS id to customize the appearance
Part of the reason that NVD3 is more difficult than similar libraries is down to poor documentation. The docs for some options simply say “No info for this option yet…”, so you may have to look at the example code to find out how they work. As of this writing, the docs aren’t on the main site (nvd3.org), but you can find them on Github, here.
A Work in Progress
The library is production-ready and most pieces are fine out of the box, but some areas still need some work, like the label issue I mentioned above. The good news is that this is a popular, actively maintained open-source project, so we can expect to see more improvements going forward.
And now for something completely different…
Vis.js does some of the basic charts we’ve seen in other libraries (line, bar, etc), but it also does a few things that are hard to find elsewhere: network diagrams and timelines.
vis.js isn’t very impressive when it comes to appearance. As with other packages, you can tweak and style them into good-looking charts, but it’s hard to justify the extra time and energy, when there are so many other libraries that give you a polished look out of the box. But while I can’t recommend vis.js for general charting, it’s worth a look for its network diagrams alone, so that’s what I’ll examine here.
Network diagrams are great for making connections, whether for hierarchical data like genealogy or organizational charts, routes such as airline maps, and interdependencies — the sky’s the limit. For more real-world uses, see vis.js’s own showcase of projects built with its library.
Like other members of the vis.js family, network charts are a bit plain-looking out of the box, but its features make it worth the extra time it can take to spruce them up. The network library lets you create groups, which make it easy to visually separate nodes by shape or color, and clusters, which expand or collapse a group of nodes and extensive event hooks for adding your own behaviors.
- Visualization Types Supported: Simple Line, Scatter, Stacked, Area, Bar (all regular and 3-D), Networks, Timelines
- Data Input Sources: JSON, DOT (for networks)
- Data Output: HTML5 Canvas
Network diagrams have some useful behaviors out of the box, like labels that grow, shrink, or disappear altogether, depending on the space available, and highlighting of connected edges when a user clicks a node.
Plenty of Options
vis.js also lets you choose from a variety of shapes for particular nodes or node groups, or replace them altogether with icons or images. You can add tooltips or use HTML in the node labels, making it easy to style and add links.
Choice of Date Formats
You can use json to import and/or calculate data, or use the DOT format to access Graphviz data or easily layout your own if you have a small dataset. For example, to create a triangle in DOT format you can write something like this:
A — B; B — C; C — A
where A, B, and C are the points of the triangle.
Slow Load Time
For networks with a lot of nodes, users have to wait a few seconds before the network appears. You can mitigate this by using clusters, but if you want to display all the nodes from the start, you’ll probably need some sort of ‘Loading…’ message, so users will know that there’s something there.
In this insight I’ve presented a set of libraries that cover a wide variety of chart types for a wide range of skill levels. But in terms of free charting libraries available, we’ve only scratched the surface, not to mention commercial libraries and SaaS products.
It’s also worth mentioning D3, which provides the basis for so many of these libraries. It still takes a fair bit of up-front investment in time to get a handle on the D3 language, but the library has gotten cleaner and more manageable over the years, so if you’ve found D3 too difficult in the past, it may be worth another look.
And of course, if you’re looking for someone to build you a website with attractive, user friendly and informative graphs, be sure to get in touch.
It’s been four years since our last deep dive into data visualization tools, and a lot has changed. The responsive revolution that’s swept the internet, has become standard fare. In 2012, it was hard to find a charting tool that scaled its charts to fit the screen size. Today, it’s rare to find one that doesn’t. Features that could make a tool stand out in 2012—things like animation and advanced styling—are par for the course today.
While D3 itself hasn’t gotten any easier, a new crop of libraries have appeared that are built on D3, but provide an easy entry for people who want to leverage its power without getting caught on its learning curve. In Part 1 of this 2-part series, I’m going to explore three of these libraries: dimple, Plotly, and D3Plus.
The dimple website doesn’t explain the origin of its name, but after spending some some time with the library, I suspect that it’s a portmanteau of “D3” and “simple.” Using dimple, you can pull data from a json feed and turn it into a chart in just 11 lines of code.
dimple provides some nice features by default: tooltips that appear when you mouse over the chart and intelligent rendering of bar labels—if there isn’t enough room to display them horizontally, it will automatically display them vertically. But there’s also a fair amount DIY involved. You have to tell it to leave enough room for the labels by specifying margins, and if you want colors besides Boring Blue, you have to specify them yourself.
But what dimple lacks in polish, it makes up for it with it’s ability to produce charts that can communicate complex data relationships with a minimum of effort.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts, Scatter Charts, Bubble Charts, Ring Charts, Step Charts, in any combination
- Data Input Sources: JSON, CSV, TSV (tab separated values).
- Data Output: HTML, SVG
Ease of Use
dimple makes it easy to create charts from json data retrieved from APIs, CSV files and TSV (tab separated variable) data. It automatically creates configurable tooltips, and it’s easy to add common features like legends. Styling can be added the D3 way, by adding colors, borders, etc to elements, but you can also add classes to elements and style them with CSS.
dimple exposes its elements as D3 objects, so anyone who wants to dive into D3 can modify them as they like.
dimple boasts ‘storyboards’, which make it easy to animate a chart over some series, usually time. And while additional coding is needed to add user-friendly controls, the animation itself can be implemented in just a few lines of code.
dimple lacks some of the out-of-the-box polish of other data viz libraries. Legends, behaviors, and stylish tooltips are all easily available, but you’ll have to add them yourself.
You can see an example of the animation, and play around with a simple dimple chart here.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Area Charts, Scatter Charts, Bubble Charts, Error Bars, Box Plots, Wind Rose Charts, Heatmaps, Bubble Maps, Choropleth Maps, 3D Scatter Plots, Ribbon Plots, the list goes on and on.
- Data Output: HTML, SVG, WebGL (for 3d)
Every chart you build with plotly includes a raft of interactive features. Users can zoom and pan the chart, choose which data to display through its clickable legends, and even save the chart as a png image.
A Multitude of Visualization Types
I would have listed everything plotly offered in the “Visualization Types Supported” section, but my fingers were getting tired. Suffice it to say, if you can think of a chart or map type, chances are, Plotly’s got it.
Plotly’s got maps! And with the geodata included in plotly.js, you don’t even have to create map yourself. Just choose your continent (or the whole world), the projection you want to display, and then attach your data. You can use lat-long to pick a specific point or ISO A-3 codes to target entire countries. As with charts, users can zoom and pan maps and download them as png.
All that interactive goodness doesn’t come free. In my experience, Plotly charts make more of a demand on system resources than other libraries. In most cases, it’s worth it for the improved user experience, but if you plan to put a lot of charts and maps on a single page, or you’re targeting a user base with less than powerful hardware, you may want to consider something else.
You can play around with a simple Plotly chart here.
Like D3, D3plus doesn’t restrict itself to charts and maps. It has a lot of additional features and utilities like SVG text wrapping that makes it easy to format text to fit into a rectangle or circles, svg forms, and legible colors that adjust text colors so that they’ll still be readable against the selected background.
But don’t let the similarity to D3 fool you. It’s easy to get up and charting. D3plus offers simple settings to let you create attractive visualizations with a minimum of effort. Like dimple, makes it easy to create charts from a variety of sources. Setting values is as easy as assigning field names to an axis or color.
- Visualization Types Supported: Pie Charts, Bar Charts, Line Charts, Bubble Charts, Network Charts, Ring Charts, Scatter Charts, Sankey Diagrams, Tree Maps, Boxes, Paths, and Tables
- Data Input Sources: JSON, CSV, TSV (tab separated values).
- Data Output: HTML, SVG
All of the charts we’ve looked at try to keep themselves legible at different sizes, but D3plus goes that extra mile. It fits itself automatically to the height as well as the width it’s given and makes sure the axis tick labels never overrun each other. It makes good use of that color utility I mentioned above, by adjusting the brightness of its tooltip and legend text so that it always remains readable.
Colors, Colors, Colors
The default color pallette is rainbow bright, but if that doesn’t fit your style, it’s easy to override it with your own palette. But D3plus is more than just a pretty face. You can set the colors to vary based any field in your data set.
For example, you could create a bar chart from the following data, displaying the 2014 population for each city.
By default each bar (city) would have its own color. But you could set color to “State”, and all cities in the same state would have the same color. Or you could set the color to “1980 Population”, and the legend would become a choropleth with each bar shaded according to its 1980 Population.
Loads of Goodies
D3plus doesn’t have as many types of charts as other libraries, but it includes some that it might be hard to find elsewhere, such as network and ring charts and Sankey diagrams to visualize connections. It also offers a CSV function that makes it easy to add a “Download as CSV” button, and a ‘timeline’ for animating your chart over time.
Making Numbers Numbers
JSON wraps content, including numbers, in quotes. Most data-viz libraries have no problems with this, but D3plus requires you to “coerce” these number strings into real numbers before you feed them into the chart. This only takes a few lines of code, but it’s kind of annoying.
You can play around with a simple D3plus chart here.
In Part 2, we’ll look at three more data visualization tools that can make your website pop.
To learn more, get in touch!
Data visualization, for a designer, is the process of taking a complex structure and breaking it down in a way that the reader can easily comprehend. It is a powerful tool used to translate complex data into accessible insights.
In this article, I’ll explain the four critical steps we took to create a visualization graph for the World Economic Forum (WEF).
Step 1: Decipher the Data
The first step in any data visualization process begins with unpacking all of the elements and establishing the goal of the visualization or infographic. First we needed to figure out what problem we were trying to solve and, from there, start to conceptualize the solution. As designers, our task was to decipher the data provided and clearly translate it for the viewer.
The Networked Readiness Index (NRI) is an index comprised of four sub indexes and ten pillars. Starting with the information provided in the figures above, our design challenge was to integrate both of these competing concepts into a singular visualization.
Step 2: Iterate…Iterate…Iterate
We embarked on an iterative process exploring a variety of graphic structures before we reached a solution where the viewer could unquestionably discern the data. We iterate because we know that we won’t get it right the first time – or even the second. Iteration allows us the opportunity to explore until we ultimately arrive at a solution that works.
There are many different styles of graphs which can be used for data visualization. We explored two types for this project: the radial partition and the venn diagram. The radial partition graph displays hierarchical data on a radial system by splitting up the sectors of a simple pie chart on different rings. Venn diagrams are specially designed diagrams that show all possible logical relations and capture the relationships between different categories and levels of information. Through the process of iteration, we discovered that the venn diagram seemed to capture the information more accurately than the radial partition graph.
Step 3: Create a Graphic Narrative
Once we understood the message we needed to communicate, we then needed to create the visual language to articulate it. Curating the appropriate visual elements is critical, as the goal of any effective visualization is to allow the viewer to interpret information rapidly.
A graphic narrative may contain a variety of visual elements. For example, color can be used as an indicator to accent data points or create classes of separation, and iconography can be utilized to support user comprehension. It is critical that whichever visual language you choose, it should always minimize the viewer’s time to interpret the data. The choice of visual representation, whether it is an illustration, icons, visual elements, or graphs, is that it is effective and aligns to telling the story accurately.
The goal of a graphic narrative should be to make a subject accessible to the user. It is about delivering clarity without diluting the data’s complexity. Rather, it should be made more digestible through elegant presentation.
Step 4: Completion Checklist
A successful visualization should: a) clearly translate the message, b) reduce cognitive overload through visual language, and c) engage the viewer. In other words, the key for a successful visualization or infographic is to clearly and concisely tell the story.
Here is our final visualization, which integrated the supplied sketches and included a Venn diagram and use of icons and color to communicate the framework for The Networked Readiness Index (NRI) for the WEF 2015 report.
One of the most fascinating applications for the index is the non-profit sector. Intuitively, the non-profit sector seems like the last place you’d see an index. Indexes are, after all, built on value; well-established ones like the Consumer Price Index take a vast array of consumer good prices and pack them into a neat little number, which can then be tracked historically to give us a barometer inflation. But now non-profits are leveraging vast troves of data on elusive but important issues like economic freedom and even quality of life—and it’s changing the way we look at many of our greatest challenges.
To understand how numbers can help non-profits tell better stories and ultimately affect more meaningful change, it’s important to understand some history. It used to be that when non-profits focused on issues like hunger or emergency aid, institutions like UNICEF or the Red Cross often raised awareness and compelled action on issues with accounts of those who needed help. Images of starving children helped drive home a reality that even the most removed audiences found hard to ignore. Need to sound the alarm on climate change? Roll out a photo of a polar bear on a lonely, melting iceberg and you had the ingredients for an old-school non-profit marketing campaign.
Well, not anymore. While images can be powerful, causes have evolved quickly since the dawn of the information age. Audiences have become more educated and far more sophisticated. They also expect a lot more transparency when it comes to understanding the issues. More likely than not, donors won’t be convinced by narratives or anecdotal evidence alone. Cause-driven organizations can’t just ask audiences to take their word for it. For audiences to support a cause, they need two things: to understand it, and to see the evidence for themselves.
Understanding The Issue
To be sure, non-profit organizations have made great headway on the former. Constructive has built a practice around helping cause-driven organizations articulate who they are, what they do, and why they matter with greater eloquence and efficacy. And communicating the cause from a strongly-branded perspective pays dividends with audiences that are increasingly demanding and impatient. To truly scale your impact on an issue, you’ve got to compete for your share of audience mind-space along with everyone else, and the best way to succeed remains delivering a consistent, compelling brand experience that resonates with your audience and effortlessly transforms amateurs into experts.
Supporting the Cause
But what about turning cynics into advocates? That’s where the data comes in: sophisticated audiences demand hard evidence. But therein lies the problem—the more data you present, the more meaningful / less accessible it becomes. This paradox helped spawn the infographic boom: organizations were awash in data, and needed to find a way to package it and make it more appealing. The result has been an explosion in designs integrating qualitative and quantitative content with statistics and data visualizations. Some of these are little more than cosmetic enhancements with colorful icons to decorate the information, but at their best, effective infographics distill complex information and help audiences appreciate a new perspective. There are some great benefits to infographics, but they’re often driven by a narrative, which comes with its own implied point-of-view or agenda. But now, non-profits have discovered a new way to present data and it promises to be even more succinct and useful than the ubiquitous infographic.
One advantage of the index is that it simplifies the complex. Indexes harness vast amounts of data across a variety of segments and represent them as a single value. So instead of asking audiences to digest volumes of data, they get the gist in a neat little bite-sized piece. For example, the Yale EPI measures environmental performance for 178 countries across 9 issue areas and 20 different indicators. By itself, the raw data they’ve amassed is all but incomprehensible. But distill all these numbers down to a series of scores via a robust and transparent index methodology, and all the sudden you have an elegant system that allows you to compare apples to apples for a wide variety of criteria.
This leads us to the second key advantage: indexes provide empirical context for complex systems and dynamics—lowering resistance to the facts and resulting in better policies and practices in the process. By themselves, raw statistics don’t mean much. You say that some country put X million tons of C02 into the atmosphere last year? That sounds like a hell of a lot, but as a lay person, I really wouldn’t know. But roll that data into an index score, and you can tell not just how well a certain country is doing right now, but how their performance compares to their peers and their own historical performance. By creating an environment of greater context and useful comparison, organizations unleash the power of data to create competition and promote progress towards meeting our greatest challenges.
As one of our clients once told us, “stories get their interest, but metrics get their buy-in.” Imagery, narrative and anecdotal evidence are an important part of communicating your cause. But when you unleash the meaning behind data with an index that simplifies the complex and create context, you democratize the information and allow your audiences to combine data with their own assumptions and experience and draw their own conclusions. Then the metrics cease to just get buy-in; they tell a story of their own. Now that’s a powerful idea.
To see these ideas in application, take a closer look at 3 projects Constructive recently helped to produce for non-profit organizations: the Environmental Performance Index for Yale University; the Oil Security Index for SAFE & Roubini Global Economics; and the Justice Index for the National Center for Access to Justice at Cardozo Law School.
In the last few years alone, we’ve seen exponential growth in interactive mapping software that presents data from all sorts of angles.
But while being spoiled for choice can be a good thing, all this product and feature clutter makes it difficult to make a choice. When we have a client who wants to design an interactive map, our first question is not, “What kind of map do you need?” but always, “What are you trying to say?” Because, once we understand what message they want to communicate through geographic data, we’re much more well-equipped to dive into the sea of options, and recommend an effective solution.
So, let’s say you want to add an interactive map to your website. How do you approach thinking about the project? What kinds of options do you have at your disposal? And which ones are best to meet your goals?
Assuming you may not have had time to navigate the world of online mapping software and could use some help designing for impact using geographic data, hopefully I can offer some insight gained over years of helping clients tell their story using interactive maps.
3 Things Before You Dive In
A few things to keep in mind when you are making decisions about interactive mapping projects:
Your Story: Before you get too fixated on what type of map you’d like, or what tool you’d like to use, take a step back and think about your audience. What do you want to tell them, and how will they find it meaningful? Getting this part right first will save you a ton of time choosing mapping technologies and techniques down the road.
Your Data: What kind of data do you have? Is it hierarchical and heavily relational, or more singular and straightforward? Will it change over time, or is it more of a static snapshot? What format do you keep it in? The quantity, quality, depth and format of your data has a huge influence on what types of mapping software are appropriate for you.
Your Budget: I know, interactive maps are like eye candy, and you feel like a kid in a candy store! Like anything, choosing an interactive mapping tool involves trade-offs, and budget is usually a big factor. Save yourself the time (and heartbreak) of falling in love with an incredible interactive map technique that’s beyond your budget by starting with a clear idea of how much time and money you want to invest in bringing your data to life with maps.
Common Mapping Goals and 6 Great Examples
While there’s no shortage of interactive mapping tools and techniques, the goals of most of the clients we work with seem to fall into one of two pretty clear groups:
1. Displaying location-specific information about the activities of their organization
2. Displaying geo-specific data that tells a story about an issue, goals, progress and/or impact
With these two groups alone, there are a lot of really exciting and innovative ways to bring this data to life. Each offers different benefits. Here are just a few approaches to interactive mapping that can be really effective, with examples of tools that we think have a lot to offer.
1a. Simple Designed Map Markers
This most basic interactive map technique is ideal when you need an easy way to highlight different points of interest, and just want to visually differentiate the markers (or “pins”). It’s also an opportunity to make useful, branded information design part of the experience through color and iconography.
Customized, photographic markers for each point:
1b. Map Markers with Detailed Information
This technique is perfect if you want to quickly share detailed information about a geographic area, from summaries to pictures, and links that give users greater context. Most mapping tools give you a great deal of design control over your detail “hover boxes,” so this is a great way to present top-level summaries, provide useful, visual navigation, integrate the look and feel of your map with your brand.
This map displays specific project information with links to project pages:
These info boxes allow you to book a flight right from the map:
1c. Map Markers with Quantity Groups
I know, rolls off the tongue, doesn’t it? But, say you operate a lot of programs in one close area and you want to display them without presenting a confusing mess. Quantity Groups let you display a cluster of map points as one marker…until the user zooms in to get more detail. This way, users can get a feel for the big picture, and they can investigate each individual point.
An excellent quantity group function:
Using quantity groups to organize a large number of points:
Google Maps’ standard way of displaying groups, called Marker Clusterer:
2a. Choropleth Map
We’ve all seen choropleth maps but maybe didn’t know that was what they were called. They are those maps that show variations in data by displaying variations in color – like a map that shows all the states in the country color coded by something like election results. Choropleth maps are a great way to communicate large amounts of data as the color coding allows for users to easily digest patterns and trends in your data.
Using choropleth maps to display election data, state by state:
Using a standard shape to more accurately display information:
Displaying census data is a great way to use a choropleth map:
Interactive choropleth map.
2b. Clustering Maps
Say you want to give audiences an idea of relative density for population, energy use, or just about anything across a geographic area. Clustering Maps are an incredibly easy and effective way to get the point across, allowing you to customize the view in all sorts of ways, presenting data points as clusters of different sizes to indicate density.
A clustering map of all meteorites that have fallen to Earth:
A dynamic cluster map showing a data trend over time:
Showing social media density in New York City after Hurricane Sandy:
Heatmaps are technically another type of Choropleth map, using color to communicate relative concentration of a range of data values. But say you want to share information such as how people move their mouse on a webpage or statistics that are not delineated by geographic boundaries; a heatmap’s organic display (i.e. lacking any predefined bounds) is a great way to visually communicate relative concentrations.
Visualizing local information, like commuting times, with heatmaps:
Statistics, like flood data, can be visualized well with a heat map:
Using color-coded contour lines to visualize elevation:
Here’s a real-time example of a mouse movement heat map:
A Note About Base Map Styles
In addition to displaying your data in certain ways on a map, there is also a lot of flexibility with how the map itself looks. There are some absolutely incredible tools out there for base map styling. Here are a couple of fun links that illustrate just how much latitude (pun intended…) there is when it comes to choosing a base map style.
TileMill offers an astounding number of options for map styling:
Stamen offers some interesting styles as well:
The Tip of the Iceberg
This is just a peek into a few examples from an incredible range options out there for visualizing data on maps. The best part is that most of the tools used to create the examples above are open-source and freely available to test and use. None of them uses Flash, making them very flexible for desktop and mobile display, and new tools are being created all the time.
What this means for you, is that if you want to communicate using interactive maps and data, it’s easier than ever to integrate them into your website. Do so in a strongly-branded way, and your point will come across more effectively.
It’s no secret that data visualization is hot right now. And it should be…from the public sector to nonprofits and private enterprise, data and how it is used is remaking our world. Perhaps nowhere is data more popular than data visualization, where the design-minded dedicate themselves to charting just about anything. All of which begs the inevitable question, is data visualization a passing fad, geared to dress up otherwise unappealing information? Or does it underscore our deeper need for people to simplify information, organize it and make it more accessible so that we can increase our understanding of the world around us?
Put me the latter camp. Data visualization and data design are about the age-old search to effectively balance form and function. Form (in this case, how our data is designed) challenges us to make information more visual and interesting to those who would not otherwise find it so. And that, in turn, increases understanding. Function (in this case, how that data can be put to use) demands that we make the information we design meaningful and useful. That’s the beauty of design—it serves both form and function. And successfully designing data visualizations that delivers relevant, meaningful, and useful experiences with dense information requires balancing our design choices between these two priorities.
At Constructive, we’ve been fortunate to work with some really amazing organizations doing ambitious things with data—from measuring global environmental performance and exploring the impact of climate change on economic output to tracking the global response to tuberculosis. Based on these and other experiences I wanted to hopefully demystify what can be a daunting exercise by sharing some of the things we’ve learned over the years as we continue on our never-ending quest to improve our process for designing with data for clients.
Start By Asking One Fundamental Question
Every data visualization challenge is different. Some are simple, geometric abstractions like pie charts, scatter diagrams or area charts that help clarify phenomena from a larger data set. Other visualizations such as narrative infographics are less about a purely objective look at the data, taking an illustrative approach to promote greater understanding of a complex process or system. Whatever the case may be, it’s helpful to start starting with one simple question: “Why is this information meaningful to the audience?” Because ultimately, it’s about meeting the audience where they are. As communicators and designers, we need to take the complexity of the numbers, process or ecosystem and distill it into something engaging and meaningful for the audience.
Constructive’s process for designing with data is rooted in the strategic approach we take to designing for any medium or content, which like many design processes, consists of four phases: Research, Strategy, Exploration, and Execution. For data design, the key is to be not just willing, but eager to dig into the numbers and make sense of them. To embrace their complexity so that we can work with our clients to find effective ways to present them so that they can use their data to increase understanding, strengthen their brand narrative, and ultimately motivate audiences to action.
Once we’ve started with this simple question and used it to contextualize our thinking and inform our decisions, here’s how we tailor our design process to create effective communications and experiences with data.
Step 1: Design Research
As with all research, effective design research requires that we ask the right questions. So, start by taking a step back from the data itself and discuss the project with stakeholders to identify broader goals for the work. What information are we trying to communicate? How does it fit into achieving broader organizational goals? Who are our audiences and what are their levels of expertise with our subject matter? What’s their level of data literacy and visual literacy?
Once you have answers to top-level strategic questions like these you can dig deeper into researching to find answers to data-specific questions: Is our data currently organized in a way that’s easy to understand? What are the top-level takeaways we need to extract and elevate? What are the different types of visualizations we can use to to communicate our ideas? How is the data structured, and how flexibly can we apply it? The goal of this research is to immerse ourselves—to understand our organizational goals and our audience, absorb everything we can, and then approach designing solutions in ways that align the interests of the brand and the audience.
Step 2: Design Strategy
Now we’re ready to focus on developing a design strategy that follows through on our research. First, start by creating a communication strategy: define the purpose of the work based on our research and what factors will go into designing and delivering a meaningful experience? Where will our audience be? Will they have time to do a deep dive into our data or is it more of a high-level quick take? Develop a content strategy: how should our information be organized or edited to make it more accessible and understandable for our audience? Can we simplify ideas and concepts without compromising the integrity of our data? And finally, develop a design strategy: techniques can we use to create a more engaging presentation? How does the design of our brand impact design execution? And if it’s an interactive visualization, how do we want audiences to interact with out data? And don’t forget technology strategy: What systems are used to produce or store the data? What are the right digital tools to deliver them? The goal is to think holistically across multiple strategies that all influence how our data will be experienced and what that means for both our audience and our brand—taking each into account and finding the right mix to effectively balance them.
Step 3: Design Exploration
So we’ve got a good idea of what the issues and ideas are, why they’re important, and how they’re going to be used. We have a sense of what design approaches are likely to work best. It’s finally time to start iterating on design concepts that make our ideas tangible! At Constructive, we prefer rapid prototyping to get as many ideas out there quickly—because especially when designing and building with data, the costs of going down the wrong path can be significant. For us, this means starting with pencil sketches to quickly get our ideas out so they can be discussed. For projects with more complex data visualizations or data tools, we usually create information architecture and wireframes to that provide a greater level of detail and interaction. Once we’ve got our structure, hierarchy, and functionality in place, we’re ready to jump into look and feel, adding visual style by choosing the appropriate color, fonts, iconography, etc. The key here is to work from the outside in; start with basic, high-level concepting, collaborate to develop the structural elements; then gradually hone in on the details.
Step 4: Design Execution
As they say, without proper execution, even the best strategy is useless. So, making sure you have the right team in place to execute the project is critical—particularly for interactive visualizations that require integration with outside data systems and complex development. Execution for data design projects follows the same approach that all design work takes: design, refine, produce. In the case of designing data visualizations, it’s incredibly important to emphasize content accuracy and legibility—especially because data design can require communicating complex information in tight spaces or with a lot of competing elements. We should also design for flexibility to extend our work across other parts of our communications and brand, so plan ahead and consider how visualizations might be exported or adjusted to be used in other mediums. And be sure you test your work! If we’re working in print, reproduce it in as close to the final format as possible. And if it’s interactive, make sure you allocate extra time to the QA process if there’s much interactivity with your data.
Wrapping it Up
So that’s our approach to designing data visualizations, and we’ve found it consistently yields the best results for our clients and ourselves. Of course, there are a number of software applications that promise to make producing data visualizations easy, from Excel to Google Charts to Tableau, and beyond. And by and large, these are excellent tools. But if there’s any one takeaway I’d like to leave you with, it would be this: great data visualizations don’t make themselves. Short-cuts usually just short-change your results. So if creating data visualizations with impact is your highest priority, whether you’re doing the work yourself or partnering with someone do it for you, you would do well to commit to a strategic design process.
Data Visualization, or DataViz is a hot topic! Recently, the Nonprofit Technology Network (NTEN) shared our recent series reviewing 6 DataViz tools we like, and its popularity made me realize how much of a hunger there is to make good sense what makes for effective data visualization. More than ever, brands are relying on data to tell their stories. Each has to create clarity around their data to better connect with their audiences. And each does so in different ways.
Over the years that we’ve spent helping a lot of different clients put data at the heart of their brands, and there are 3 key things we’ve learned that I believe are essential to doing so effectively. Here they are:
1. Focus on the Why, Then the How
Seems pretty simple, but when you see how many DataViz tools there are to choose from: Google Charts, Highcharts,InfoVis Toolkit, Mapbox and everything in-between—you quickly realize the potential for DataViz disasters that throw every bell and whistle at you. But the “how” of bringing DataViz to life is actually the easiest choice.
Like any design challenge, what’s important in data visualization is to focus first on the why: really understanding what’s meaningful to audiences in the data, how it’s meaningful to the brand, then focusing exclusively on just that. It’s formally known as eliminating the Chartjunk. By first boiling things down to what’s really essential, you’re in a much better position to start thinking about which tool will be the best fit to bring it to life.
2. Avoid Unnecessary Illustration
As Edward Tufte says, “Kill the Frills and Get to the Point.” But with today’s infographic overload, it’s gotten to the point where any illustration with icons and numbers is called an “infographic”—when more often than not it’s something really stupid. Others get so deep in the weeds, it’s hard to understand what they’re trying to say. What’s worse, pretty straightforward data design has become so overwrought with illustration, it gets in the way of understanding the data. Take the example below, touted in this article that I find to be mostly off the mark.
We should be able to understand the answer to this very simple question in seconds. Instead, I’m distracted by a poor attempt at meaningless decoration and beautification. Good data visualization should simplify things to speed understanding. Too often, decoration and beautification get in the way by emphasizing style over substance. Focus on the essential and strip away the fluff like these excellent examples do, the goal isn’t to get your inner Picasso on.
3. Make Data Design Part of Your Brand.
For financial services companies and policy & advocacy nonprofits in particular, clear data is essential to effectively communicating with the audience. And for these brands, it usually involves lots of analysts or research experts plugging away in Excel or proprietary software, crunching numbers and turning them into good old-fashioned charts and graphs. Too often however, companies drop their data into critical communications like pitchbooks and policy reports, settling for whatever look the system they’re using spits out.
But if you’re a brand that adds value with financial analysis and research, or by creating clarity around public policy, the data is one of the most important parts of your brand. It’s what convinces audiences of the merit of your insights. Relying on generic system generated data design to make your case is an unquestioned fail. Brand standards exist for a reason, and making data, even if it’s “boring” charts and graphs, a carefully executed part of the brand is essential to reflecting the expertise and value your brand stands for. Doing otherwise just undermines your credibility.
We’re awash in data these days. Design’s job is to make good sense of it. By focusing on what’s essential to your audience and your brand, not only will you more effectively make your case, you’ll also have greater impact.
Data is an essential part of how nonprofits communicate the need for or impact of a program, grant or donation, or campaign. At the most basic level, data visualization and information design aim at making data and concepts quickly intelligible by creating visual relationships. But data can do much more: it can strengthen an organization’s story and message, make a solid case for its work, and be a powerful tool for strengthening audience engagement. At its best, information visualization does much more than communicate something quantitative, it surprises and delights, creating something audiences actively seek out and share.
As with any design challenge, when you’re considering the tone and approach for data visualization and information design, it’s always a good idea to view it from your audience’s perspective. Effectiveness comes down to how meaningfully your message resonates, and when it comes to visualizations, this means appreciating your audience’s comfort level and interest in things like the hard numbers and complex processes. For example, if your audience loves what you stand for, but isn’t inclined to dig too deeply into facts and figures, you’ve just wasted space and missed a great opportunity to persuade them.
When we’re approaching design jobs for our non-profit clients that include visualizations, here are 3 key considerations we start with that you may find helpful in selecting an approach to information graphics and data visualizations that’s right for you, and your audience.
1. What’s the goal, and what would you like your audiences to do or think?
Are you attempting to persuade an individual to donate on your site? Are you trying to impress a foundation grants manager with you track record? Think about the kind of data that might tilt your audience to your side. All a prospective donor may want to see is a single, inspiring statistic that suggest to her what her dollars can accomplish. If so, offer a simple visualization and make sure she doesn’t miss it. A foundation grants manager, however may expect comprehensive data about impact over time.
Sometimes you might strike a balance between the two. In a website for Columbia University’s Office of Alumni & Development, we present six strong, yet simple points about donor impact—each a testament and promise to what more donations can do. No complex visualizations or comprehensive data needed, but enough information to tell a complete story without distracting them from the goal of persuading audiences to become a donor.
2. What are your audiences wants and needs, and what would they find useful or memorable?
Audiences are more likely to remember and share data they find interesting and useful. Numbers can often be a bit dry, and if you’re trying to explain a complex process that’s vital to the mission, spelling it all out in agonizing detail probably isn’t a great idea. So find an interesting angle to your data—the aspect that audiences always wanted to know but never thought to ask.
A lot of people may not be familiar with the World Cocoa Foundation (WCF), but many people love chocolate and have some interest in how it’s produced. In redesigning the WCF’s website, we created a process diagramthat walks visitors step by step through the different stages of chocolate-making with images, illustrations, and mouse-over areas that reveal even more information about the process. The end result creates a visual shorthand for explaining the entire cocoa value chain, while bringing audiences closer to the critical issues and people involved in bringing chocolate from farm to table.
3. What level of complexity can your audience handle?
If you’re trying to educate an audience about a complex issue, perhaps with serious policy implications, consider your audience’s level of familiarity with your subject. This will dictate not just how comfortable they feel with the data and concepts, but also how much of an incentive they have to want to know more. While designing data visualizations for casual audience’s might take a more simplified approach, if you’re trying to persuade policy wonks or economic experts, a deep dive might be just what the doctor ordered.
For Securing America’s Future Energy (SAFE)’s 2012 Congestion Report, we created a concept diagram that takes the complex, myriad existing technologies that would need to be applied to the transportation system in order to reduce congestion and energy consumption. Created for an audience of policy makers and technology experts in the smart-grid and clean-tech industries, the visualization delivers the depth of interaction between numerous different technologies, quickly painting a picture that’s comprehensive, detailed, and helps SAFE’s audience envision what the future of transportation can be if they support the non-profit’s initiatives.
While there’s a lot more that goes into designing effective dataviz, adopting an audience-centric approach is a great first step in creating visualizations that are appropriate, useful, delightful and persuasive—that harness the persuasive power of data and information visualization to make your case. Information design is, after all, a form of communication, persuasion and marketing.
UPDATE: While many of the tools featured in this 2012 article are still effective and have developed to become even more useful, you may be interested in our more recent series on Interactive Data Viz Tools.
Complex Data Visualization Tools
Welcome back for the second part of my series on interactive data visualization (dataviz) tools. In Part 1, we covered three cool tools for visualizing charts and graphs and many other data types on a webpage. In part two, we take a look at three more tools that are a bit more complex but have some incredible data visualization capabilities.
- jQuery Visualize (Part 1)
- Google Charts (Part 1)
- Highcharts (Part 1)
- Simile Exhibit
Exhibit is a very robust and customizable offering. One of its main strengths is a unique approach to rendering the data. In addition to easy-to-use filtering, sorting and search tools, it allows you to use an HTML template (called a “lens” in Exhibit) to be constructed to get everything on the page looking exactly how you want it. It’s almost like a mini-CMS for dataviz where you can access your data through attribute values directly in the lens. For projects that require a high degree of sensitivity to look and feel, this extreme level of flexibility for building data visualizations is fantastic.
- Visualization Types Supported: Line Graphs, Maps, Scatter Plots, Multi-Filterable Lists, Timelines, Timeplots and more…with widgets!
- Data Input Sources: JSON, Spreadsheet
- Data Output: HTML
- Styling Options: CSS
Flexible & Powerful Approach to Design
I really like the approach of Exhibit, where data is presented through a “lens” – an HTML template shell that elements are placed into. This makes the system completely customizable and CSS styleable, which means designers love it, and creating consistency for clients’ brands is a snap.
Letting users filter your data by any number of criteria is incredibly useful, and turns your information from static content into a real interactive feature. Filtering is built right into Exhibit and it’s easy to implement. Server-side filtering can be a chore (not to mention expensive), so Exhibit really stands out in making user filtering incredibly quick and easy. The same goes for sorting and search. Exhibit makes it very easy to give your site users control over getting exactly the view of your data they want, and therefore a more valuable understanding of why it’s important.
Jumping into complex dataviz tools can be an undertaking and requires some trial and error. Exhibit really speeds the process with great documentation on their website and some excellent beginner tutorials.
Want top push Exhibit even further? You can add functionality with widgets. There are widgets available for bibliography and citations collections, a CoverFlow style image viewer, timelines, and timeplots—just to name a few. This kind of product extension makes Exhibit one of the most robust and flexible options out there for data visualization.
Steep Learning Curve
- Visualization Types Supported: Area Chart, Bar Chart, Pie Chart, Tree Map, Force Directed, Radial Graph, Sunburst, Icicle, Space Tree, Hyper Tree
- Data Input: JSON
- Output: Canvas
Unique Chart Types
I really like the various non-standard visualization types available in the InfoVis Toolkit. This tool might be overkill for the occasional pie chart but could really shine when you have to approach display options for more complicated data.
Animations / Interactions
The animations are a great addition to these charts and graphs. They lend a nice Flash-like quality to these charts that is really nice. And the ability to interact with these graphs – dragging stuff around and manipulating the graph (like this one) is very cool and could be really useful.
D3 isn’t really like the others. It is not a “ready-to-go” charting tool but rather a framework for drawing data-based elements. The D3 website says it best: “Rather than provide a monolithic system with all the features anyone may ever need, D3 solves only the crux of the problem: efficient manipulation of documents based on data.”
And, since you can create SVG graphics, you could use this output anywhere, including print applications. D3 could be the center of a slick web/print publishing workflow for a graph heavy project.
- Visualization Types Supported: All? The sky’s the limit.
- Data Input: JSON, GeoJSON, CSV
- Output: HTML, SVG
You can pretty much use D3.js to draw anything you want based on data. This is an amazing tool for people who create new data visualizations and visualizations built on really large datasets.
Very cool that you can tell D3 to create HTML items as well as SVG. Definitely opens to the door to styling with CSS, which is ideal.
These six products are just the tip of the iceberg for dataviz. There are dozens of other great products out there. But these should give you a good idea of what is happening and a sense of the range of capabilities and complexity of the interactive dataviz world.
It is so exciting to see so many open-source data visualization projects and the list is growing every day. As browsers continue to support more and more robust visual features and computers and mobile devices continue to get more powerful, I’m sure we can expect the world of data visualization to get even more sophisticated and expansive.