Skip to content
On this page

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.

  .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.

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

Or we could try the density mark.

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.

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).

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

Library released under ISC License.