Maps, Data, Viz, UX, Design
Published
Edited
Feb 2, 2021
1 fork
10 stars
map = {
shuffle;
const { lat, lng, z } = mapConfig;
const container = DOM.element('div', {
style: `width:${width}px; height:500px`
});
yield container;
const map = L.map(container, { scrollWheelZoom: false });
map.setView([lat, lng], z);
L.tileLayer(
"https://a.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png",
{ minZoom: 1, maxZoom: 18 }
).addTo(map);
const statesLayer = L.geoJson(data, {
style: statesStyle,
onEachFeature
}).addTo(map);
statesLayer.bindPopup(layer => {
return layer.feature.properties.name;
});
}
patternIds = fillColorScale.map((d, i) => DOM.uid(`pattern-${i}`))
html`<style>
${patternIds.map((d, i) => `.pattern-fill-${i} { fill: ${d}; }\n`)}
</style>`
patterns = {
const svg = d3
.create("svg")
.attr("width", 0)
.attr("height", 0);
const defs = svg.append("defs");
const patterns = defs
.selectAll("pattern")
.data(fillColorScale)
.join("pattern")
.attr("id", (_d, i) => `${patternIds[i].id}`)
.attr("x", 0)
.attr("y", 0)
.attr("width", 8)
.attr("height", 8)
.attr("patternUnits", "userSpaceOnUse")
.attr("patternContentUnits", "userSpaceOnUse")
.attr("patternTransform", "rotate(45)");
patterns.each(function(d) {
d3.select(this).call(path, d);
d3.select(this).call(path, "#fff");
});
function path(selection, fillColor) {
selection
.append("path")
.attr("stroke", fillColor)
.attr("stroke-opacity", fillColor === "#fff" ? 0 : 1)
.attr("stroke-width", 4)
.attr("stroke-linecap", "round")
.attr("stroke-linejoin", "round")
.attr("fill", "none")
.attr("pointer-events", "none")
.attr("d", "M0 2 H 8");
}
return svg.node();
}
onEachFeature = (feature, layer) => {
layer.options.className = `pattern-fill-${patternChoice()}`;
}
statesStyle = feature => {
const choice = patternChoice(); // applies a pattern at random
return {
color: strokeColorScale[choice],
fillColor: fillColorScale[choice],
fillOpacity: fillOpacity,
weight: strokeWeight
};
}
patternChoice = () => Math.floor(Math.random() * 3)
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.
