Interactivity with Observable JS

Observable JS is especially well suited for interactive data exploration and analysis. You can use it in standalone documents and websites

Example with the Palmer Penguins dataset

Code

data = FileAttachment("./data/palmer-penguins.csv").csv({ typed: true })

<!-- Create filtering function with inputs -->
viewof bill_length_min = Inputs.range(
  [32, 50], 
  {value: 35, step: 1, label: "Bill length (min):"}
)
viewof islands = Inputs.checkbox(
  ["Torgersen", "Biscoe", "Dream"], 
  { value: ["Torgersen", "Biscoe"], 
    label: "Islands:"
  }
)

<!-- Filter data -->
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})

<!-- Plot the filtered data -->
Plot.rectY(filtered, 
  Plot.binX(
    {y: "count"}, 
    {x: "body_mass_g", fill: "species", thresholds: 20}
  ))
  .plot({
    facet: {
      data: filtered,
      x: "sex",
      y: "species",
      marginRight: 80
    },
    marks: [
      Plot.frame(),
    ]
  }
)