Using Observable JavaScript in Nextjournal

The Observable JavaScript runtime has one big advantage over regular JavaScript when using notebooks: dataflow.

To create a new cell, type the following into a paragraph:

```observablejs

followed by a space.

That creates a new code block:

Observable Javascript

Observable Javascript supports require, which lets you import JavaScript modules into your notebook. 

d3 = require("d3@5") // Format: module@version
Observable Javascript

Now you can use the module:

Cereals = d3.csv("https://gist.githubusercontent.com/SFU-IAT355/87a05902375cb5523d31a6197d607cb3/raw/da6a2294b0ad2fe6bec5759213fefb302c7af2b2/CerealsVEGAtutorial.csv")
Observable Javascript

Observable JavaScript can plot too.

VegaLite = require('@observablehq/vega-lite')
Observable Javascript
VegaLite({
  data: {values: Cereals},
  mark: "bar",
  encoding: {
    y: {field: "name", type: "nominal"},
    x: {field: "protein", type: "quantitative"}
  }
})
Observable Javascript
Runtimes (1)