A handful of essential chart types can carry you surprisingly far when analyzing, exploring, and communicating with data. This is why there are some common chart types like bar charts and scatterplots are an indispensable part of every analyst’s toolbox.

In this post, we outline five essential charts that you can build with just a few lines of Observable Plot code. Observable Plot, our open-source JavaScript library, is designed for exploratory data analysis. We also share some snippets of Plot code to help get you started with visualizing data. All of these snippets are modular, so you can easily open a new Observable Notebook to start exploring and visualizing data — simply choose the chart type in a notebook and the snippet will be added automatically.

So whether you’re just learning Observable Plot, or need to refresh your memory, this guide can help you quickly understand how to build some essential data visualizations.

Core concepts in Observable Plot

Here’s a quick overview of how Plot code is structured:

  • Plot.plot() initializes the plot library and renders a Plot chart.

  • The mark specifies the geometric shape used to represent the data. In the below example, dots are added to represent data in a scatterplot.

  • Plot favors data in tidy format, structured as an array of objects. You can also use an Apache Arrow table as the input data.

Keep in mind, you can also organize Plot code in mark.plot() order, which you’ll see in some of our Plot documentation and examples. In this alternate style, the equivalent of the code above looks like this: 

Plot.dot(cars, {x: "weight", y: "mpg"}).plot()

How to build a bar chart

When most people think of charts, they often think of the bar chart. Bar charts are a reliable and dependable tool for visualizing and comparing values by category. They are among the most common charts used by data analysts in dashboards and reporting.

In Observable Plot, you can use either barY for a vertical bar chart, or barX for a horizontal bar chart. You can specify the sorting you’re looking for with the sort option. Check out this example of Observable Plot code, which displays the frequency of letters used in English, sorted by descending frequency:

Plot.plot({
  marks: [
    Plot.barY(alphabet, { x: "letter", y: "frequency", sort: { x: "-y" } })
  ]
})

How to build a scatterplot

Scatterplots are a workhorse for showing the relationship between two quantitative fields. In Observable Plot, you can use the dot mark to quickly build a scatterplot, visualizing observations across both x and y axes. The dot mark supports a vast array of options, including for custom dot size, symbol, opacity, and color blend mode. Check out the below example of a scatterplot built with Observable Plot, which visualizes the relationship between car gas mileage and horsepower:

Plot.plot({
  marks: [Plot.dot(cars, { x: "power (hp)", y: "economy (mpg)" })]
})

How to build a line chart

Another common chart used in data analysis is the line chart, which visualizes quantitative or temporal observations by interpolating between adjacent data points. Many analysts rely on line charts to show trends over time, such as for stock prices or temperature readings. In Observable Plot, you can use the line mark to build a line chart — check out the code snippet below, visualizing the change of Apple’s stock price over time. And explore the many options to customize lines in Plot, including twenty different built-in interpolation methods!

Plot.plot({
  grid: true,
  marks: [Plot.lineY(aapl, { x: "Date", y: "Close" })]
})

How to build a histogram

Histograms are great for grouping quantitative values, and visualizing how often observations fall into those intervals, which are known as bins. Binning is the process of grouping values across a continuous range into discrete intervals.

Histograms are frequently used in data explorations as they allow you to quickly see the distribution of a continuous dataset and get an immediate sense of important statistics like central tendency, spread, skew, outliers, and multimodality. By pairing bin transforms with the rect mark, you can easily build histograms with Observable Plot.

The below example code generates a histogram that visualizes observations of penguins by body mass:

Plot.plot({
  marks: [Plot.rectY(penguins, Plot.binX({ y: "count" }, { x: "body_mass_g" }))]
})

This might look a bit tricky at first, since it combines the rect mark with a bin transform. Here’s a breakdown of what’s happening in each part of the code above: 

Here is the histogram generated by the code above:

How to build a heatmap

Heatmaps are very effective at highlighting differences in values across a grid or map. They’re commonly deployed in data explorations to quickly spot patterns across two dimensions, or when observations are too dense to visualize effectively with a scatterplot. Similar to histograms, building heatmaps in Observable Plot uses the bin transform and rect mark. In the code snippet below, you can see an example of a heatmap that visualizes the relationship between the height and weight of Olympic athletes. 

Plot.plot({
  color: {scheme: "YlGnBu"},
  marks: [
    Plot.rectY(
      olympians,
      Plot.bin({ fill: "count" }, { x: "weight", y: "height" })
    )
  ]
})

Start building with Observable Plot

Armed with just a few handy chart types, including bars, dot, line, histogram, and heatmap, you can start exploring and analyzing your raw data. By utilizing additional features in Observable Plot, such as transforms, facets, and scales, you’ll be able to build a vast array of data visualizations, helping you turn questions about your data into clear, insightful visualizations.

Ready to roll up your sleeves and get started on your journey to develop data visualizations with Observable Plot? By copying the above snippets of Observable Plot code, you can dive right into your next data exploration and start making sense of your data. You can also browse the Observable Plot gallery to get inspired, and find examples that you can fork and customize so you can hit the ground running.

Learn more about developing visualizations with Observable Plot with these resources: