ObservableJS and Mermaid

1 ObservableJS

Quarto natively supports ObservableJS for interactive visualisations and analysis in the browser. OJS in quarto is documented here.

1.1 Read CSV

Specify ojs as the language. Read in a CSV file as a JSON object.

```{ojs}
data = FileAttachment("assets/diamonds.csv").csv({ typed: true})
data
```

data = FileAttachment("assets/diamonds.csv").csv({ typed: true})
data

1.2 Table

Display JSON object as a table.

viewof raw_table = Inputs.table(data)

1.3 Scatterplot

Pick the variable for point color.

viewof col = Inputs.select(["carat","cut","color","clarity","depth","table","price"],{value: "cut", multiple: false, label: "Color"})
viewof x = Inputs.select(["carat","depth","table","price"], {value: "carat", multiple: false, label: "X axis"})
viewof y = Inputs.select(["carat","depth","table","price"], {value: "depth", multiple: false, label: "Y axis"})

Plot.plot({
  color: {legend: true},
  marks: [
    Plot.dot(data, {
      x: x,
      y: y,
      stroke: col,
      title: (d) => `${d.cut}`
    })
  ],
  grid: true
})

Figure 1: Scatterplot A.

2 MermaidJS

Quarto natively supports diagrams using mermaid. Using mermaid in quarto is documented here.

2.1 Flow diagram

Specify mermaid as the language.

```{mermaid}
flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]
```

flowchart LR
  A[Hard edge] --> B(Round edge)
  B --> C{Decision}
  C --> D[Result one]
  C --> E[Result two]

2.2 Gantt charts

```{mermaid}
gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d
```

gantt
    title A Gantt Diagram
    dateFormat YYYY-MM-DD
    section Section
        A task          :a1, 2014-01-01, 30d
        Another task    :after a1, 20d
    section Another
        Task in Another :2014-01-12, 12d
        another task    :24d