penguins = FileAttachment("penguins.csv").csv({typed: true})
Inputs.table(penguins)
Inputs.table(penguins, {columns: ["species", "culmen_depth_mm", "culmen_length_mm"]})
Inputs.table(penguins, {sort: "body_mass_g", reverse: true})
viewof selection = Inputs.table(penguins, {required: false})
selection // Try selecting rows above!
Inputs.table(penguins, {
format: {
culmen_length_mm: x => x.toFixed(1),
culmen_depth_mm: x => x.toFixed(1),
sex: x => x === "MALE" ? "M" : x === "FEMALE" ? "F" : ""
}
})
Inputs.table(penguins, {
format: {
culmen_length_mm: sparkbar(d3.max(penguins, d => d.culmen_length_mm)),
culmen_depth_mm: sparkbar(d3.max(penguins, d => d.culmen_depth_mm)),
flipper_length_mm: sparkbar(d3.max(penguins, d => d.flipper_length_mm)),
body_mass_g: sparkbar(d3.max(penguins, d => d.body_mass_g)),
sex: x => x.toLowerCase()
}
})
function sparkbar(max) {
return x => htl.html`<div style="
background: steelblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
color: white;">${x.toLocaleString("en")}`
}
Table = Inputs.table // deprecated alias
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.
