Public
Edited
Dec 11, 2024
1 fork
smoke_data = FileAttachment("smoke@6.csv").csv()
smoke = smoke_data.map((d) => ({
group: d.group
.replace("non", "noch nie geraucht")
.replace("smoke", "Raucher"),
year: +d.year,
percent: +d.percent
}))
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
function entity(character) {
return `&#${character.charCodeAt(0).toString()};`;
}
function swatches({
color,
columns = null,
format = (x) => x,
swatchSize = 15,
swatchWidth = swatchSize,
swatchHeight = swatchSize,
marginLeft = 0
}) {
const id = DOM.uid().id;
if (columns !== null)
return html`<div style="display: flex; align-items: center; margin-left: ${+marginLeft}px; font: 10px sans-serif;">
<style>
.${id}-item {
break-inside: avoid;
display: flex;
align-items: center;
padding-bottom: 1px;
}
.${id}-label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: calc(100% - ${+swatchWidth}px - 0.5em);
}
.${id}-swatch {
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin: 0 0.5em 0 0;
}
</style>
<div style="width: 100%; columns: ${columns};">${color
.domain()
.map((value) => {
const label = format(value);
return html`<div class="${id}-item"">
<div class="${id}-swatch" style="background:${color(value)};"></div>
<div class="${id}-label" title="${label.replace(
/["&]/g,
entity
)}">${document.createTextNode(label)}</div>
</div>`;
})}
</div>
</div>`;
return html`<div style="display: flex; align-items: center; min-height: 33px; margin-left: ${+marginLeft}px; margin-top: 20px; margin-bottom: 20px; font: 10px sans-serif;">
<style>
.${id} {
display: inline-flex;
align-items: center;
margin-right: 1em;
font-size: 12px;
line-height: 125%;
font-weight: 400;
font-family: InterRegular;
width: 100%;
}
.${id}::before {
content: "";
width: ${+swatchWidth}px;
height: ${+swatchHeight}px;
margin-right: 0.5em;
background: var(--color);
}
</style>
<div>${color
.domain()
.map(
(value) =>
html`<span class="${id}" style="--color: ${color(
value
)}">${document.createTextNode(format(value))}</span>`
)}</div>`;
}
ns = Inputs.text().classList[0]
style = html`
<div></div>
<style>
.${ns} input, .${ns}-input {
margin-right: 5px;
}
div.${ns}-input {
width: 250px;
margin-right: 5px;
}
p, span, label, text, .${ns} select, .${ns}-input > input, .legend {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #0f151a;
background-color: #ffffff;
}
@font-face {
font-family: Source Serif Pro;
src: url(https://static.rndtech.de/share/rnd/jchrist/SourceSerifPro-Regular.ttf);
}
@font-face {
font-display: swap;
font-family: 'DIN Next LT Pro';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/DINNextLTPro-Bold.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterRegular';
font-style: normal;
font-weight: 400;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Regular.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterMedium';
font-style: normal;
font-weight: 500;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Medium.ttf) format("truetype")
}
@font-face {
font-display: swap;
font-family: 'InterBold';
font-style: normal;
font-weight: 700;
src: url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff2) format("woff2"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.woff) format("woff"),
url(https://static.rndtech.de/share/rnd/jchrist/Inter-Bold.ttf) format("truetype")
}
h2 {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.title {
color: rgb(15, 21, 26);
font-family: "DIN Next LT Pro", sans-serif;
font-weight: 700;
font-size: 22px;
margin: 0px 0px 0px 0px;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: rgb(41, 56, 69);
letter-spacing: 0px;
line-height: 26px;
}
.credits {
font-size: 12px;
color: #99AFC2;
font-family: InterRegular, sans-serif;
font-weight: 400;
position:relative;
}
@media (prefers-color-scheme: dark) {
svg {
background-color: #293845 !important;
color: white !important;
}
.mode {
color: #ffffff;
background-color: #293845;
}
.subtitle {
font-family: "Source Serif Pro", serif;
font-size: 17px;
font-weight: 400;
color: #ffffff;
}
p, span, label, text, .${ns} select, .${ns}-input > input, .legend {
font-size: 12px;
font-weight: 400;
font-family: InterRegular;
color: #ffffff;
background-color: #293845;
}
}
</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.
