Designing a Color Profile For Open Data

Kari Goin
UX Academic
Published in
3 min readMar 4, 2019

Cities have lots of data. Civic software foundation is a group of volunteers who come together to build stories from city data to enable transparency in analytical models with live data sources that power shareable visualizations on the web.

This article is a case study where I wanted to share how I actually do stuff with color. Curious about colors for educators? Check out an article I wrote: color library for educators.

This is a great quote from an article I referenced when building a color profile for the open data platform, civic. I highly recommend reading Lisa’s article on colors for data visualization if you are interested in colors for data visualizations.

“So how should you choose colors for your project? I think in data vis, there are two challenges regarding color: Sequential/diverging data and qualitative data. To explain them: Sequential/diverging data is data that progresses from low to high and therefore requires gradients. Qualitative data are categories and require colors which scream: “I’m by myself and have nothing to do with all these other colors here!” (Rost, 2016).

Check it out:

Qualitative data profile:
About: Colors can stand alone and each has significant contrast against the other

You can and should check out all live and interactive data I show in these examples from the civic software foundation.

Here is an example of the qualitative data profile using all five colors together:

Civic Color Profile used in interactive data visualization

The colors can also be used individually:

Diverging color profile:
About: colors go from dark to light. Used for emphasis and contrast, two extra colors were added based on data visualization needs, green and orange.

Sequential color profile in sets of 9:
About: I used colorbrewer to help me create the map profiles. Colors start at white and end with black.

In this case study, color is used to build brand awareness and create consistent look and feel across team projects. Color is used to help the data tell its story.

References:

Rost, L., C. (2016). Your Friendly Guide to Colors in Data Visualisation. Retrieved from: https://lisacharlotterost.github.io/2016/04/22/Colors-for-DataVis/

Civic Software Foundation. (2018). Making Public Information Public Knowledge: Reimagining open data for the web. Retrieved from: http://civicplatform.org/

--

--

Kari Goin
UX Academic

Senior UX Designer and Educator. UX is for Everyone.