data | design | journalism
Public
Edited
Feb 22, 2022
Importers
function style() {
return html`
<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=Source+Sans+Pro:wght@300;400;600;700;900&display=swap" rel="stylesheet">
<style>
.annotation {
font-family: 'Source Sans Pro', sans-serif;
font-size: 12px;
}
.axis-text, .x-axis, .y-axis {
font-family: 'Source Sans Pro', sans-serif;
}
.dataviz-copy {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
}
h1, h2, h3, h4, h5, h6 {
font-family: 'Source Sans Pro', sans-serif;
}
.map-title {
text-align: center;
padding: 5px;
text-transform: none;
font-weight: bold;
}
.chart-title {
text-align: left;
padding: 20px;
}
input[type=text] {
height: 1.5em;
box-sizing: border-box;
border: 2px solid #dcddde;
border-radius: 4px;
font-size: 16px;
background-color: white;
}
input[type=text]:focus {
border: 2px solid #5f2b7b;
}
.highlight-text {
font-family: 'Source Sans Pro', sans-serif;
font-size: 20px;
text-align: center;
padding: 20px;
}
.hed {
font-family: 'Source Sans Pro', sans-serif;
}
input[type="search"], input[type="select"], input[type="text"] {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
}
.insetmap circle.background {
fill: white;
}
.insetmap circle.blur {
filter: url(#blur);
fill: none;
stroke: white;
stroke-width: 10;
}
.insetmap circle.outline {
fill: none;
stroke: #636646;
}
select, option {
font-family: 'Source Sans Pro', sans-serif;
}
.subhed {
font-family: 'Source Sans Pro', sans-serif;
font-weight: 300;
font-size: 16px;
}
div.source-notes {
font-size: 12px;
font-family: 'Source Sans Pro', sans-serif;
margin-top: 0;
margin-bottom: 0;
padding: 0;
}
th {
font-family: 'Source Sans Pro', sans-serif;
text-align: left;
color: #636466;
}
tr {
font-family: 'Source Sans Pro', sans-serif;
font-size: 16px;
}
.topo path {
stroke: #fff;
stroke-width: .5px;
transition: fill 0.2s ease;
}
.topo path:hover {
stroke-width: 4px;
}
`;
}
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.
