Observable.js

Interactive chart with ojs
OJS
Visualization
javascript
Published

January 1, 2023

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:"
  }
)

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


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(),
    ]
  })
Inputs.table(filtered)
Back to top