Published unlisted
Edited
Sep 28, 2021
1 star
Insert cell
Insert cell
Insert cell
Insert cell
viewof i = Inputs.input("")
Insert cell
Inputs.bind(
Inputs.select(animal_categories, { label: "Select Your Favorite" }),
viewof i
)
Insert cell
Inputs.bind(
Inputs.select(notes, {
label: "Filter by Notes"
}),
viewof i
)
Insert cell
Inputs.table(filtered_list)
Insert cell
filtered_list = animals.filter(function (animals) {
if (i == "") {
return animals;
}
if (i == "animal") {
return animals;
}
if (animal_categories.includes(i) == true) {
return animals.category == i;
}
if (notes.includes(i) == true) {
return animals.notes == i;
}
else {
return "whoops";
}
})
Insert cell
animals = [
{category: "cat", notes: "*", type: "Siamese"},
{category: "cat", notes: "*", type: "Persian"},
{category: "cat", notes: "*", type: "Maine Coon"},
{category: "cat", notes: "*", type: "Ragdoll"},
{category: "cat", notes: "*", type: "Bengal"},
{category: "cat", notes: "", type: "Abyssinian"},
{category: "cat", notes: "", type: "Birman"},
{category: "cat", notes: "", type: "Oriental Shorthair"},
{category: "cat", notes: "", type: "Sphynx"},
{category: "cat", notes: "", type: "Devon Rex"},
{category: "cat", notes: "*", type: "Himalayan"},
{category: "cat", notes: "*", type: "American Shorthair"},
{category: "cat", notes: "*", type: "other"},
{category: "dog", notes: "*", type: "Labrador Retrievers"},
{category: "dog", notes: "*", type: "German Shepherds"},
{category: "dog", notes: "", type: "Golden Retrievers"},
{category: "dog", notes: "", type: "French Bulldogs"},
{category: "dog", notes: "", type: "Bulldogs"},
{category: "dog", notes: "", type: "Poodles"},
{category: "dog", notes: "*", type: "Beagles"},
{category: "dog", notes: "*", type: "Rottweilers"},
{category: "dog", notes: "*", type: "German Shorthaired Pointers"},
{category: "dog", notes: "*", type: "Pembroke Welse Corgis"},
{category: "dog", notes: "*", type: "other"}
]
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more