31:T9bc,

Observable Plot is a free, open-source JavaScript library for creating data visualisations on the Web. It has a concise, easy to learn syntax that allows users to rapidly build and iterate between exploratory data visualisations.

Like Vega-Lite and the ggplot2 R package, Plot is an implementation of Leland Wilkinson’s "Grammar of Graphics" (1999, 2005), a framework for articulating the component elements of graphics. The grammar is explicit in the syntax that Plot uses to construct graphics. Marks are geometric shapes like lines, bars and dots that have particular visual properties or channels that data can be bound to. For example, columns of data can be encoded to the x-position and y-position channels of a line mark. Multiple marks can then be layered on top of each other using the same scale.

How is Plot different from D3?

Plot is for creating data visualisations on the fly. D3 is much more expressive, with a lower level of abstraction that is suited to creating custom visualisations. [Read more]

Can you only use Plot in Observable?

Plot works really well inside Observable's reactive notebooks but you can use vanilla HTML too.

What are the benefits of using Plot?

It has a concise and intuitive API
It is informed by 10 years of experience developing and maintaining D3.js
It's extensible so you can transform your data with custom functions or leverage other libraries like D3

What are the limitations of Plot?

It's still in beta
There is no support for legends or text wrapping yet
It requires D3-7
It doesn't play well with Internet Explorer

32:T85e,

Further resources

Tutorials

Videos

Help

and some great visualisations

33:T590,html`${[ Plot.plot({ height: 200, width: 570, marginTop: 40, marginRight: 40, marginLeft: 50, x: { ticks: 0, tickSize: 0, label: null }, y: { domain: [-2000, 6000], ticks: 6, grid: true, tickSize: 0, label: null }, facet: { data: panel1, x: "Setting", label: null }, fx: { domain: ["Hospital", "Care home"] }, marks: [ Plot.ruleX(panel1, { x: "Date", y: "Value", stroke: "#206095", strokeWidth: 2.5 }) ], style: {fontSize: "12px", fontFamily: "'Open Sans', sans-serif"} }), htl.html`

