The avatar for @didoesdigital
Di
Data Viz Engineer. Author of Practical UI Patterns for Design Systems. Creator of Typey Type for Stenographers.
Published
Journal: Getting Started with Data Viz
Edited
Jul 16, 2022
Fork of 9 June 2020: Designing for Small Screens: Responsive Data Viz, Resizing, and Aspect Ratios
•
2 forks
17 stars
1
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
lato = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');

text {
font: 14px/1.4 "Lato", sans-serif;
}
</style>
`
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
proofingStyles = html`<style>
.dataVizType {
font-size: 36px;
font-family: "Lato", "Redacted", "Flow Block", "Flow Rounded", "Flow Circular", "BLOKK Neue", sans-serif;
}
</style>
`
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
notebookStyles = html`<style>
@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital,wght@0,300;0,400;0,700;1,300;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Flow+Rounded&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Flow+Block&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Flow+Circular&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Redacted&display=swap');

:root {
--mono_fonts: 14px/1.5 "IBM Plex Mono", Menlo,Consolas,monospace;
}

div {
font-family: "Lato", sans-serif;
}
</style>
`
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