Public
Edited
Apr 7
2 forks
land = new URLSearchParams(document.location.search).get("land") ??
"Deutschland"
bevölkerung_gemeindeverbände_land = bundesland_select == "Deutschland"
? bevölkerung_gemeindeverbände
: geo.filter(bevölkerung_gemeindeverbände, (d) => d.land == bundesland_select)
bevölkerung_gemeindeverbände = rewind(
await FileAttachment(
"bevölkerung_gemeindeverbände@3.geojson"
).json()
)
bundesländer = FileAttachment("bundesländer_simplified@1.geojson").json()
geo = require(`geotoolbox@2`)
isDarkMode = () =>
window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches
function big_mark(num) {
let str = String(num);
if (num < 1000) return str;
let result = "";
for (let i = Math.floor(str.length / 3); i >= 0; i--) {
let start = str.length - 3 * (i + 1);
let end = start + 3;
result +=
(end ? str.slice(Math.max(0, start), end) : "") + (end && i ? "." : "");
}
return result;
}
function addCommas(nStr) {
nStr += "";
var x = nStr.split(".");
var x1 = x[0];
var x2 = x.length > 1 ? "," + x[1] : "";
var rgx = /(\d+)(\d{3})/;
while (rgx.test(x1)) {
x1 = x1.replace(rgx, "$1" + "," + "$2");
}
return x1 + x2;
}
import { bundesländer as bundesländer_select } from "0f64e77d17700521"
import { Legend } from "@jthsiao/color-legend"
import { legend } from "@jthsiao/color-legend"
import { rewind } from "@fil/rewind"
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;
}
.plot-d6a7b5-figure, body {
display: block;
margin-left: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-top: 0px;
}
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.
