Public
Edited
May 22
birds = FileAttachment('birds.json').json();
Inputs.table(birds, { width: 500 })
render({
width: 100,
data: { values: birds },
layer: [
{
mark: 'bar',
encoding: {
x: { field: 'condition', type: 'nominal' },
y: {
field: 'mean',
type: 'quantitative',
title: 'Average Bill Length (mm)'
}
},
transform: [
{
aggregate: [
{ op: 'mean', field: 'bill_length', as: 'mean' },
{ op: 'stderr', field: 'bill_length', as: 'sem' }
],
groupby: ['condition']
}
]
},
// Error bars
{
mark: 'rule',
encoding: {
x: { field: 'condition', type: 'nominal' },
y: { field: 'lower', type: 'quantitative' },
y2: { field: 'upper' }
},
transform: [
{
aggregate: [
{ op: 'mean', field: 'bill_length', as: 'mean' },
{ op: 'stderr', field: 'bill_length', as: 'sem' }
],
groupby: ['condition']
},
{ calculate: 'datum.mean - datum.sem', as: 'lower' },
{ calculate: 'datum.mean + datum.sem', as: 'upper' }
]
}
]
})
render({
width: 200,
data: { values: birds },
mark: 'bar',
encoding: {
x: {
field: 'bill_length',
type: 'quantitative',
bin: true,
axis: { title: 'Bill Length (mm)' }
},
y: {
aggregate: 'count',
type: 'quantitative',
axis: { title: 'Count' }
},
color: {
field: 'condition',
type: 'nominal',
legend: { title: 'Condition' }
},
opacity: { value: 0.7 }
}
})
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
// Regression for Condition A
{
mark: { type: 'line', strokeDash: [4, 2] },
transform: [
{ filter: "datum.condition === 'A'" },
{ regression: 'bill_depth', on: 'bill_length' }
],
encoding: {
x: { field: 'bill_length', type: 'quantitative' },
y: { field: 'bill_depth', type: 'quantitative' },
color: { value: '#1F77B4' } // match Condition A color
}
},
// Regression line for Condition B
{
mark: { type: 'line', strokeDash: [2, 2] },
transform: [
{ filter: "datum.condition === 'B'" },
{ regression: 'bill_depth', on: 'bill_length' }
],
encoding: {
x: { field: 'bill_length', type: 'quantitative' },
y: { field: 'bill_depth', type: 'quantitative' },
color: { value: '#FF7F0E' } // match Condition B color
}
}
]
})
render({
width: 200,
data: {
values: [
{
candidate: "Mickey Mouse",
votes: 18073,
projected_total: 18073 / 0.8,
sem: Math.sqrt((18073 * 0.2) / 0.8)
},
{
candidate: "Donald Duck",
votes: 17847,
projected_total: 17847 / 0.8,
sem: Math.sqrt((17847 * 0.2) / 0.8)
}
]
},
transform: [
{ calculate: "datum.projected_total - 1.96 * datum.sem", as: "lower" },
{ calculate: "datum.projected_total + 1.96 * datum.sem", as: "upper" }
],
layer: [
// Projected totals (transparent, in the background)
{
mark: { type: "bar", opacity: 0.5 },
encoding: {
x: { field: "candidate", type: "nominal" },
y: { field: "projected_total", type: "quantitative" },
color: {
field: "candidate",
type: "nominal",
scale: {
domain: ["Mickey Mouse", "Donald Duck"],
range: ["#1f78b4", "#ff7f00"] // Blue for Mickey, Orange for Donald
}
}
}
},
// Observed votes (solid, in front)
{
mark: { type: "bar", opacity: 1 },
encoding: {
x: { field: "candidate", type: "nominal" },
y: {
field: "votes",
type: "quantitative",
axis: { title: "Votes (Observed + Projected)" }
},
color: {
field: "candidate",
type: "nominal",
scale: {
domain: ["Mickey Mouse", "Donald Duck"],
range: ["#1f78b4", "#ff7f00"]
}
}
}
}
]
})
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.
