<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap" rel="stylesheet">
<style>
.longbox--item {
font-family: "Open Sans", Arial, sans-serif;
}
.longbox--item h2 {
font-size: 18px;
font-weight: normal;
margin-bottom: 8px;
border-bottom: 1px solid #ccc;
max-width: 500px;
}
.longbox--item h3 {
font-size: 12px;
font-weight: normal;
margin-top: 6px;
margin-bottom: 12px;
}
.longbox--item .state-details {
display: flex;
}
.longbox--item .state-details > div {
margin-right: 30px;
}
.longbox--item table {
margin: 0;
}
.longbox--item table td, .longbox--item table th {
font-size: 13px;
padding: 3px 6px 3px 6px;
text-align: right;
border-left: 1px solid #eee;
}
.longbox--item table th.key {
text-align: left;
border-left: none;
padding-left: 0;
}
.longbox--item table td.section-break, .longbox--item table th.section-break {
border-left: 1px solid #666;
}
.longbox--item .totals-table tbody th {
font-weight: normal;
}
.longbox--item .locator-map svg {
width: ${mapSize}px;
height: ${mapSize}px;
}
.longbox--item .totals-table h3 {
font-size: 18px;
margin-top: 3px;
margin-bottom: 12px;
}
.longbox--item .plots {
display: flex;
}
</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.
