penguins
penguin = penguins[0]
length = penguin.culmen_length_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)
depth = penguin.culmen_depth_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm)
<svg width=100 height=12>
<rect x=0 y=0 height=12 width=${length * 100} fill="steelblue"></rect>
<rect x=${length * 100} y=0 height=12 width=${depth * 100} fill="orange"></rect>
</svg>
makeBar = (penguin) => {
const length = penguin.culmen_length_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm);
const depth = penguin.culmen_depth_mm / (penguin.culmen_length_mm + penguin.culmen_depth_mm);
return htl.html`<svg width=100 height=13>
<rect x=0 y=0 height=13 width=${length * 100} fill="steelblue"></rect>
<rect x=${length * 100} y=0 height=13 width=${depth * 100} fill="orange"></rect>
</svg>`
}
makeBar(penguins[100])
makeBar(penguins[300])
penguins1 = penguins.map((d) => ({...d, ratio: d.culmen_length_mm / d.culmen_depth_mm}))
Inputs.table(
penguins1,
{ format: { ratio: (_, i, data) => makeBar(data[i]) } }
)
<table>
<thead>
<tr>
<th>Length</th>
<th>Depth</th>
<th>Ratio</th>
</tr>
</thead>
<tbody>
${penguins.slice(0, 30).map(penguin => htl.html`<tr>
<td>${penguin.culmen_length_mm}</td>
<td>${penguin.culmen_depth_mm}</td>
<td>${makeBar(penguin)}</td>
</tr>`)}
</tbody>
</table>
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.
