30:T756,bricks = { const bricks = []; const context = binaryMap.getContext("2d"); const imageData = context.getImageData(0, 0, brickWidth, brickHeight); const getColor = (x, y) => { const offset = 4 * (brickWidth * y + x); const alpha = imageData.data[offset + 3]; if (alpha === 0) return; return imageData.data[offset] === 0 ? "green" : "blue"; }; const blocked = Array.from({ length: brickWidth }, () => Array.from({ length: brickHeight }, () => false) ); const brickMap = {}; brickSizes.forEach(({ width, height }) => { for (let y0 = 0; y0 <= brickHeight - height; y0 += 1) { for (let x0 = 0; x0 <= brickWidth - width; x0 += 1) { const color = getColor(x0, y0); if (!color) continue; let sameColor = true; let unblocked = true; for (let y1 = 0; y1 < height; y1 += 1) { for (let x1 = 0; x1 < width; x1 += 1) { const x = x0 + x1; const y = y0 + y1; if (blocked[x][y]) { unblocked = false; } if (getColor(x, y) !== color) { sameColor = false; } } } let hasOffset = true; if (improveAlignment && width > height) { const neighbor = brickMap[`${x0}|${y0 - 2}`]; if ( neighbor && neighbor.width === width && neighbor.height === height ) { hasOffset = false; } } if (sameColor && unblocked && hasOffset) { bricks.push({ x: x0, y: y0, width, height, color }); brickMap[`${x0}|${y0}`] = { width, height }; for (let y1 = 0; y1 < height; y1 += 1) { for (let x1 = 0; x1 < width; x1 += 1) { blocked[x0 + x1][y0 + y1] = true; } } } } } }); return bricks; }31:T770,{ replay; await visibility(); const bricksPerSecond = 30; const gradient = DOM.uid("gradient"); const padding = paddingRatio * brickWidth * unitSize; const width = brickWidth * unitSize + 2 * padding; const height = brickHeight * unitSize + 2 * padding; const container = svg` `; yield container; for (const { x, y, width, height, color } of bricks) { const dotsSvg = Array.from({ length: width * height }).map((_, i) => { const dotX = i % width; const dotY = Math.floor(i / width); const cx = (dotX + 0.5) * unitSize; const cy = (dotY + 0.5) * unitSize; return svg` `; }); await Promises.tick(1000 / bricksPerSecond); container.append(svg` ${dotsSvg} `); } }32:T892,function renderBricks(bricks, options = {}) { const gradient = DOM.uid("gradient"); let maxX = 0; let maxY = 0; const bricksSvg = bricks.map(({ x, y, width, height, color }) => { maxX = Math.max(maxX, x + width); maxY = Math.max(maxY, y + height); const dotsSvg = Array.from({ length: width * height }).map((_, i) => { const dotX = i % width; const dotY = Math.floor(i / width); const cx = (dotX + 0.5) * unitSize; const cy = (dotY + 0.5) * unitSize; return svg` `; }); return svg` ${dotsSvg} `; }); const padding = options.padding === undefined ? Math.max(paddingRatio * maxX, 1) * unitSize : options.padding; const width = maxX * unitSize + 2 * padding; const height = maxY * unitSize + 2 * padding; const widthForPngExport = 2048 / window.devicePixelRatio; const heightForPngExport = (widthForPngExport / width) * height; return svg` `; }33:[] 2e:{"title":"Brick Mapper","cells":[{"id":0,"value":"md`# Brick Mapper\n\nMake your own brick map!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":589,"value":"viewof projectionInput = Inputs.select(projections, {\n label: \"Projection\",\n format: (p) => p.name,\n value: projections.find((p) => p.name === \"Equal Earth\")\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"viewof brickWidthInput = Inputs.range([32, 256], {\n value: defaultBrickWidth,\n step: 1,\n label: \"Width\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":689,"value":"Inputs.text({\n disabled: true,\n value: brickHeight,\n label: \"Height (automatic)\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":684,"value":"viewof improveAlignment = Inputs.toggle({\n label: \"Improve alignment\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":520,"value":"brickMap = renderBricks(bricks)","pinned":false,"hidden":false,"mode":"ojs"},{"id":825,"value":"html`Hint: Open the cell menu in the left margin to download the map as SVG or PNG.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":820,"value":"md`## Parts`","pinned":false,"hidden":false,"mode":"ojs"},{"id":771,"value":"{\n const entries = parts.map(({ width, height, color, count }) => {\n const pixelWidth = width;\n return html`\n

${count} ×

\n ${renderBrick({ width, height, color })}\n

`;\n });\n\n return html`

${entries}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":707,"value":"md`\n---\n\n## Walkthrough\n\nWe start with a [World Map](https://observablehq.com/@d3/world-map) with ${projectionInput.name} projection:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"map = {\n const context = DOM.context2d(width, height);\n\n function render(projection, color) {\n const path = d3.geoPath(projection, context);\n context.fillStyle = context.strokeStyle = color;\n context.save();\n context.beginPath(), path(outline), context.clip();\n context.beginPath(),\n path(graticule),\n (context.globalAlpha = 0.3),\n context.stroke();\n context.beginPath(),\n path(land),\n (context.globalAlpha = 1.0),\n context.fill();\n context.restore();\n context.beginPath(), path(outline), context.stroke();\n }\n\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, width, height);\n\n context.save();\n render(projection, \"#000\");\n context.restore();\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":712,"value":"md`We remove the graticule and outline and make it smaller by using a ${brickWidth} × ${brickHeight} canvas:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":242,"value":"smallDiscreteMap = {\n const context = DOM.context2d(brickWidth, brickHeight, 1);\n\n function render(projection, color) {\n const path = d3.geoPath(projection, context);\n\n context.save();\n context.beginPath(), path(outline), context.clip();\n context.fillStyle = \"#fff\";\n context.fillRect(0, 0, brickWidth, brickHeight);\n\n context.fillStyle = context.strokeStyle = color;\n context.beginPath(), path(land), context.fill();\n\n context.restore();\n }\n\n render(brickProjection, \"#000\");\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":717,"value":"md`\nLet's see this a bit closer.\n\nNotice that pixels are not just black and white but also gray?\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"discreteMap = {\n const context = DOM.context2d(brickWidth, brickHeight, 1);\n context.drawImage(smallDiscreteMap, 0, 0);\n\n context.canvas.style =\n \"width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #eee;\";\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":724,"value":"md`Let's get rid of the gray pixels, so we have a black and white world:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":286,"value":"binaryMap = {\n const context = DOM.context2d(brickWidth, brickHeight, 1);\n context.drawImage(smallDiscreteMap, 0, 0);\n\n const imageData = context.getImageData(0, 0, brickWidth, brickHeight);\n const { data } = imageData;\n\n for (let i = 0; i < data.length / 4; i += 1) {\n const alpha = data[4 * i + 3];\n if (alpha < 255) {\n data[4 * i + 3] = 0;\n } else {\n const value = data[4 * i] >= 192 ? 255 : 0;\n for (let j = 0; j < 3; j += 1) {\n data[4 * i + j] = value;\n }\n }\n }\n\n context.putImageData(imageData, 0, 0);\n\n context.canvas.style =\n \"width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; background: #eee;\";\n\n return context.canvas;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":728,"value":"md`Now we need to figure out how to draw bricks.\n\nA brick is made of these circles with a drop-shadow and a gradient inside:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"{\n const gradient = DOM.uid(\"gradient\");\n return svg`\n `;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":732,"value":"md`The [\\`renderBricks()\\`](#renderBricks) function allows to draw many such circles.\n\nLet's start with one:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"{\n const svg = renderBricks([\n { x: 0, y: 0, width: 1, height: 1, color: \"blue\" }\n ]);\n return html`

${svg}

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":737,"value":"md`Next, let's draw some bricks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":421,"value":"{\n const svg = renderBricks([\n { x: 0, y: 0, width: 4, height: 2, color: \"blue\" },\n { x: 2, y: 2, width: 4, height: 2, color: \"green\" }\n ]);\n svg.style.width = \"300px\";\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":740,"value":"md`We will use these ${brickSizes.length} different sizes of bricks to make the map:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":493,"value":"brickSizes = [\n { width: 4, height: 2 },\n { width: 2, height: 4 },\n { width: 2, height: 2 },\n { width: 4, height: 1 },\n { width: 1, height: 4 },\n { width: 3, height: 1 },\n { width: 1, height: 3 },\n { width: 2, height: 1 },\n { width: 1, height: 2 },\n { width: 1, height: 1 }\n]","pinned":true,"hidden":false,"mode":"ojs"},{"id":743,"value":"md`For each brick size, the map is traversed from top to bottom and left to right, and any time a brick fits, we add it.\n\nThis gives us ${bricks.length} bricks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":499,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":859,"value":"md`The map you see at the top of this notebook is drawn by passing the \\`bricks\\` array to the [\\`renderBricks()\\`](#renderBricks) function.\n\nTo make it a bit more interesting, here is a different version that draws the bricks step by step, from biggest to smallest:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"viewof replay = Inputs.button(\"Replay\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":841,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":801,"value":"md`Finally, let's make the list of parts by adding up all the bricks:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":764,"value":"parts = {\n const parts = {};\n\n bricks.forEach(({ width, height, color }) => {\n if (height > width) {\n [width, height] = [height, width];\n }\n const key = `${width}x${height}|${color}`;\n const part = parts[key] || { width, height, color, count: 0 };\n part.count += 1;\n parts[key] = part;\n });\n\n const sortedParts = Object.values(parts);\n sortedParts.sort((a, b) => {\n if (a.width !== b.width) {\n return b.width - a.width;\n }\n if (a.height !== b.height) {\n return b.height - a.height;\n }\n return a.color.localeCompare(b.color);\n });\n\n return sortedParts;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":609,"value":"md`---\n\n## Appendix A\n\nBrick helpers.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":829,"value":"colors = ({ blue: \"#0055bf\", green: \"#237841\" })","pinned":false,"hidden":false,"mode":"ojs"},{"id":805,"value":"unitSize = 80","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"brickRadius=24","pinned":false,"hidden":false,"mode":"ojs"},{"id":809,"value":"brickBorder=1","pinned":false,"hidden":false,"mode":"ojs"},{"id":811,"value":"paddingRatio = 0.05","pinned":false,"hidden":false,"mode":"ojs"},{"id":393,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"function renderBrick({ width, height, color }) {\n return renderBricks([{ x: 0, y: 0, width, height, color }], { padding: 0 });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"brickProjection = projectionInput.value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":637,"value":"updateBrickWidthOnChange = {\n viewof brickWidthInput.addEventListener(\"change\", () => {\n mutable brickWidth = viewof brickWidthInput.value;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":696,"value":"defaultBrickWidth = 96","pinned":false,"hidden":false,"mode":"ojs"},{"id":653,"value":"mutable brickWidth = defaultBrickWidth","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"brickHeight = fitWidth(brickProjection, brickWidth)","pinned":false,"hidden":false,"mode":"ojs"},{"id":112,"value":"md`---\n\n## Appendix B\n\nProjections and map data.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":255,"value":"projection = projectionInput.value()","pinned":false,"hidden":false,"mode":"ojs"},{"id":100,"value":"projections = [\n { name: \"conic equal-area\", value: d3.geoConicEqualArea },\n { name: \"cylindrical equal-area\", value: d3.geoCylindricalEqualArea },\n { name: \"Equal Earth\", value: d3.geoEqualEarth },\n { name: \"Equirectangular (plate carrée)\", value: d3.geoEquirectangular },\n { name: \"Gilbert’s two-world\", value: d3.geoGilbert },\n { name: \"Mercator\", value: d3.geoMercator },\n {\n name: \"Mollweide (interrupted hemispheres)\",\n value: d3.geoInterruptedMollweideHemispheres\n },\n { name: \"Natural Earth\", value: d3.geoNaturalEarth1 },\n { name: \"Natural Earth II\", value: d3.geoNaturalEarth2 },\n { name: \"orthographic\", value: d3.geoOrthographic },\n { name: \"Robinson\", value: d3.geoRobinson }\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":188,"value":"height = fitWidth(projection, width)","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"function fitWidth(projection, width) {\n const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);\n const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale(projection.scale() * (l - 1) / l).precision(0.2);\n return dy;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":182,"value":"outline = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":179,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs"},{"id":176,"value":"land = topojson.feature(world, world.objects.land)","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"world = fetch(\"https://cdn.jsdelivr.net/npm/world-atlas@2/land-50m.json\").then(response => response.json())","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":16,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}