My approach to software engineering focuses on performance, elegance, and resilience. My specialties include expressive UIs, data visualization, API development, and system design.
map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
const tile = d3.tile()
.extent([[0, 0], [width, height]])
.tileSize(256)
.clampX(false);
const zoom = d3.zoom()
.scaleExtent([1 << 8, 1 << 22])
.extent([[0, 0], [width, height]])
.on("zoom", ({transform}) => zoomed(transform));
let image = svg.append("g")
.attr("pointer-events", "none")
.selectAll("image");
svg
.call(zoom)
.call(zoom.transform, d3.zoomIdentity
.translate(width >> 1, height >> 1)
.scale(1 << 12));
function zoomed(transform) {
const tiles = tile(transform);
image = image.data(tiles, d => d).join("image")
.attr("xlink:href", d => url(...d3.tileWrap(d)))
.attr("x", ([x]) => (x + tiles.translate[0]) * tiles.scale)
.attr("y", ([, y]) => (y + tiles.translate[1]) * tiles.scale)
.attr("width", tiles.scale)
.attr("height", tiles.scale);
}
return svg.node();
}
url = (x, y, z) => `https://tile.openstreetmap.org/${z}/${x}/${y}.png `
height = 600 // Observable provides a responsive *width*
d3 = require("d3@7", "d3-tile@1")
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.
