Data Visualization

Base Components

Being the lead (and only) designer on this project, I knew I wanted to create these chart components to be as scalable as possible. Part of what that included was creating a set of "base" components that would be consumed by the rest of the main chart and graph components. One benefit of this is so that updates or changes to these components in the future become very simple and easy. But the reason to create these base components is so that our entire suite of visualizations follows the same set of guidelines and visual patterns. It was almost like creating a mini design system just for data visualizations!

These set of base components included a chart-title, label, axis-labels, grid-line, grid, legend-item, legend, and chart-tooltip. These would be the basis for me to continue on and build out the rest of our charts and graphs.

Accessibility Guidelines

Because we are firm on meeting WCAG accessibility guidelines for our new design system, I was on to do some research. I was very confident about accessibility for a basic components, making sure we include things like proper color contrast and large click targets, but Data Visualization is a whole other animal. So I went off spending hours if not days of research making sure I understood the complexities of data viz, and how we needed to incorporate accessibility. My main question I wanted an answer to was: "how do we choose "aesthetic" colors that also meet a 3:1 color contrast?" Those two things were very hard to satisfy. The solution that ended up alleviating a lot of our concerns was to have a small gap in between any area that would have "touching" colors. This provides a visual barrier between the two, even if they don't meet color contrast requirements.

Bar Chart

The bar chart is the most heavily used at Nielsen, so I knew I had to get this one right. Features that would need to be included in the bar chart are having multiple series, a "stacked" version, direction for both horizontal and vertical, labels for indidual bars and "total" bars, a legend to show the names of each series, and additional labels for the chart title, axis names, and an empty state.

Again, I started by building some base components to be used just by the bar chart. For these I created a bar, which establishes the style for a single bar, a bar-group, which includes how the bars display next to each other and also in a "stacked" mode, and a base .bar-chart component that would break up the main component into smaller, easier to understand pieces.

For the main component, I would also include a variant to toggle the number of series the user would like to display in the chart, as well as hiding/showing axis labels and legends in the chart. This would make for a relatively complex component, which is why I abstracted away some of the more uncommon items into the base components, making the main one simpler and easy to use.

In addition to the component itself, I went on to make user flows and prototypes for the bar chart to describe and show how the component should work when the user interacts with it in a real application. For the hover state, I decided to go with a slight opacity on the "active" bar or bar group, showing the chart-tooltip with additional information on the side.

Line Chart

After getting bar charts out of the way, the rest would be easy! 😅 A line chart is similar to a bar chart in a lot of ways, so I decided to build it using the same structure. First I would build a base component to store some of the less common features needed for the chart, and then move on to the main component. Interestingly, I discovered there were a few additional features that would be helpful for a line chart that weren't required for the bar. This included a version for showing "area under the curve" as well as a variant for a curved vs. straight line.

Building out the rest of the variants for the main line-chart component was simple, and involved again having light/dark mode, a variant for number of series, as well as being able to hide both the chart and axis titles if needed.

Other Charts

There are a number of other charts I created for the system, but are of less importance because they are more rare. Still, I followed the same accessibility principles and used the same base components to create these in order to have a cohesive experience across the board. These include a pie chart, donut chart, gauge chart, venn diagram, and a funnel chart.