---
title: Observable
subtitle: Inputs and Other Stuff
format: dashboard
theme: lux
---


```{ojs}
//| output: false
data = FileAttachment("palmer-penguins.csv").csv({ typed: true })
```

## {.sidebar}

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

viewof mute = Inputs.toggle({label: "Mute"})
viewof clicks = Inputs.button("Click me")
viewof flavor = Inputs.radio(["salty", "sweet", "bitter", "sour", "umami"], {label: "Flavor"})
viewof n = Inputs.range([0, 255], {step: 1, label: "Favorite number"})
viewof homeState = Inputs.select([null].concat(penguins), {label: "Home state"})
viewof name = Inputs.text({label: "Name", placeholder: "What’s your name?"})
viewof bio = Inputs.textarea({label: "Biography", placeholder: "What’s your story?"})
viewof birthday = Inputs.date({label: "Birthday"})
viewof color = Inputs.color({label: "Favorite color", value: "#4682b4"})
viewof file = Inputs.file({label: "CSV file", accept: ".csv", required: true})
viewof search = Inputs.search(penguins, {placeholder: "Search Penguins"})

```

##


```{ojs}
//| output: false
filtered = data.filter(function(penguin) {
  return bill_length_min < penguin.bill_length_mm &&
         islands.includes(penguin.island);
})
```


```{ojs}
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(),
    ]
  }
)
```