Data journalist/designer, Montana
Public
Edited
Apr 13, 2023
1 star
style = html`<style>
#interactive-embed {
font-family: Arial, sans-serif;
font-size: 16px;
line-height: 1.2em;
max-width: 800px;
margin: 0 auto;
}
#interactive-embed h3 {
margin-top: 0.5em;
margin-bottom: 0.1em;
text-transform: uppercase;
}
#interactive-embed .section {
padding-left: 0.5em;
border-left: 3px solid #ae9864;
margin-bottom: 1em;
}
.note {
font-size: 0.8em;
font-style: italic;
}
.stat {
margin: 0.5em 0;
text-align: center;
border: 1px solid #ddd;
}
.stat .huge {
font-size: 2em;
padding: 0.75em;
font-weight: bold;
}
.stat .large {
font-size: 1.8em;
opacity: 0.9;
padding: 0.5em;
font-weight: bold;
}
.stat .small {
font-size: 1.1em;
opacity: 0.9;
padding: 0.5em;
}
.stat .label {
font-style: italic;
min-height: 2em;
padding: 0.5em;
}
form {
max-width: 800px !important;
border-top: 1px solid #888;
padding: 0.5em 0;
margin: 0.5em;
}
form>div {
display: flex;
flex-wrap: wrap;
width: 100%;
}
form>div>label {
flex: 1 1 25%;
border: 1px solid #404040;
background-color: #eae3da;
box-shadow: 1px 1px 3px #ccc;
cursor: pointer;
padding: 0.5em;
margin: 0.25em;
font-size: 14px;
}
form>div>label:has(input[type="radio"]:checked) {
background-color: #cebc9f;
}
form>div>label:hover {
background-color: #cebc9f;
}
</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.
