Public
Edited
Aug 11, 2021
atlas = d3.json(map)
palettes = ({
"Wes Anderson": ["#ff4848", "#00cdb1", "#ffc638", "#ffa641", "#a0d8e7"],
Blues: ["#0c96da", "#be98ad", "#77d7e3", "#f4cdcd", "#01ccd9", "#f4e2c6"],
"rag-taj": ["#73d5c1", "#e29ba0", "#ba1e6b", "#ffbe45"],
"rag-mysore": ["#e8ac52", "#639aa0", "#ec6c26", "#613a53"],
iiso_zeitung: ["#f3df76", "#00a9c0", "#f7ab76", "#ee8067"],
"present-correct": ["#fe7646", "#ffbb51", "#7356ac", "#fe737a", "#a0ccbb"],
verena: ["#936ead", "#3e78e1", "#f37265", "#f6bc25", "#16b069"],
iiso_daily: ["#7f8cb6", "#f0d967", "#ef9640", "#1daeb1", "#e76c4a"]
})
simplification = 1.8
tension = 0.6
spline = d3.line().curve(d3.curveCardinal.tension(tension))
blurScale = d3
.scaleLinear()
.domain([0, 2000])
.range([deviation, deviation * 3.5])
.clamp(true)
regions = {
const entities = topojson.feature(atlas, atlas.objects[entity_name]).features;
const neighbors = topojson.neighbors(atlas.objects[entity_name].geometries);
const colors = d3.shuffle(palettes[palette].slice(0));
entities.forEach((d, i) => {
const color =
colors.find(
(c) => !neighbors[i].some((n) => entities[n].properties.color === c)
) || colors[0];
colors.push(colors.shift());
d.properties.color = color;
});
return entities;
}
mesh = {
return topojson
.mesh(atlas, atlas.objects[entity_name])
.coordinates.map((line) =>
simplify(
line.map((d) => ({ x: d[0], y: d[1] })),
simplification,
true
).map((d) => [d.x, d.y])
);
}
<style>
.watercolor * {
mix-blend-mode: multiply;
}
.mesh {
stroke: #777;
fill: none;
opacity: 0.8;
stroke-width: 2px;
stroke-linejoin: round;
}
.watercolor {
width: 100%;
height: auto;
}
</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.
