The avatar for @oliviafvane
Olivia Vane
Data visualisation design + code. Interactive data journalist @TheEconomist
Published
Edited
Nov 21, 2021
Importers
20 stars
13
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
viewof tooltip_toggle = checkbox({
options: [{ value: true, label: "Show sheet names on hover" }]
})
Insert cell
viewof colour_undigitised_toggle = checkbox({
options: [{ value: true, label: "Colour undigitised sheets" }]
})
Insert cell
viewof outlines_toggle = checkbox({
options: [{ value: true, label: "Show sheet outlines" }]
})
Insert cell
// Time step dropdown in control panel
viewof time_step = Inputs.select([50, 20, 10, 5])
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
// Create SVG element for tooltip
mutable svg_tooltip = html`<svg id="tooltip_svg" width=${width} height=1200 style="position: fixed; pointer-events:none;"><g id="tooltip" style="display:block;"></g></svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
mutable sheet_urls_table = Inputs.table(sheet_urls_onClick, {
columns: ["SHEET (link if digitised)", "EDITION", "YEAR"],
format: {
"SHEET (link if digitised)": x =>
x.link != ""
? html`<a href="${x.link}" target="_blank">${x.sheet}`
: x.sheet,
EDITION: x => html`<td style="padding:0px;" title="${x}">${x}`,
YEAR: x => String(x)
},
width: {
"SHEET (link if digitised)": 150,
EDITION: 100,
YEAR: 60
},
maxWidth: 400
})
Insert cell
Insert cell
Insert cell
Insert cell
// Create SVG element for axes
mutable svg = html`
<svg width=${width} height=${height} style="position: fixed; pointer-events:none;">
<g id="yaxis_svg">
<g id="yaxis">
<g id="time_y_axis"></g>
</g>
</g>
<g id="xaxis_svg">
<g id="scale_x_axis"></g>
</g>
</svg>`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell

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.
Learn more