ObservableJS in Quarto

Read CSV

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

Table

viewof raw_table = Inputs.table(data)

Scatterplot

Pick the variable for point color.

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

viewof x1 = Inputs.select(["carat","depth","table","price"], {value: "carat", multiple: false, label: "X1 axis"})
viewof y1 = Inputs.select(["carat","depth","table","price"], {value: "depth", multiple: false, label: "Y1 axis"})

Plot.plot({
  color: {legend: true},
  marks: [
    Plot.dot(data, {
      x: x1,
      y: y1,
      stroke: col,
      tip: true,
      channels: {cut: "cut", color: "color", clarity: "clarity"}
    })
  ],
  grid: true
})

Figure 1: Scatterplot A.

viewof x2 = Inputs.select(["carat","depth","table","price"], {value: "carat", multiple: false, label: "X2 axis"})
viewof y2 = Inputs.select(["carat","depth","table","price"], {value: "price", multiple: false, label: "Y2 axis"})

Plot.plot({
  color: {legend: true},
  marks: [
    Plot.dot(data, {
      x: x2,
      y: y2,
      stroke: col,
      tip: true,
      channels: {cut: "cut", color: "color", clarity: "clarity"}
    })
  ],
  grid: true
})

Figure 2: Scatterplot B.

Tooltips are documented here.