Public
Edited
May 23
birds = FileAttachment('birds.json').json();
Inputs.table(birds, { width: 500 })
render({
data: { values: birds },
transform: [
{
aggregate: [
{ op: "mean", field: "bill_length", as: "mean_length" },
{ op: "stderr", field: "bill_length", as: "se_length" },
{ op: "count", as: "sample_size" }
],
groupby: ["condition"]
},
{
calculate: "datum.mean_length - datum.se_length",
as: "lower_se"
},
{
calculate: "datum.mean_length + datum.se_length",
as: "upper_se"
}
],
layer: [
{
mark: {
type: "bar",
color: "#4c78a8",
opacity: 0.7,
width: 60
},
encoding: {
x: {
field: "condition",
type: "N",
title: "Condition",
axis: { labelFontSize: 12 }
},
y: {
field: "mean_length",
type: "Q",
title: "Average Beak Length (mm)",
scale: { zero: false }
},
tooltip: [
{ field: "condition", type: "N", title: "Condition" },
{ field: "mean_length", type: "Q", title: "Mean Beak Length", format: ".2f" },
{ field: "se_length", type: "Q", title: "Standard Error", format: ".3f" },
{ field: "sample_size", type: "Q", title: "Sample Size" }
]
}
},
{
mark: {
type: "rule",
color: "black",
strokeWidth: 2
},
encoding: {
x: { field: "condition", type: "N" },
y: { field: "lower_se", type: "Q" },
y2: { field: "upper_se", type: "Q" }
}
},
{
mark: {
type: "tick",
color: "black",
thickness: 2,
size: 10
},
encoding: {
x: { field: "condition", type: "N" },
y: { field: "lower_se", type: "Q" }
}
},
{
mark: {
type: "tick",
color: "black",
thickness: 2,
size: 10
},
encoding: {
x: { field: "condition", type: "N" },
y: { field: "upper_se", type: "Q" }
}
}
],
width: 300,
height: 250,
title: {
text: "Average Beak Length by Condition",
subtitle: "Error bars represent ± 1 Standard Error",
fontSize: 14,
anchor: "start"
}
})
render({
data: { values: birds },
transform: [
{
density: "bill_length",
bandwidth: 0.8,
groupby: ["condition"],
extent: [32, 43]
}
],
mark: {
type: "area",
orient: "horizontal",
opacity: 0.7,
stroke: "white",
strokeWidth: 2
},
encoding: {
y: {
field: "value",
type: "Q",
title: "Beak Length (mm)"
},
color: {
field: "condition",
type: "N",
scale: {
domain: ["A", "B"],
range: ["#1f77b4", "#ff7f0e"]
},
title: "Condition"
},
x: {
field: "density",
type: "Q",
stack: "center",
title: null,
axis: null
},
column: {
field: "condition",
type: "N",
spacing: 40,
header: {
titleFontSize: 16,
titleColor: "black"
}
}
},
width: 120,
height: 300,
resolve: {
scale: { x: "independent" }
},
title: {
text: "Beak Length Distribution by Condition",
fontSize: 16,
anchor: "start"
}
})
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 } }
}
},
{
mark: { type: 'line' },
transform: [{
regression: 'bill_depth',
on: 'bill_length',
groupby: ['condition']
}],
encoding: {
x: { field: 'bill_length', type: 'Q', scale: { zero: false } },
y: { field: 'bill_depth', type: 'Q', scale: { zero: false } },
color: { field: 'condition', type: 'N' }
}
}
]
})
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.
