👨💻 Modelling consultant
🧮 numbers 📊 actuarial
📈 viz, interactivity, transparency
penguins
Type Table, then Shift-Enter. Ctrl-space for more options.
penguins.columns
Inputs.table(penguins, {
columns: [
"species",
"culmen_length_mm",
"culmen_depth_mm",
"flipper_length_mm"
],
header: {
species: "Penguin Species",
culmen_length_mm: "Culmen length (mm)",
flipper_length_mm: "Flipper length (mm)",
culmen_depth_mm: "Culmen Depth (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: lightblue;
width: ${100 * x / max}%;
float: right;
padding-right: 3px;
box-sizing: border-box;
overflow: visible;
display: flex;
justify-content: end;">${x.toLocaleString("en")}`
}
Inputs.table(penguins, {
width: {
culmen_length_mm: 140,
culmen_depth_mm: 140,
flipper_length_mm: 140
},
align: {
culmen_length_mm: "right",
culmen_depth_mm: "center",
flipper_length_mm: "left"
},
rows: 18,
maxWidth: 840,
multiple: false,
layout: "fixed"
})
Inputs.table(penguins, {
value: penguins.filter((_, i) => [1, 3, 7, 9].includes(i)),
multiple: true
})
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.
