data_germany = {
let ar = [];
ar[0] = await (
await fetch(
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/1_deutschland/4_niedrig.geo.json"
)
).json();
ar[1] = await (
await fetch(
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/2_bundeslaender/4_niedrig.geo.json"
)
).json();
ar[2] = await (
await fetch(
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/3_regierungsbezirke/4_niedrig.geo.json"
)
).json();
ar[3] = await (
await fetch(
//"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/4_niedrig.geo.json"
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/1_sehr_hoch.geo.json"
)
).json();
return ar;
}
germanyStates = await (
await fetch(
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/3_regierungsbezirke/4_niedrig.geo.json"
)
).json()
germanyKreise = await (
await fetch(
//"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/4_niedrig.geo.json"
"https://raw.githubusercontent.com/isellsoap/deutschlandGeoJSON/master/4_kreise/1_sehr_hoch.geo.json"
)
).json()
germanyKreise2 = FileAttachment("germanyMap.json").json()
statesMesh = topojson.mesh(
germanyKreise2,
germanyKreise2.objects.germanyMap,
(a, b) => a !== b
)
projection = {
/* https://github.com/d3/d3-geo#geoBounds */
const [ bottomLeft, topRight ] = d3.geoBounds(germany)
/* https://bl.ocks.org/mbostock/4282586 */
const lambda = -(topRight[0] + bottomLeft[0]) / 2
/* Coordinates for the center of the map*/
const center = [
(topRight[0] + bottomLeft[0]) / 2 + lambda,
(topRight[1] + bottomLeft[1]) / 2
]
const scale = Math.min(
width / (topRight[0] + bottomLeft[0]),
height / (topRight[1] - bottomLeft[1])
)
/* Creating the projection */
return d3.geoAlbers()
.parallels([bottomLeft[1], topRight[1]])
.translate([width / 2, height / 2])
.rotate([lambda, 0, 0])
.center(center)
.scale(scale * 200)
}
map = svg`
<svg width="${width}" height="${height}">
<path d="${d}" fill="rebeccapurple" stroke="rebeccapurple" fill-opacity='0.2'></path>
</svg>
`
level
data_germany[level].features.map((s) =>
s.geometry.coordinates.map((c) => c.map((c2) => c2[0]))
)
Plot.plot({
y: { reverse: true, ticks: 0 },
x: { ticks: 0 },
r: { type: "linear", domain: [0, 10], range: [0, 20] },
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
height: height,
width: (height * 2) / 3,
marks: [
data_germany[level].features.map((s) =>
s.geometry.coordinates.map((c) =>
c.map((c2) =>
Plot.line(c2, {
x: (d) => d[0],
y: (d) => height - d[1],
fill: "lightgrey",
stroke: "black"
})
)
)
)
/*
// State Outlines
statesMesh.coordinates.map((c) =>
Plot.line(c, { x: (d) => d[0], y: (d) => height - d[1], stroke: "#000" })
)
/*
// Earthquake dots
Plot.dot(earthquakes.features.filter(d => projection(d.geometry.coordinates) !== null), {
x: d => projection(d.geometry.coordinates)[0],
y: d => projection(d.geometry.coordinates)[1],
r: d => d.properties.mag,
fill: 'rgba(0,150, 200, 0.25)',
})
*/
]
})
Plot.plot({
y: { reverse: true, ticks: 0 },
x: { ticks: 0 },
r: { type: "linear", domain: [0, 10], range: [0, 20] },
marginTop: 0,
marginLeft: 0,
marginRight: 0,
marginBottom: 0,
height: height,
width: (height * 2) / 3,
marks: [
germanyStates.features.map((s) =>
s.geometry.coordinates.map((c) =>
c.map((c2) =>
Plot.line(c2, {
x: (d) => d[0],
y: (d) => height - d[1],
fill: "lightgrey"
})
)
)
),
// State Outlines
statesMesh.coordinates.map((c) =>
Plot.line(c, { x: (d) => d[0], y: (d) => height - d[1], stroke: "#000" })
)
/*
// Earthquake dots
Plot.dot(earthquakes.features.filter(d => projection(d.geometry.coordinates) !== null), {
x: d => projection(d.geometry.coordinates)[0],
y: d => projection(d.geometry.coordinates)[1],
r: d => d.properties.mag,
fill: 'rgba(0,150, 200, 0.25)',
})
*/
]
})
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.
