Crafting Visual Stories with Data.
Recreation Process
Two Main Frames in the Visualisation
Overview Frame
Detailed Frame
// Get the data from Github Vega Dataset Repo
dataUrl = "https://raw.githubusercontent.com/vega/vega-datasets/next/data/driving.json"
aq = require("arquero")
raw = aq.loadJSON(dataUrl)
Inputs.table(raw)
// Layer 1
vegaEmbed({
width: 400,
height: 400,
data: { values: raw },
mark: "point",
encoding: {
x: { field: "miles", type: "Q" },
y: { field: "gas", type: "Q" }
}
})
// Layer 2
vegaEmbed({
width: 400,
height: 400,
data: { values: raw },
mark: { type: "line", interpolate: "cardinal" },
encoding: {
x: { field: "miles", type: "Q" },
y: { field: "gas", type: "Q" },
order: { field: "year", type: "Q" }
}
})
// Layer 3
vegaEmbed({
width: 400,
height: 400,
data: { values: raw },
mark: "text",
encoding: {
x: { field: "miles", type: "Q" },
y: { field: "gas", type: "Q" },
order: { field: "year", type: "Q" },
text: { field: "year", type: "Q" }
}
})
// Combine Layer1 & Layer 2
vegaEmbed({
width: 400,
height: 400,
data: { values: raw },
layer: [
{ mark: { type: "line", interpolate: "cardinal" } },
{ mark: "point" }
],
encoding: {
x: { field: "miles", type: "Q" },
y: { field: "gas", type: "Q" },
order: { field: "year", type: "Q" }
}
})
Inputs.table(data)
// Derive is to create new columns in the data
data = aq
.from(raw)
.params({ textAdjust })
.derive({
align: (d) => aq.op.recode(d.side, textAdjust.align),
baseline: (d) => aq.op.recode(d.side, textAdjust.baseline),
dx: (d) => aq.op.recode(d.side, textAdjust.dx),
dy: (d) => aq.op.recode(d.side, textAdjust.dy)
})
.objects()
textAdjust = ({
align: {
left: "right",
right: "left",
top: "center",
bottom: "center"
},
baseline: {
left: "middle",
right: "middle",
top: "bottom",
bottom: "top"
},
dx: {
left: -6,
right: 6,
top: 0,
bottom: 0
},
dy: {
left: 0,
right: 0,
top: -6,
bottom: 6
}
})
vegaEmbed(OverviewSpec)
OverviewSpec = ({
width: 800,
height: 600,
data: { values: data },
layer: [
{
mark: {
type: "line",
interpolate: "cardinal",
strokeWidth: 3,
stroke: "black"
}
},
{
mark: {
type: "circle",
fill: "white",
stroke: "black",
strokeWidth: 2,
size: 60,
opacity: 1
}
},
{
mark: {
type: "text",
align: { expr: "datum.align" },
baseline: { expr: "datum.baseline" },
dx: { expr: "datum.dx" },
dy: { expr: "datum.dy" }
}
}
],
encoding: {
x: {
field: "miles",
type: "Q",
scale: { zero: false },
axis: { tickCount: 5 },
title: "Miles driven per capita year"
},
y: {
field: "gas",
type: "Q",
scale: { zero: false },
axis: { tickCount: 5, format: "$0.2f", labelOffset: 4 },
title: "Price of a gallon of Gasoline"
},
order: { field: "year", type: "Q" },
text: { field: "year", type: "Q" }
},
config: {
view: { stroke: null },
axis: {
domain: false,
labelFontSize: 13,
labelFontStyle: "bold",
titleFontSize: 16
},
title: {
fontSize: 30
}
}
})
Inputs.table(data)
// Create Base Chart
vegaEmbed({
width: 300,
height: 250,
data: { values: dataGroups },
mark: { type: "line", interpolate: "cardinal", stroke: "lightgrey" },
encoding: {
x: {
field: "miles",
type: "Q",
scale: { zero: false }
},
y: {
field: "gas",
type: "Q",
scale: { zero: false }
},
order: { field: "year", type: "Q" }
},
config: {
view: { stroke: null },
axis: { domain: false, labels: false, ticks: false, title: false }
}
})
groups = aq.fromCSV(groupsText)
Inputs.table(groups, { width: 400 })
dataGroups = aq.from(data).join(groups, "year").objects()
Inputs.table(dataGroups)
vegaEmbed({
width: 160,
height: 100,
data: { values: dataGroups },
layer: [
{
mark: { type: "line", interpolate: "cardinal", stroke: "lightgrey" }
},
{
mark: { type: "line", interpolate: "cardinal", stroke: "black" },
transform: [{ filter: { field: "type", equal: "Cheap Gas" } }]
}
],
title: { text: "Cheap Gas" },
encoding: {
x: {
field: "miles",
type: "Q",
scale: { zero: false }
},
y: {
field: "gas",
type: "Q",
scale: { zero: false }
},
order: { field: "year", type: "Q" }
},
config: {
view: { stroke: null },
axis: { domain: false, labels: false, ticks: false, title: false }
}
})
singleSpec = (selectedGroup) => ({
layer: [
{
mark: { type: "line", interpolate: "cardinal", stroke: "lightgrey" }
},
{
mark: { type: "line", interpolate: "cardinal", stroke: "black" },
transform: [{ filter: { field: "type", equal: selectedGroup } }]
}
],
width: 160,
height: 160,
title: selectedGroup,
encoding: {
x: {
field: "miles",
type: "Q",
scale: { zero: false }
},
y: {
field: "gas",
type: "Q",
scale: { zero: false }
},
order: { field: "year", type: "Q" }
}
})
vegaEmbed(detailSpec)
detailSpec = ({
data: { values: dataGroups, type: "json" },
hconcat: [
singleSpec("Cheap Gas"),
singleSpec("Arab Embargo"),
singleSpec("Energy Crisis"),
singleSpec("Low Prices"),
singleSpec("Swing Backward")
],
config: {
view: { stroke: null },
axis: { domain: false, labels: false, ticks: false, title: false }
}
})
vegaEmbed({
width: 300,
height: 250,
data: { values: dataGroups },
facet: { column: { field: "group" } },
spec: {
mark: { type: "line", interpolate: "cardinal", stroke: "black" },
encoding: {
x: {
field: "miles",
type: "Q",
scale: { zero: false }
},
y: {
field: "gas",
type: "Q",
scale: { zero: false }
},
order: { field: "year", type: "Q" },
color: { field: "group", type: "N" }
}
},
config: {
view: { stroke: null },
axis: { domain: false, labels: false, ticks: false, title: false }
}
})
Preparing for Embedding
For the Spec
We need the Overview spec: OverviewSpec
We need the Detail spec: detailSpec
Download the json or copy the link for the json
For the Data
You can have the data embedded as values in the specification
Or you can separate the dataGroups as a json file
dataGroups
OverviewSpec
detailSpec
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.
