What is Plot?

Observable Plot is a free, open-source, JavaScript library for visualizing tabular data, focused on accelerating exploratory data analysis. It has a concise, memorable, yet expressive interface, featuring scales and layered marks in the grammar of graphics style popularized by Leland Wilkinson and Hadley Wickham and inspired by the earlier ideas of Jacques Bertin. And there are plenty of examples to learn from and copy-paste.

In the spirit of show don’t tell, here’s a scatterplot of body measurements of athletes from the 2016 Summer Olympics.

Fork

Plot
  .dot(olympians, {x: "weight", y: "height", stroke: "sex"})
  .plot({color: {legend: true}})

A plot specification assigns columns of data (weight, height, and sex) to visual properties of marks (x, y, and stroke). Plot does the rest! You can configure much more, if needed, but Plot’s goal is to help you get a meaningful visualization quickly to accelerate analysis.

This scatterplot suffers from overplotting: many dots are drawn in the same spot, so it’s hard to perceive density. We can fix this by applying a bin transform to group athletes of similar height and weight (and sex), and then use opacity to encode the number of athletes in the bin.

Fork

Plot.rect(olympians, Plot.bin({fillOpacity: "count"}, {x: "weight", y: "height", fill: "sex", inset: 0})).plot()

Or we could try the density mark.

Fork

Plot.density(olympians, {x: "weight", y: "height", stroke: "sex"}).plot()

A simpler take on this data is to focus on one dimension: weight. We can use the bin transform again to make a histogram with weight on the x-axis and frequency on the y-axis. This plot uses a rect mark and an implicit stack transform.

Fork

Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", fill: "sex"})).plot()

Or if we’d prefer to show the two distributions separately as small multiples, we can facet the data along y (keeping the fill encoding for consistency, and adding grid lines and a rule at y = 0 to improve readability).

Fork

Plot.plot({
  grid: true,
  marks: [
    Plot.rectY(olympians, Plot.binX({y: "count"}, {x: "weight", fill: "sex", fy: "sex"})),
    Plot.ruleY([0])
  ]
})

What can Plot do?

Because marks are composable, and because you can extend Plot with custom marks, you can make almost anything with it — much more than the charts above! The following tree diagram of the documentation gives a sense of what’s ”in the box” with Plot. Peruse our gallery of examples for more inspiration.