<aside> ❗ In case you get stuck with this tutorial, the Q&A: Making visualisations with the Grammar of Graphics live session on Wednesday 19 October (between 15h30 and 16h30) is a good occasion to pose your questions. But you can always add your questions directly as comments in this module.
</aside>
Observable Plot is a JavaScript library for data visualisation based on the Grammar of Graphics. It can be used as a stand alone JavaScript library, but it was developed by and it is conveniently integrated in the Observable platform.
Observable is a platform to make interactive notebooks based on JavaScript. It is focussed on data analysis and data visualisation, and Observable Plot was developed to let users of the platform quickly add data visualisations to their Observable notebooks.
Getting started with Observable and Observable Plot is as easy as creating an account on the platform. Click the “Sign up for free” button on the left or the “Sign up” button in the top right of the Observable home page to create an account.
Before making any visualisations with Observable Plot, you should get used to the way Observable notebooks work. Start by creating a new notebook from your Observable home screen by clicking the “New” button under Recent notebooks, or navigate directly to observablehq.com/new.
In the dialogue that pops up you can select a template with prefilled content. Leave the blank template selected and click the Create notebook button in the bottom right.
A blank notebook will open, with a single cell with “# Untitled” as content.
Change the “Untitled” title to something else (keep the “#” in place) and click the blue arrow on the right of the cell.
You have just edited a cell and ran it in Observable. Cells are the building blocks of Observable notebooks, and can contain HTML, JavaScript or Markdown.
<aside> ❗ HTML (HyperText Markup Language) is the language for describing the structure and content of a web page (see the HTML 101 module of the Accessibility for data visualisation training for an introduction). Markdown is a language that was developed to make writing HTML easier. In Observable, it allows you to quickly add headers, lists with bullet points, bold and italic text, and more. See the Markdown quick reference notebook for more information.
</aside>
In this tutorial, you are going to use JavaScript cells only (accept for the first cell, which contains the title of the notebook as Markdown).
<aside> 🔗 You can find an Observable version of this tutorial in this notebook. You can edit the cells in this notebook even without an Observable account, but your edits will not be saved. When you do have an Observable account, you can duplicate the notebook. To do so, click the “Fork” button in the top right of the notebook. This will create a copy of the notebook in your own account.
</aside>
To make a visualisation with Observable Plot, you can connect to online data sources, but you can also upload files to Observable. We are going to use the latter option.