styles = `<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.flex { display: flex }
.flex-wrap { display: flex; flex-wrap: wrap }
.flex-column { display: flex; flex-direction: column }
.flex-row { display: flex; flex-direction: row }
.flex-jcc { display: flex; justify-content: center }
.flex-jcsb { display: flex; justify-content: space-between }
.flex-jcsa { display: flex; justify-content: space-around }
.flex-aic { display: flex; align-items: center }
.p1 { padding: 2px }
.p2 { padding: 5px }
.p3 { padding: 10px }
.p4 { padding: 15px }
.m1 { margin: 2px }
.m2 { margin: 5px }
.m3 { margin: 10px }
.m4 { margin: 15px }
.br1 { border-radius:.125rem }
.br2 { border-radius:.25rem }
.br3 { border-radius:.5rem }
.br4 { border-radius:1rem }
`
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.
