Google Cloud Data Vizualization

I designed the component library for Google Cloud.

For Google Cloud, the key users are developers who have a deep understanding of the systems but want to see a bird's eye view of large amounts of fast-moving data. The charts and graphs help abstract, distill and hilight area of interest so that developers can take action.

For the chart on the left: Each of the lines represents a server in a group. You can re-sort the table-legen by clicking on the column headers and then turn each line item on or off according to your chosen metric. This allows for a much more interactive way of delving into the seemingly complicated.

Tool tips also have a dedicated space to avoid covering the data you're trying to read and the events have their own lane in the graph's timeline. Numbers are aligned on the right-hand side, indicating what's happening right now.

Data visualization

Logs to metrics: If you do find an anomalous metric in one of your resources. it might be useful to look at the logs to get a more detailed transcript of related events.

Scatterplot as time series: Although not as immediately legible to people who normally look at line graphs in time series, scatterplots are not as problematic to read because they are not dependent on the line connections to tell a story (that may be erroneous). If a dot is present the data exists. If the data is not there, a dot won't be present.

Stacked bar: An extremely effective way to show totals in a specified time frame (days, minutes, seconds).

Events: I developed this idea as an extension of how music is showed in piano roll notation. On a multi-line each event can show its start, end and duration. Represented on their own lines color can let the data breath. Events that overlap in a condensed format do so at a reduced opacity to show the density.

Events: Statuses can be shown as "right now" and as an historical comparision. For exmple, all services show as working now, however App Engine and Cloud SQL have had various degrees of outage over the past week.

Events: When designing a chart type for different applications it requires sensitivity to how that data will be viewed in context. Here is an example of an event graph embedded in the "VPN" area of Cloud.

Sankey diagrams for load balancing: This type of graph is useful to show flow between hierarchical items of a similar nature in a congested space.

Hilighting anomolies and areas of interest: The best way to highlight something is to de-emphasize things you won't want to hilight. This allows for ease-of-reading.

Showing missing data: You can't just connect a line to the next point when there's missing data. It doesn't tell the trust and connecting the line negates the data that could have been. Perhaps the value was significantly higher or lower than the average between the two non-missing values? It's also different than a zero value or a null value. Since the value cannot be ascertained a reasonable solution is to show a dotted line that signifies that something is missing.

Showing clusters: Sometimes it's better to know how many things aren't working than it is to know what is specifically not working. This diagram can show quite a bit of information about a Cassandra Ring. You can, of course, drill down into the information if there's an interesting pattern.

Colin Owens
2017