Doing stuff
Public
Edited
Oct 10, 2020
1 fork
30 stars
container = html`
<div style="box-sizing: border-box; width: ${mapWidth}px; height: ${mapHeight}px; position: relative;">
${canvasLayer}
${svgLayer}
</div>
`
svgLayer = {
const svg = d3
.create('svg')
.style('position', 'relative')
.style('top', '0')
.style('left', '0')
.attr('width', mapWidth)
.attr('height', mapHeight)
.attr('viewBox', `0 0 ${mapWidth} ${mapHeight}`);
const g = svg
.append('g')
.attr('transform', `translate(${margin},${margin})`)
.attr('pointer-events', 'none');
if (active) {
g.append('path')
.attr('stroke', 'tomato')
.attr('stroke-width', 2)
.attr('fill', 'none')
.attr('d', svgPath(active));
}
return svg.node();
}
canvasLayer = {
// create our rendering context
const context = DOM.context2d(mapWidth, mapHeight);
// add our context to the path generator
path.context(context);
// lil nudge nudge
context.translate(margin, margin);
// get our canvas
const canvas = context.canvas;
canvas.style.position = 'absolute';
canvas.style.top = '0';
canvas.style.left = '0';
function render() {
context.clearRect(0, 0, mapWidth, mapHeight);
context.lineJoin = 'round';
context.lineCap = 'round';
context.beginPath();
path(shapes);
context.lineWidth = 0.5;
context.fillStyle = '#eeeeee';
context.fill();
context.strokeStyle = '#aaaaaa';
context.stroke();
context.closePath();
context.beginPath();
path(state);
context.lineWidth = 0.75;
context.strokeStyle = '#222222';
context.stroke();
context.closePath();
}
// render the initial canvas
render();
return canvas;
}
script = {
const blob = new Blob([`
importScripts("${await require.resolve('flatbush')}");
onmessage = (event) => {
const { data } = event.data;
const index = new Flatbush(data.length);
data.forEach(bbox => {
index.add(...bbox);
});
index.finish();
postMessage(index.data, [index.data]);
close();
};
`], {type: "text/javascript"});
const script = URL.createObjectURL(blob);
invalidation.then(() => URL.revokeObjectURL(script));
return script;
}
index = new Promise((resolve) => {
const worker = new Worker(script);
function messaged({ data }) {
resolve(Flatbush.from(data));
}
invalidation.then(() => worker.terminate());
worker.addEventListener('message', messaged);
worker.postMessage({ type: 'load', data: shapes.features.map(d => d.bbox) });
});
function findPolygon(coords) {
const found = index.search(...coords, ...coords).map(i => shapes.features[i]);
return found.find(feature => d3.geoContains(feature, coords));
}
{
const el = d3.select(container);
el.on('mousemove', function(e) {
const coords = projection.invert(d3.pointer(e).map(n => n - margin));
const active = findPolygon(coords);
if (active !== mutable active) mutable active = active;
});
el.on('mouseout', function() {
if (mutable active) mutable active = null;
});
return active;
}
margin = 20
mapWidth = Math.min(640, width)
heightRatio = {
const bounds = path.bounds(extentGeography);
return (bounds[1][1] - bounds[0][1]) / (bounds[1][0] - bounds[0][0]);
}
mapHeight = Math.ceil(mapWidth * heightRatio)
projection = d3
.geoConicEqualArea()
.parallels([34, 40.5])
.rotate([120, 0])
path = d3.geoPath(projection)
svgPath = d3.geoPath(projection)
projection.fitSize([mapWidth - margin * 2, mapHeight - margin * 2], extentGeography)
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.
