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

One platform to build and deploy the best data apps

Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.
Learn more