playing with space, shape, colour & composition
height = 900 // set the height of the SVG/page in px
totalPages = 108
config = [
{
label: 'Setting the scene.',
page_start: 1,
bgd_col: '#f6f2d1',
txt_col: '#d1bd19'
},
{
label: 'Building the tension.',
page_start: 18,
bgd_col: '#f4fff4',
txt_col: '#4a804a'
},
{
label: 'The exciting bit.',
page_start: 36,
bgd_col: '#94ff94',
txt_col: '#4a804a'
},
{
label: 'Tidying up loose ends.',
page_start: 69,
bgd_col: '#dfffdf',
txt_col: '#4a804a'
},
{
label: 'Ending the story.',
page_start: 88,
bgd_col: '#d6ccde',
txt_col: '#340059'
}
]
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<style>
text {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
</style>
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.