`, Plot.plot({ height: 200, width: 570, marginRight: 40, marginLeft: 50, marginBottom: 40, x: { ticks: [new Date("2020 03 13"), new Date("2020 08 21"), new Date("2021 01 29"), new Date("2021 07 09")], tickFormat: "%d %b %y", label: "Week ending" }, y: { domain: [-2000, 6000], ticks: 6, grid: true, tickSize: 0, label: null }, facet: { data: panel2, x: "Setting", label: null }, marks: [ Plot.ruleX(panel2, { x: "Date", y: "Value", stroke: "#206095", strokeWidth: 2.5 }) ], style: {fontSize: "12px", fontFamily: "'Open Sans', sans-serif"} }) ]}`34:[{"id":"749bae4b0f28964f141e294c3c9151f632bd2773c44606f17ce369328247426003ac81e333cafe3f049202ee6a61164d0710e5ed7ee5146ca1eacb9985a426d8","href":"https://static.observableusercontent.com/files/749bae4b0f28964f141e294c3c9151f632bd2773c44606f17ce369328247426003ac81e333cafe3f049202ee6a61164d0710e5ed7ee5146ca1eacb9985a426d8","name":"excess-deaths.csv","type":"text/csv","lastModified":1634320493956.059,"size":7461},{"id":"4395425fb29e5c161c821fe8820bf15226608c2c927c997ed166e4102bd007b1be077058cdcda3b3a53e8f7f7b8afa294a6049da38f6e6fd321e45896a4bb2f4","href":"https://static.observableusercontent.com/files/4395425fb29e5c161c821fe8820bf15226608c2c927c997ed166e4102bd007b1be077058cdcda3b3a53e8f7f7b8afa294a6049da38f6e6fd321e45896a4bb2f4","name":"animals.csv","type":"text/csv","lastModified":1634584173430.526,"size":1897},{"id":"b38a11391ea212edb4cd1fb0d61808be56fd59f19027755a93dd0a43a952c9d1b1f3624bbcc9d22528097c0ab29da64034696a4f481b5aba12d35534c7546e9f","href":"https://static.observableusercontent.com/files/b38a11391ea212edb4cd1fb0d61808be56fd59f19027755a93dd0a43a952c9d1b1f3624bbcc9d22528097c0ab29da64034696a4f481b5aba12d35534c7546e9f","name":"plot-logo.png","type":"image/png","lastModified":1634641392514.988,"size":42158},{"id":"c0572db13251a7629cf7e2832652481fe0f970537e89a4cb10c369f728954b9cf4dd7a60af60d306a588e7b17404f1c6282669a0c7fd2561fa31f51d27db6c59","href":"https://static.observableusercontent.com/files/c0572db13251a7629cf7e2832652481fe0f970537e89a4cb10c369f728954b9cf4dd7a60af60d306a588e7b17404f1c6282669a0c7fd2561fa31f51d27db6c59","name":"snippets.png","type":"image/png","lastModified":1634638667381.159,"size":21415},{"id":"45d9f9958bda50bf61d60e9a70edac54ab810daa9c66fc92237fa7a22b9bd986233af21d71edcd2f6ee1a0a255634774c2206863ca760db58344818b589e4477","href":"https://static.observableusercontent.com/files/45d9f9958bda50bf61d60e9a70edac54ab810daa9c66fc92237fa7a22b9bd986233af21d71edcd2f6ee1a0a255634774c2206863ca760db58344818b589e4477","name":"excess-deaths.png","type":"image/png","lastModified":1634657986657.969,"size":43429},{"id":"196b452eee8dafedf4cd66eedc4c379b779f8c97570263ca7555e60c1a244793723e1dc2f8529137e906aac5c7e5e8a1a67dbd0752d8ab9560ff8df180cb3384","href":"https://static.observableusercontent.com/files/196b452eee8dafedf4cd66eedc4c379b779f8c97570263ca7555e60c1a244793723e1dc2f8529137e906aac5c7e5e8a1a67dbd0752d8ab9560ff8df180cb3384","name":"lorries.csv","type":"text/csv","lastModified":1634723692275.424,"size":1733},{"id":"a6cd1b1147743bf4d3b6dc4b956cb3a34d9aa055de7fe80ff743dc4fd76052c51df839b6e0c0f3f808af6ad4212b5952e8d006f6da426acff147a1da28a540fb","href":"https://static.observableusercontent.com/files/a6cd1b1147743bf4d3b6dc4b956cb3a34d9aa055de7fe80ff743dc4fd76052c51df839b6e0c0f3f808af6ad4212b5952e8d006f6da426acff147a1da28a540fb","name":"animals.png","type":"image/png","lastModified":1634723773489.462,"size":55756},{"id":"0a691d068cf5e3c63cbb2b74d4fdcb5d4945e3597a25c12b1213257305b5c509f836c490ba6f5113df7da225f1db5f559e89b5215be5495c90c83dc018b8fd2d","href":"https://static.observableusercontent.com/files/0a691d068cf5e3c63cbb2b74d4fdcb5d4945e3597a25c12b1213257305b5c509f836c490ba6f5113df7da225f1db5f559e89b5215be5495c90c83dc018b8fd2d","name":"lorries.png","type":"image/png","lastModified":1634723700463.443,"size":45066},{"id":"2d69372d813f4cc027f68985ccc33773075057150cf608d350a2ad1ba5e9b621ccb0db0f76df7941064772b2d6e22531d2aa8b08bac990d83f8ccd1705b2c7e1","href":"https://static.observableusercontent.com/files/2d69372d813f4cc027f68985ccc33773075057150cf608d350a2ad1ba5e9b621ccb0db0f76df7941064772b2d6e22531d2aa8b08bac990d83f8ccd1705b2c7e1","name":"sailfish.jpeg","type":"image/jpeg","lastModified":1634803953243.796,"size":149562}] 2f:{"title":"Delving into Observable Plot","cells":[{"id":0,"value":"# Delving into Observable Plot","pinned":false,"hidden":false,"mode":"md"},{"id":99,"value":"$31","pinned":false,"hidden":false,"mode":"html"},{"id":2308,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2297,"value":"## Building a Plot\nWe are going to use Observable Plot to create a bar chart showing the top speed of selected marine life. We'll setup, load the data, choose a mark, fix the layout, configure the axes and add some interactivity.","pinned":false,"hidden":false,"mode":"md"},{"id":3162,"value":"toc()","pinned":false,"hidden":false,"mode":"ojs"},{"id":2312,"value":"### Imports\nThere is no need to import Plot (or D3) into Observable because it is part of the [standard library](https://observablehq.com/@observablehq/recommended-libraries). If you are creating a data visualisation in vanilla HTML you can use:\n\n~~~html\n\n\n \n \n \n \n \n

\n \n \n\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":2293,"value":"### Data\nThe dataset that we will be using derives from [speedofanimals.com](https://www.speedofanimals.com/). These are speed, mass and length measurements for a variety of animals living in the water, air and on land.\n\n

\n\nThe dataset contains 5 variables:\n\n- `name` - the common name of the animal \n- `habitat` - whether the animal lives in water, air, or on land \n- `length_cm` - the length of the animal in centimetres \n- `mass_kg` - the mass of the animal in kilograms \n- `speed_kph` - the top speed of the animal in kilometres per hour \n\nLet's [load the data into Observable](https://observablehq.com/@observablehq/file-attachments) and use *array*.map to coerce the values into the right format.","pinned":false,"hidden":false,"mode":"md"},{"id":2148,"value":"animals = (await FileAttachment(\"animals.csv\").csv()).map(d => ({\n ...d,\n length_cm: +d.length_cm, // coerce as number\n mass_kg: +d.mass_kg, // ditto\n speed_mph: +d.speed_kph * 0.62137 // convert speed to mph\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":2392,"value":"It's helpful to visualise the data in a table to check whether the formatting is correct. For example, `speed_mph` is right aligned because it is a number but `speed_kph` is still a string.","pinned":false,"hidden":false,"mode":"md"},{"id":434,"value":"viewof search = Inputs.search(animals)","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"Inputs.table(search)","pinned":false,"hidden":false,"mode":"ojs"},{"id":2416,"value":"Next we'll filter the dataset to include only marine life.","pinned":false,"hidden":false,"mode":"md"},{"id":2216,"value":"marine = animals.filter(d => d.habitat == \"Water\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2207,"value":"### Marks\n\nThere are 11 different geometric shapes or *[marks](https://observablehq.com/collection/@observablehq/plot)* to choose from but each follows the same basic template:\n\n~~~js\nPlot.plot({\n marks: [ \n // choose your mark\n ]\n })\n~~~\n\nWe want to create a bar chart showing the speed of marine life so we need the **[Plot.barX](https://observablehq.com/@observablehq/plot-bar)** mark and encode `speed_mph` to the *x*-position and `name` to the *y*-position.\n\n~~~js\nPlot.plot({\n marks: [ \n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"})\n ]\n })\n~~~","pinned":false,"hidden":false,"mode":"md"},{"id":2212,"value":"Plot.plot({\n marks: [\n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2657,"value":"

\nHave a go\n

Try creating a column chart using Plot.barY.

","pinned":false,"hidden":false,"mode":"html"},{"id":3037,"value":"// Type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":3199,"value":"Tip: in Observable you can open the 'snippets' pane to reveal all of the available marks and load a Plot template in a new code cell. \n\n

","pinned":false,"hidden":false,"mode":"html"},{"id":2223,"value":"### Layout\nYou'll notice that the names of our marine animals on the *y*-axis have been cropped so let's increase the **marginLeft**.","pinned":false,"hidden":false,"mode":"md"},{"id":2227,"value":"Plot.plot({\n marginLeft: 100, // increase the margin\n marks: [\n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2700,"value":"

\nHave a go\n

Try adjusting the marginTop, marginRight and marginBottom to see what effect it has on the chart. You can also tweak the height and width.

","pinned":false,"hidden":false,"mode":"html"},{"id":3039,"value":"// Type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2253,"value":"### Scales\nThe bars have been arranged alphabetically by name rather than by descending value. We can fix that by using *array*.sort on the *scale*.**domain** property of the *y*-position channel.","pinned":false,"hidden":false,"mode":"md"},{"id":2257,"value":"Plot.plot({\n marginLeft: 100,\n y: {\n domain: marine\n .sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))\n .map(d => d.name)\n },\n marks: [\n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"})\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":3115,"value":"

The Sailfish is widely considered to be the fastest fish in the ocean. It has clocked speeds of nearly 70 mph.

\n\n

Source: wikipedia.org

","pinned":false,"hidden":false,"mode":"html"},{"id":2724,"value":"

\nHave a go\n

Try sorting the bars by ascending value.

","pinned":false,"hidden":false,"mode":"html"},{"id":3041,"value":"// Type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2262,"value":"### Additional marks\nRather than scan the x-axis to infer the value of each bar we can append the actual value to the end using **[Plot.text](https://observablehq.com/@observablehq/plot-text)**. ","pinned":false,"hidden":false,"mode":"md"},{"id":2266,"value":"Plot.plot({\n marginLeft: 100,\n y: {\n domain: marine\n .sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))\n .map(d => d.name)\n },\n marks: [\n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"}),\n Plot.text(marine, {\n x: \"speed_mph\", \n y: \"name\", \n text: d => (d.speed_mph).toFixed(0), // supply the text \n fill: \"#FFFFFF\", // change to white\n dx: -10 // position the text\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2749,"value":"

\nHave a go\n

Try changing the colour of the text marks and pushing them to the end of the bars.

","pinned":false,"hidden":false,"mode":"html"},{"id":3043,"value":"// Type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2233,"value":"### Axes\nNow let's tidy up the chart and remove any unnecessary axis titles and ticks. We can also add a caption to show the source of the data.","pinned":false,"hidden":false,"mode":"md"},{"id":2240,"value":"Plot.plot({\n marginLeft: 100,\n x: {\n ticks: 0, // remove x-axis labels\n tickSize: 0, // drop x-axis ticks\n label: \"Speed (mph)\" // rename x-axis title\n },\n y: {\n domain: marine\n .sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))\n .map(d => d.name),\n tickSize: 0, // drop y-axis ticks\n label: null // remove y-axis title\n },\n marks: [\n Plot.barX(marine, {x: \"speed_mph\", y: \"name\"}),\n Plot.text(marine, {\n x: \"speed_mph\", \n y: \"name\", \n text: d => (d.speed_mph).toFixed(0),\n fill: \"#FFFFFF\",\n dx: -10\n }),\n Plot.ruleX([0]) // add a line through the x-axis\n ],\n caption: 'Source: speedofanimals.com' // add a source\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2761,"value":"

\nHave a go\n

Try moving the x-axis title to the centre by using labelAnchor. Ctrl-F the API reference for further options.

","pinned":false,"hidden":false,"mode":"html"},{"id":3046,"value":"// Type your code here\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2275,"value":"### Styling\nWe can also make our chart more presentable by adding some colour and increasing the text size.","pinned":false,"hidden":false,"mode":"md"},{"id":2356,"value":"Plot.plot({\n marginLeft: 120, // adjust margins\n x: {\n ticks: 0,\n tickSize: 0,\n label: \"Speed (mph)\"\n },\n y: {\n domain: marine\n .sort((a,b) => d3.descending(a.speed_mph, b.speed_mph))\n .map(d => d.name),\n tickSize: 0,\n label: null\n },\n marks: [\n Plot.barX(marine, {\n x: \"speed_mph\", \n y: \"name\",\n fill: \"#CD0C4B\" // add fill\n }),\n Plot.text(marine, {\n x: \"speed_mph\", \n y: \"name\", \n text: d => (d.speed_mph).toFixed(0),\n fill: \"#FFFFFF\",\n dx: -10\n }),\n Plot.ruleX([0])\n ],\n caption: 'Source: speedofanimals.com',\n style: { fontSize: \"12px\" } // increase text size\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":2770,"value":"

\nHave a go\n

Try downloading the plot as a .png or .svg file from the cell dropdown.

","pinned":false,"hidden":false,"mode":"html"},{"id":3128,"value":"### Exercise\nCreate a plot with one of the other measurements in the dataset (`length_cm` or `mass_kg`) or explore the speed of animals that live on land or in the air. If you are feeling adventurous try visualising the data with a different [mark](https://observablehq.com/collection/@observablehq/plot).","pinned":false,"hidden":false,"mode":"md"},{"id":3132,"value":"// Type your code here\n\n{\n // filter by habitat or choose another metric\n // const selected = animals.filter(d => d.habitat == \"Land\")\n const plot = Plot.plot({\n marks: [ \n // choose your mark\n ]\n })\n \n return plot\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":3055,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":3051,"value":"$32","pinned":false,"hidden":false,"mode":"html"},{"id":1039,"value":"---\n## Recreating some [ONS](https://onsvisual.github.io/project_cairo/index.html) graphics \n
\n---\n#### 1. HGV drivers\nThe plot below was created in D3 and shows the number of HGV drivers in employment by age group in the UK ([ONS, 2021](https://www.ons.gov.uk/visualisations/dvc1610/fig2/index.html)).\n\n

","pinned":false,"hidden":false,"mode":"md"},{"id":2986,"value":"We can recreate the chart in Plot.","pinned":false,"hidden":false,"mode":"md"},{"id":2982,"value":"{\n const lorries = (await FileAttachment(\"lorries.csv\").csv()).map(d => ({\n ...d,\n Date: new Date(d.Date),\n Value: +d.Value\n }))\n \n const plot = Plot.plot({\n height: 360,\n width: 580,\n y: {\n domain: [0,120],\n grid: true,\n tickSize: 0,\n label: \"Thousands\"\n },\n color: {\n domain: [\"Under 35\", \"36-45\", \"46-55\", \"56-65\", \"66+\"],\n range: [\"#206095\", \"#27A0CC\", \"#003C57\", \"#118C7B\", \"#A8BD3A\"]\n },\n marks: [\n Plot.line(lorries, {x: \"Date\", y: \"Value\", z: \"Age\", stroke: \"Age\", strokeWidth: 3}),\n Plot.dot(lorries, {x: \"Date\", y: \"Value\", z: \"Age\", fill: \"Age\"}),\n Plot.text(lorries, Plot.selectLast({x: \"Date\", y: \"Value\", z: \"Age\", text: \"Age\", textAnchor: \"start\", dx: 5, dy: 3, fill: \"Age\", fontSize: 14}))\n ],\n style: {fontSize: \"12px\", fontFamily: \"'Open Sans', sans-serif\", overflow: \"visible\"}\n })\n \n return plot\n \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":2977,"value":"#### 2. Excess deaths\nThe plot below was created in D3 and shows the number of excess deaths in the UK by place of occurrence ([ONS, 2021](https://www.ons.gov.uk/visualisations/dvc1617/fig3/index.html)).","pinned":false,"hidden":false,"mode":"md"},{"id":1033,"value":"

","pinned":false,"hidden":false,"mode":"html"},{"id":1511,"value":"deaths = (await FileAttachment(\"excess-deaths.csv\").csv()).map(d => ({\n ...d,\n Date: new Date(d.Date),\n Value: +d.Value\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1976,"value":"panel1 = deaths.filter(d => d.Setting == \"Care home\" || d.Setting == \"Hospital\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1979,"value":"panel2 = deaths.filter(d => d.Setting == \"Home\" || d.Setting == \"Other\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":2969,"value":"We can recreate the chart in Plot.","pinned":false,"hidden":false,"mode":"md"},{"id":1965,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":2857,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":2558,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":2566,"value":"import {swatches as Swatches} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":3151,"value":"// adapted from https://observablehq.com/@mbostock/toc\nfunction toc(selector = \"h3\", heading = \"\") {\n return Generators.observe(notify => {\n let headings = [];\n\n function observed() {\n const h = Array.from(document.querySelectorAll(selector));\n if (h.length !== headings.length || h.some((h, i) => headings[i] !== h)) {\n notify(html`${heading}

${DOM.text(h.textContent)}`,\n {onclick: e => (e.preventDefault(), h.scrollIntoView())}\n );\n })}`);\n }\n }\n\n const observer = new MutationObserver(observed);\n observer.observe(document.body, {childList: true, subtree: true});\n observed();\n return () => observer.disconnect();\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":360,"value":"style = html``","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}