Plot Cheatsheets: Interactive notebooks for learning visualization with JavaScript

Mike Freeman — Mon, 07 Feb 2022 18:25:42 +0000

Observable Plot is a robust JavaScript library to help you quickly visualize tabular data. With its concise API, you can easily layer multiple representations of your data into customizable graphics.

To help quickly grasp the universe of possibilities of the library, the Plot Cheatsheets offer an interactive way to explore the API. For example, want to understand all of the ways to adjust the spacing of your graphic? Reference the Layout cheatsheet to see all the ways to space out your chart:

Looking for the right color? Explore color schemes using the Colors cheatsheet:

The cheatsheets provide offer both an interactive reference and printable PDF for each of the foundational concepts of the library: Marks, Scales, Transforms, Layout, and Colors. The single-page views offers a quick scan through the set of possibilities:

Click here to download the full set of PDFs.

While Plot can be used in any JavaScript project, it works especially well on Observable, which is free for individuals to use. For context, Observable is a collaborative, web-based platform for data practitioners and the decision makers they empower. Our hope is to unite disparate data analytics, visualization, and science tools in order to help them make better decisions using data.

From Penguins to the Puget Sound: Rapid Data Exploration using Observable Plot

Mike Freeman — Tue, 22 Jun 2021 06:19:27 +0000

Code is an expressive medium for data exploration, but can often be time-consuming and tedious. Having spent many years of my life creating visualizations using D3, even simple charts are still laborious to construct. The release of the new open-source Observable Plot library has dramatically changed the speed at which I — and anyone — can visually explore a dataset in a JavaScript environment. Plot is built on top of D3 (by the same creators of D3), and uses smart defaults to make visually encoding your data both expressive and concise:

Because data exploration is inherently exploratory in nature, rapid iteration and experimentation are key to uncovering important information in data. This tutorial uses Observable: a free JavaScript notebook environment that helps structure and document exploration by combining code and output into a single web-document. And with that, let’s dive in!

Putting Observable Plot to Work

The first dataset for this tutorial is the (now) canonical Penguins dataset, described in detail here. We can display the dataset in Observable by creating a Table:

After seeing the tabular representation, you can begin exploring the characteristics of the data visually. The syntax of Plot allows you to express how you want to represent, or visually encode, each observation in your data. I often move through the following data exploration steps:

1. Distribution of a single variable
To assess the distribution of a given variable (e.g., flipper length), you can represent each penguin as a dot, and map from the flipper length column to the x visual channel:

2. Correlation between variables
Once you see how a single variable is distributed, you can assess its correlation with another continuous variable -- for example, is flipper length related to body mass? Again, we choose how to map between the variables in the dataset and available visual channels (e.g., x and y):

3. Relationships by groups
After assessing the correlation between two variables, you can dig a bit deeper and ask, Is this relationship consistent within different categories of my data? For example, is the relationship between flipper length and body mass consistent for each species? As you’ve already used the x and y channels, the color encoding is a way to represent the third dimension of your data:

Alternatively, you can leverage a small multiples technique by breaking the plot out into different facets:

Managing Time-Series Data

At this point, let’s shift gears and talk specifically about time-series data. Below is a dataset of the precipitation and temperature in Seattle represented as a table.

Changes over time are commonly displayed as a line — here you can see the minimum and maximum daily temperatures over a four year period:

With the daily weather fluctuations, it can be a bit difficult to process temporal trends -- luckily, Plot facilitates computing moving averages within the plotting code! Connecting the time window parameter to an Observable input, we can quickly experiment with visual outputs:

While Plot is a nice abstraction for building visualizations, it still allows you to create bespoke visualizations, such as this calendar view of the weather!

The next step in the journey is yours. Please give Observable Plot a try and let us know your feedback so that we can continue to improve the experience for everyone.

Forem: Mike Freeman

Plot Cheatsheets: Interactive notebooks for learning visualization with JavaScript

From Penguins to the Puget Sound: Rapid Data Exploration using Observable Plot

Putting Observable Plot to Work

Managing Time-Series Data