style = html`<style>
html, body {
font-size: 1.0rem;
}
textarea:focus {
outline: none;
}
.section-header {
padding: 10px 0px 10px 14px;
border-left: 2px solid #60c252;
background-color: #dcffd7;
}
.red {
border-left: 2px solid #c25252;
background-color: #ffd7d7;
}
.blue {
border-left: 2px solid #528cc2;
background-color: #d7e1ff;
}
#chart {
display: flex;
justify-content: center;
align-items: center;
width: ${chartConfig.options.width + 64}px;
height: ${chartConfig.options.height + 64}px;
}
#chart svg {
background-color: #fff;
box-shadow: 0px 0px 8px #cdcdcd;
border-radius: 20px;
}
#chart svg text {
font-size: 1.0em;
}
#chart .axis text tspan {
font-size: 1.6em;
}
#download {
display: inline-block;
padding: 6px 10px 6px 10px;
box-shadow: 0px 0px 5px #cdcdcd;
border: none;
border-radius: 6px;
font-size: 1.0em;
cursor: pointer;
transition: 250ms;
}
#download:hover {
transition: 250ms;
transform: scale(1.025);
}
</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.
