atlasFont = html`
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400&display=swap" rel="stylesheet">
<style>
.exo2 {
font-family: 'Exo 2' !important;
}
</style>
`
fontStyle = html`
<style>
.sans-serif {
font-family: -apple-system,BlinkMacSystemFont,avenir next,avenir,helvetica neue,helvetica,ubuntu,roboto,noto,segoe ui,arial,sans-serif;
}
.header {
font-size: 1.5rem;
}
p {
font-size: 1.25rem;
}
</style>
`
arrow('left', () => {console.log("click")})
arrow = (direction, onClick) => {
let d = document.createElement('div');
d.style.cssText =
`
position: relative;
text-align: center;
margin: auto;
display: inline-block;
width: 10%;
max-width: 40px;
padding-top: 10px;
vertical-align: top;
opacity: 0.75;
cursor: pointer;
`
d.append(arrows[direction])
d.addEventListener("click", onClick)
return d
}
atlasStyle = html`
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Exo+2:wght@300;400&display=swap" rel="stylesheet">
<style>
.exo2 {
font-family: 'Exo 2' !important;
}
${removeStyleTags(fontStyle)}
${removeStyleTags(buttonStyle)}
${removeStyleTags(radioButtonStyle)}
</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.
