2f:T8e0,map = { replay const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const projection = d3.geoMercator() .scale(1 / (2 * Math.PI)) .translate([0, 0]); const render = d3.geoPath(projection); const tile = d3.tile() .extent([[0, 0], [width, height]]) .tileSize(512); const zoom = d3.zoom() .scaleExtent([1 << 15, 1 << 24]) .extent([[0, 0], [width, height]]) .on("zoom", ({transform}) => zoomed(transform)); let image = svg.append("g") .attr("pointer-events", "none") .selectAll("image"); const path = svg.append("path") .attr("pointer-events", "none") .attr("fill", "none") .attr("stroke", "red") .attr("stroke-linecap", "round") .attr("stroke-linejoin", "round"); svg .call(zoom) .call(zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(-initialScale) .translate(...projection(initialCenter)) .scale(-1)); svg.selectAll("circle") .data(data) .join("circle") .attr("fill", "black") .attr("transform", d => ("translate(" + projection(d[2]) + ")") ) .attr("r", 5) function zoomed(transform) { const tiles = tile(transform); image = image.data(tiles, d => d).join("image") .attr("xlink:href", d => url(...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); projection .scale(transform.k / (2 * Math.PI)) .translate([transform.x, transform.y]); path.attr("d", render(features)); svg.selectAll("circle") .attr("transform", d => ("translate(" + projection(d[2]) + ")") ) } // See: https://observablehq.com/@mbostock/shader Object.assign(svg.node(), { update(values = []) { values = values.length > 0 ? values : data; svg.selectAll("circle") .data(values) .join("circle") .attr("fill", "black") .attr("transform", d => ("translate(" + projection(d) + ")") ) .attr("r", values.length > 1000 ? 1 : 5) } }); return svg.node(); }30:[] 2d:{"title":"Stinky","cells":[{"id":0,"value":"md`# Stinky\n\nSlippy map with a brush.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":313,"value":"brush = viewof chart","pinned":false,"hidden":false,"mode":"ojs"},{"id":338,"value":"brushed = {\n d3.select(map).selectAll(\"circle\")\n // .attr(\"r\", (d,i) => i) \n .attr(\"fill-opacity\", 0.5)\n .attr(\"stroke\", \"#f00\")\n .attr(\"visibility\", d => (d[0] >= chart[0][0] && d[0] <= chart[1][0]\n && d[1] <= chart[0][1] && d[1] >= chart[1][1]) \n ? \"visible\" : \"hidden\");\n \n // Count the visible earthquakes on the map\n const n = d3.select(map).selectAll(\"circle\")\n .filter(function() { return d3.select(this).attr(\"visibility\") == \"visible\" })\n .nodes().length;\n \n return md`${n} out of ${data.length} data points are visible on the map.`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":214,"value":"viewof replay = html`