Public
Edited
May 23
birds = FileAttachment('birds.json').json();
Inputs.table(birds, { width: 500 })
import { Plot } from "@observablehq/plot";
// Group by condition and compute mean and standard error
grouped = d3.groups(birds, d => d.condition).map(([condition, values]) => {
const lengths = values.map(d => d.bill_length);
const mean = d3.mean(lengths);
const stderr = d3.deviation(lengths) / Math.sqrt(lengths.length); // SEM
return { condition, mean, stderr };
});
Plot.plot({
y: { label: "beak_length" },
x: { label: "condition" },
marks: [
Plot.boxY(birds, {
x: "condition",
y: "bill_length",
fill: "lightblue",
stroke: "black"
})
]
})
Plot.plot({
y: { label: "bill_length" },
x: { label: "condition" },
marks: [
// Jittered scatter points for raw data
Plot.dot(birds, {
x: "condition",
y: "bill_length",
fill: "black",
opacity: 0.3,
r: 2,
jitter: true
}),
]
})
render({
data: { values: birds },
layer: [
{
mark: 'circle',
encoding: {
x: { field: 'bill_length', type: 'Q', scale: { zero: false } },
y: { field: 'bill_depth', type: 'Q', scale: { zero: false } },
color: { field: 'condition', type: 'N' }
}
},
{
mark: { type: 'line', stroke: 'black' },
transform: [{ regression: 'bill_depth', on: 'bill_length' }],
encoding: {
x: { field: 'bill_length', type: 'Q', scale: { zero: false } },
y: { field: 'bill_depth', type: 'Q', scale: { zero: false } }
}
},
// add another mark layer here
// Grouped regression lines by condition
{
mark: 'line',
transform: [
{ regression: 'bill_depth', on: 'bill_length', groupby: ['condition'] }
],
encoding: {
x: { field: 'bill_length', type: 'Q' },
y: { field: 'bill_depth', type: 'Q' },
color: { field: 'condition', type: 'N' }
}
}
]
})
render({
data: {
values: [
// Mickey Mouse
{ Candidate: 'Mickey Mouse', Status: 'Counted', Votes: 18073, Color: 'steelblue' },
{ Candidate: 'Mickey Mouse', Status: 'Uncounted', Votes: 8980, Color: 'lightblue' },
// Donald Duck
{ Candidate: 'Donald Duck', Status: 'Counted', Votes: 17847, Color: 'orange' },
{ Candidate: 'Donald Duck', Status: 'Uncounted', Votes: 8980, Color: 'moccasin' }
]
},
mark: 'bar',
encoding: {
y: {
field: 'Candidate',
type: 'nominal',
scale: { domain: ['Mickey Mouse', 'Donald Duck'] },
title: null
},
x: {
field: 'Votes',
type: 'quantitative',
axis: { title: 'Votes' }
},
color: {
field: 'Color',
type: 'nominal',
scale: null, // use fixed color values from data
legend: null
},
order: { field: 'Status', sort: ['Counted', 'Uncounted'] }
},
width: 560,
config: {
view: { stroke: null },
axis: { domain: false }
}
})
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.
