30:Ta2b,// Rendered in the resize component above sampleMap = draw( { projection: d3.geoTransverseMercator().rotate([Γ, 0, 0]), background: getSvgPatternUrl("water"), //"hsl(217, 88%, 68%)", // scaleBar: false, // northingArrow: false, extent: baliGeo, patterns: [getSvgPattern("water")], layers: [ { geojson: baliGeo, fill: "hsl(42, 46%, 93%)", stroke: "hsl(39, 50%, 90%)" }, { active: activeFeatures.includes("Forest"), geojson: baliForestGeo, fill: "hsl(136, 40%, 65%)", stroke: "none" }, { active: activeFeatures.includes("Water bodies"), geojson: baliWaterBodiesGeo, fill: "hsl(217, 88%, 79%)", stroke: "none" }, { active: activeFeatures.includes("Rivers"), geojson: baliRiversGeo, stroke: "hsl(217, 88%, 68%)" }, { type: "graticule", stroke: "white", strokeOpacity: 0.5, step: [0.5, 0.5] }, { active: activeFeatures.includes("Water bodies"), type: "labels", callout: true, geojson: largestWaterBodiesGeo, label: (f) => f.properties?.tags?.name, dLat: (f, i) => ((i % 2 === 0 ? 1 : -1) * 1) / 10, textAnchor: "start" }, { type: "graticule-labels", step: [0.5, 0.5], tickPositions, place: graticuleTickInside ? "inside" : undefined }, { type: "outline" } // { // type: "custom", // render: function (svg, map) { // svg // .append("g") // .append("rect") // .attr("x", map.width / 2) // .attr("y", map.height / 2) // .attr("height", 100) // .attr("width", 200) // .style("fill", "red"); // } // } ] }, { header: `Water Bodies in Bali, Indonesia`, legend: [ { label: "Rivers", stroke: "hsl(217, 88%, 68%)" }, { label: "Forest", fill: "hsl(136, 40%, 65%)" }, { label: "Lakes", fill: "hsl(217, 88%, 79%)" }, { label: "Ocean", fill: getSvgPatternUrl("water") //"hsl(217, 88%, 68%)" } ], content: md`### About Bali Bali is a province of Indonesia and the westernmost of the Lesser Sunda Islands. The province is Indonesia's main tourist destination.
[More on Wikipedia](https://en.wikipedia.org/wiki/Bali)`, footer: md`**Attribution:** Data are from [www.openstreetmap.org](https://www.openstreetmap.org), made available under ODbL.` }, { debug } )31:T61d,function draw( mapOptions, asideOptions, // Folio Options { borderWidth = 1, border = "whitesmoke", padding = "1rem", fontFamily = defaultFontFamily, debug } = {} ) { const mapEl = drawMap({ ...mapOptions, debug }); const asideEls = generateAsideElements({ ...asideOptions, debug }).filter( Boolean ); const hasSidebar = Boolean(asideEls.length); const folioBorderWidth = typeof borderWidth === "number" ? `${borderWidth}px` : borderWidth; initializeStyles(); return html`

${ hasSidebar ? html`` : undefined }

${mapEl}

`; }32:T992,function generateSwatch({ symbol, fill, fillOpacity = 1, stroke, strokeWidth, strokeDasharray = "none", strokeOpacity = 1, strokeLinecap = "round", strokeLinejoin = "round", swatchWidth = 32, swatchHeight = 16 } = {}) { const node = DOM.svg(swatchWidth, swatchHeight); const svg = d3.select(node).attr("style", "display: block"); strokeWidth = strokeWidth ?? (stroke != null ? 1 : 0); if (symbol) { const symbolSize = 16; const maxSymbolSize = swatchHeight - 2; const symbolObj = symbols[symbol] ?? symbols["circle"]; const mark = d3.symbol(symbolObj).size(symbolSize); const path = svg .append("path") .attr("d", mark()) .attr("fill", fill) .attr("transform", `translate(${[swatchWidth / 2, swatchHeight / 2]})`) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-dasharray", strokeDasharray); setTimeout(() => { // See https://observablehq.com/@d3/fitted-symbols const bbox = path.node().getBBox(); const error = Math.min( maxSymbolSize / bbox.width, maxSymbolSize / bbox.height ); mark.size(error * error * symbolSize); path.attr("d", mark()); }); } else if (fill) { svg .append("rect") .attr("x", strokeWidth / 2) .attr("y", strokeWidth / 2) .attr("width", swatchWidth - strokeWidth) .attr("height", swatchHeight - strokeWidth) .attr("fill", fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-dasharray", strokeDasharray); } else { svg .append("line") .attr("x1", strokeWidth / 2) .attr("y1", swatchHeight / 2) .attr("x2", swatchWidth - strokeWidth / 2) .attr("y2", swatchHeight / 2) .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-dasharray", strokeDasharray); } return node; }33:T1731,function drawMap({ // Map projection = d3.geoEquirectangular(), extent, width = 800, layers = [], padding = 10, marginLeft = 1, marginRight = 1, marginTop = 1, marginBottom = 1, height, background = "none", scaleBar = true, units = "km", // Supporst "km" | "miles" northingArrow = true, patterns, debug } = {}) { // Change to `max-width` if the map need not be expanded more than the width const svgBaseStyles = "display: block; width: 100%; height: auto; height: intrinsic;"; layers = layers.filter(Boolean).filter((d) => d.active !== false); // Adjust margins based graticule-labels layer positions const graticuleTicksLayer = layers.find( (l) => l.type === "graticule-labels" && l.place != "inside" ); if (graticuleTicksLayer) { const graticulePositions = graticuleTicksLayer.tickPositions || drawGraticuleLabels.positions; if (graticulePositions.includes("top")) { marginTop = Math.max(marginTop, drawGraticuleLabels.margins.y); } if (graticulePositions.includes("bottom")) { marginBottom = Math.max(marginBottom, drawGraticuleLabels.margins.y); } if (graticulePositions.includes("left")) { marginLeft = Math.max(marginLeft, drawGraticuleLabels.margins.x); } if (graticulePositions.includes("right")) { marginRight = Math.max(marginRight, drawGraticuleLabels.margins.x); } } const extentGeo = extent != null ? getExtentAsFeature(extent) : featureCollectionFromLayers(layers); height = height ?? getHeight({ projection, padding, marginTop, marginRight, marginBottom, marginLeft, width, extentGeo }); projection.fitExtent( [ [padding + marginLeft, padding + marginTop], [ width - 2 * padding - marginLeft - marginRight, height - 2 * padding - marginTop - marginBottom ] ], extentGeo ); projection.clipExtent([ [marginLeft, marginTop], [width - marginRight, height - marginBottom] ]); const hasMarkings = scaleBar || northingArrow; const northArrowEl = northingArrow ? drawNorthArrow({ projection, width, height }) : undefined; const scaleBarEl = scaleBar ? drawScaleBar({ projection, width, height, padding, marginTop, marginRight, marginBottom, marginLeft, units, svgBaseStyles, debug }) : undefined; const node = DOM.svg(width, height); const svg = d3.select(node); svg.attr("style", svgBaseStyles); // Add patterns if (patterns?.length) { const defs = svg.select("defs").node() ? svg.select("defs") : svg.insert("defs", ":first-child"); patterns.forEach((p) => defs.node().appendChild(p)); } const canvas = svg.append("g"); //.attr("transform", `translate(${marginLeft},${marginTop})`); if (background != null || background !== "none") { canvas .append("rect") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginRight - marginLeft) .attr("height", height - marginTop - marginBottom) .attr("fill", background); } layers.forEach((l) => { const selection = canvas.append("g"); switch (l.type) { case "custom": if (typeof l.render === "function") { const { type, render, ...restOfLayer } = l; l.render( selection, { projection, width, height, svg }, restOfLayer ); } break; case "symbols": drawSymbols({ selection, projection, width, height, layer: l, debug }); break; case "labels": drawLabels({ selection, projection, width, height, layer: l, debug }); break; case "graticule": drawGraticules({ svg, // Needs add defs and cilp selection, projection, width, height, marginTop, marginRight, marginBottom, marginLeft, layer: l, debug }); break; case "graticule-labels": drawGraticuleLabels({ selection: svg, // Don't need translated projection, width, height, marginTop, marginRight, marginBottom, marginLeft, layer: l, debug }); break; case "outline": drawOutline({ selection, projection, width, height, marginTop, marginRight, marginBottom, marginLeft, layer: l, debug }); break; default: if (l.geojson) { drawSimpleLayer({ selection, projection, width, height, layer: l, debug }); } break; } }); if (debug) { canvas .append("rect") .attr("stroke", "#f0f") .attr("fill", "none") .attr("x", padding + marginLeft) .attr("y", padding + marginTop) .attr("width", width - 2 * padding - marginLeft - marginRight) .attr("height", height - 2 * padding - marginTop - marginBottom); } return hasMarkings ? html`

${node}

${scaleBarEl}

${northArrowEl}

` : node; }34:T585,function drawGraticules({ svg, selection, projection, width, height, marginTop, marginRight, marginBottom, marginLeft, layer }) { const { geojson, stroke = "#ccc", strokeWidth = 1, strokeOpacity = 1, strokeLinecap = "round", strokeLinejoin = "round", strokeDasharray = 2, style, step = [10, 10], clipId = DOM.uid("clip"), precision } = layer; const graticuleGenerator = d3.geoGraticule().step(step); if (precision) { graticuleGenerator.precision(precision); } const graticules = graticuleGenerator(); const path = d3.geoPath(projection); const defs = svg.select("defs").node() ? svg.select("defs") : svg.insert("defs", ":first-child"); defs .append("clipPath") .attr("id", clipId.id) .append("rect") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - (marginLeft + marginRight)) .attr("height", height - (marginTop + marginBottom)); selection .append("path") .attr("class", "graticules") .attr("fill", "none") .style("stroke", stroke) .style("stroke-width", strokeWidth) .style("stroke-opacity", strokeOpacity) .style("stroke-linecap", strokeLinecap) .style("stroke-linejoin", strokeLinejoin) .style("stroke-dasharray", strokeDasharray) .attr("style", style) .attr("clip-path", clipId.id) .attr("d", path(graticules)); }35:T1d9c,drawGraticuleLabels = { const defaultPositions = ["top", "left", "bottom", "right"]; function drawGraticuleTicks({ selection, projection, width, height, marginTop, marginRight, marginBottom, marginLeft, layer, debug }) { const { tickPositions = defaultPositions, place = "outside", // or, "inside" fontFamily = "inherit", fontSize = "12px", fontWeight = "500", fontFill = "black", fontStroke = "white", fontStrokeWidth = 3, stroke = "black", strokeWidth = 1, strokeOpacity = 1, strokeLinecap = "round", strokeLinejoin = "round", tickSize = 4, tickPadding = 4, step = [10, 10], closenessPrecision = 0.001, precision, formatLonTick, formatLatTick } = layer; const formatLatLon = d3.format(".2~f"); const formatLongitude = typeof formatLonTick === "function" ? formatLonTick : (x) => `${formatLatLon(Math.abs(x))}°${x < 0 ? "W" : "E"}`; const formatLatitude = typeof formatLatTick === "function" ? formatLatTick : (y) => `${formatLatLon(Math.abs(y))}°${y < 0 ? "S" : "N"}`; const boundsGeo = getBoundsAsFeature({ projection, width, height, marginTop, marginRight, marginBottom, marginLeft, precision }); const pos = graticuleLabelPositions(boundsGeo, { step }); const P = pos.map((p) => { const [x, y] = projection(p); p.x = x; p.y = y; return p; }); const g = selection.append("g").attr("class", "graticule-labels"); let topTicks = [], rightTicks = [], bottomTicks = [], leftTicks = []; if (tickPositions.includes("top")) { const topMost = d3.min(P, (p) => p.y); let topTicks = pos.filter( (p) => Math.abs(p.y - topMost) <= closenessPrecision ); topTicks = topTicks.filter((t) => t.type === "longitude"); const topTickG = g .append("g") .attr("class", "bottom-graticules-ticks") .selectAll(".tick") .data(topTicks) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(${d.x},${d.y})`); topTickG .append("line") .attr("class", "tick-line") .attr("y2", (place === "outside" ? -1 : 1) * tickSize); topTickG .append("text") .attr("dy", (place === "outside" ? -1 : 1) * (tickSize + tickPadding)) .attr("text-anchor", "middle") .attr("dominant-baseline", place === "outside" ? "auto" : "hanging"); } if (tickPositions.includes("bottom")) { const bottomMost = d3.max(P, (p) => p.y); let bottomTicks = pos.filter( (p) => Math.abs(p.y - bottomMost) <= closenessPrecision ); bottomTicks = bottomTicks.filter((t) => t.type === "longitude"); const bottomTickG = g .append("g") .attr("class", "bottom-graticules-ticks") .selectAll(".tick") .data(bottomTicks) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(${d.x},${d.y})`); bottomTickG .append("line") .attr("class", "tick-line") .attr("y2", (place === "outside" ? 1 : -1) * tickSize); bottomTickG .append("text") .attr("dy", (place === "outside" ? 1 : -1) * (tickSize + tickPadding)) .attr("text-anchor", "middle") .attr("dominant-baseline", place === "outside" ? "hanging" : "auto"); } if (tickPositions.includes("right")) { const rightMost = d3.max(P, (p) => p.x); rightTicks = pos.filter( (p) => Math.abs(p.x - rightMost) <= closenessPrecision ); rightTicks = rightTicks.filter((t) => t.type === "latitude"); const rightTickG = g .append("g") .attr("class", "left-graticules-ticks") .selectAll(".tick") .data(rightTicks) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(${d.x},${d.y})`); rightTickG .append("line") .attr("class", "tick-line") .attr("x2", (place === "outside" ? 1 : -1) * tickSize); rightTickG .append("text") .attr("dy", (place === "outside" ? -1 : 1) * (tickSize + tickPadding)) .attr("dominant-baseline", place === "outside" ? "auto" : "hanging") .attr("text-anchor", "middle") .attr("transform", "rotate(90)"); } if (tickPositions.includes("left")) { const leftMost = d3.min(P, (p) => p.x); leftTicks = pos.filter( (p) => Math.abs(p.x - leftMost) <= closenessPrecision ); leftTicks = leftTicks.filter((t) => t.type === "latitude"); const leftTickG = g .append("g") .attr("class", "left-graticules-ticks") .selectAll(".tick") .data(leftTicks) .join("g") .attr("class", "tick") .attr("transform", (d) => `translate(${d.x},${d.y})`); leftTickG .append("line") .attr("class", "tick-line") .attr("x2", (place === "outside" ? -1 : 1) * tickSize); leftTickG .append("text") .attr("dy", (place === "outside" ? -1 : 1) * (tickSize + tickPadding)) .attr("dominant-baseline", place === "outside" ? "auto" : "hanging") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)"); } // Add tick styles g.selectAll(".tick-line") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin); // Add label text g.selectAll("text") .attr("font-family", fontFamily) .attr("font-size", fontSize) .attr("font-weight", fontWeight) .attr("fill", fontFill) .attr("stroke", fontStroke) .attr("stroke-width", fontStrokeWidth) .attr("stroke-linejoin", "round") .attr("stroke-linecap", "round") .attr("paint-order", "stroke") .text((d) => d.type === "longitude" ? formatLongitude(d[0]) : formatLatitude(d[1]) ); if (debug) { g.append("path") .attr("class", "debug-dgt-bounds") .attr("d", d3.geoPath(projection)(boundsGeo)) .attr("fill", "#0ff") .attr("fill-opacity", 0.5) .attr("stroke", "none"); g.selectAll(".debug-dgt-corner") .data([ [marginLeft, marginTop], [width - marginRight, marginTop], [width - marginRight, height - marginBottom], [marginLeft, height - marginBottom] ]) .join("circle") .attr("class", "debug-dgt-corner") .attr("fill", "#0ff") .attr("cx", (d) => d[0]) .attr("cy", (d) => d[1]) .attr("r", 5); g.append("g") .attr("class", "graticules-intersection-points") .selectAll(".graticules-intersection-point") .data(pos) .join("circle") .attr("class", "graticules-intersection-point") .attr("r", 4) .attr("fill", "none") .attr("stroke-width", 2) .each(function (d) { const [cx, cy] = projection(d); d3.select(this) .attr("cx", cx) .attr("cy", cy) .attr("stroke", d.type === "longitude" ? "red" : "orange"); }); } } drawGraticuleTicks.margins = { x: 20, y: 20 }; drawGraticuleTicks.positions = defaultPositions; return drawGraticuleTicks; }36:T11dc,function drawLabels({ selection, projection, layer, debug }) { let { geojson, label, callout = false, fontFamily = "inherit", fontSize = 12, fontWeight = "500", lineHeight, fontFill = "black", fontStroke = "white", fontStrokeWidth = 3, stroke = "black", strokeWidth = 1, strokeOpacity = 1, strokeLinecap = "round", strokeLinejoin = "round", dominantBaseline, textAnchor, dLat = 0, dLon = 0, dCLat = 0, dCLon = 0, calloutStroke = "black", calloutStrokeWidth = 1.25, callOutStrokeDasharray = "none", callOutStrokeOpacity = 1, callOutStrokeLinecap = "round", callOutStrokeLinejoin = "round", calloutPadding = 3 } = layer; if (geojson == null) return; const labelGenerator = typeof label === "function" ? label : () => label || ""; const F = Array.isArray(geojson.features) ? [...geojson.features] : [geojson]; const dLatFn = typeof dLat === "function" ? dLat : () => dLat; const dLonFn = typeof dLon === "function" ? dLon : () => dLon; const dCLatFn = typeof dCLat === "function" ? dCLat : () => dCLat; const dCLonFn = typeof dCLon === "function" ? dCLon : () => dCLon; const line = d3.line(); let LC = F.map(computeLabelPole); let CC = [...LC]; LC = LC.map(([lon, lat], i) => [ lon + dLonFn(F[i], i), lat + dLatFn(F[i], i) ]); CC = CC.map(([lon, lat], i) => [ lon + dCLonFn(F[i], i), lat + dCLatFn(F[i], i) ]); selection.attr("class", "labels"); const labels = selection .selectAll(".label-group") .data(F) .join("g") .join("text") .attr("class", "label-group"); labels .append("text") .attr("font-family", fontFamily) .attr("font-size", fontSize) .attr("font-weight", fontWeight) .attr("fill", fontFill) .attr("stroke", fontStroke) .attr("stroke-width", fontStrokeWidth) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-linecap", strokeLinecap) .attr("dominant-baseline", dominantBaseline) .attr("text-anchor", textAnchor) .attr("paint-order", "stroke"); // Insert label text and break in lines labels.each(function (d, i) { const s = d3.select(this).select("text"); const [x, y] = projection(LC[i]); s.attr("x", x) .attr("y", y) .call(multilineText, { fontSize, lineHeight, textAnchor, dominantBaseline, textFn: (d, i) => labelGenerator(d, i) }); if (debug) { selection .append("circle") .attr("cx", x) .attr("cy", y) .attr("r", 2) .attr("fill", "#f0f"); } }); // Add arrows if (callout) { labels.each(function (d, i) { const label = d3.select(this); const labelText = label.select("text"); const [x, y] = projection(LC[i]); const [cx, cy] = projection(CC[i]); // Draw the arrows on next cycle to get bounding box of the label setTimeout(() => { const padding = calloutPadding + calloutStrokeWidth / 2; const rect = labelText.node().getBBox(); let x1 = cx; let y1 = cy; let x2 = rect.x; let y2 = rect.y + rect.height + padding; let x3 = rect.x + rect.width; let y3 = y2; // Connect on right edge if (rect.x + rect.width / 2 < cx) { x3 = rect.x; x2 = rect.x + rect.width; } if (rect.y > cy) { y2 = rect.y - padding; y3 = y2; } label .append("path") .attr( "d", line([ [x1, y1], [x2, y2], [x3, y3] ]) ) .attr("fill", "none") .attr("stroke", calloutStroke) .attr("stroke-width", calloutStrokeWidth) .attr("stroke-dasharray", callOutStrokeDasharray) .attr("stroke-opacity", callOutStrokeOpacity) .attr("stroke-linecap", callOutStrokeLinecap) .attr("stroke-join", callOutStrokeLinejoin); if (debug) { label .append("rect") .attr("x", rect.x) .attr("y", rect.y) .attr("width", rect.width) .attr("height", rect.height) .attr("fill", "none") .attr("stroke", "#f0f"); } }); if (debug) { label .append("circle") .attr("cx", cx) .attr("cy", cy) .attr("r", 2) .attr("fill", "none") .attr("stroke", "#f0f"); } }); } }37:T4c8,function drawSymbols({ selection, projection, layer }) { const { geojson, size = 64, symbol = "circle", fill = "black", fillOpacity = "1", stroke = "none", strokeWidth = 0.75, strokeOpacity = 1, strokeLinecap = "round", strokeLinejoin = "round", strokeDasharray = "none", style } = layer; if (geojson == null) return; let features = Array.isArray(geojson.features) ? [...geojson.features] : [geojson]; const L = features.map((f) => { if (f?.geometry?.type === "Point") return f.geometry.coordinates; return d3.geoCentroid(f); }); const symbolObj = symbols[symbol] ?? symbols["cirlce"]; const mark = d3.symbol(symbolObj).size(size); selection .append("g") .selectAll("path") .data(L) .join("path") .attr("d", mark()) .attr("transform", (pos) => `translate(${projection(pos)})`) .attr("fill", fill) .attr("fill-opacity", fillOpacity) .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-dasharray", strokeDasharray) .attr("style", style); }38:[{"id":"2ae3a84374523158ce81da7d469bc94706e04aa7ab7eb221f616a9e0e20e8c94bd2b9a4c96005d848fd4f6867b0d6e6038dacf52d43c9f6c1fcb69504cea4d5f","href":"https://static.observableusercontent.com/files/2ae3a84374523158ce81da7d469bc94706e04aa7ab7eb221f616a9e0e20e8c94bd2b9a4c96005d848fd4f6867b0d6e6038dacf52d43c9f6c1fcb69504cea4d5f","name":"admin_okhaldhunga_district@2.geojson","type":"application/geo+json","lastModified":1673081259759.594,"size":4838},{"id":"0e2e4209361cf23f637218b5941f6e713b0a1582e963cc1eaafa17f6105389668ad108fb8acd1a6379078991247342d266d56e43ae2c4671619927afb13babc6","href":"https://static.observableusercontent.com/files/0e2e4209361cf23f637218b5941f6e713b0a1582e963cc1eaafa17f6105389668ad108fb8acd1a6379078991247342d266d56e43ae2c4671619927afb13babc6","name":"bali-rivers.geo.json","type":"application/json","lastModified":1669807167469.299,"size":1188805},{"id":"bddf267bbee8856594de9e0f55a127064bdb7cde78d84a207112fa60000141e822090417f093522be12bee02feb4d68bc89a0297f8ccfc6f3922593fd70de232","href":"https://static.observableusercontent.com/files/bddf267bbee8856594de9e0f55a127064bdb7cde78d84a207112fa60000141e822090417f093522be12bee02feb4d68bc89a0297f8ccfc6f3922593fd70de232","name":"bali-water-bodies.geo.json","type":"application/json","lastModified":1669807166886.996,"size":300540},{"id":"29bb1b03cd577cb0322a328e1b1112d8fe5336baa636ededdc3eb498b739a218fe65f27fbb9c01d4691e3de6c2d56823a59ce5392917c1e2bc59bad9da06e11d","href":"https://static.observableusercontent.com/files/29bb1b03cd577cb0322a328e1b1112d8fe5336baa636ededdc3eb498b739a218fe65f27fbb9c01d4691e3de6c2d56823a59ce5392917c1e2bc59bad9da06e11d","name":"bali-forest.geo.json","type":"application/json","lastModified":1669807166833.748,"size":285526},{"id":"8980de0d1e443c827d1b76134c7aedb176a6e8ee4292af70a57866a19a0b0f80088b17e5fd3c9c78b452aeda6bd33848ceb1ef6bdd62a4e7a1a953a8d7982e1c","href":"https://static.observableusercontent.com/files/8980de0d1e443c827d1b76134c7aedb176a6e8ee4292af70a57866a19a0b0f80088b17e5fd3c9c78b452aeda6bd33848ceb1ef6bdd62a4e7a1a953a8d7982e1c","name":"bali@1.geo.json","type":"application/json","lastModified":1669823578937.899,"size":348965},{"id":"552c32f13e21c6b6f3084714aa839d01a0c771a4777b409cb0ce2f26c3eae4478092d5e2d301d13f849a525d91a62f161a3f290da23e4c56c59f3797350794d9","href":"https://static.observableusercontent.com/files/552c32f13e21c6b6f3084714aa839d01a0c771a4777b409cb0ce2f26c3eae4478092d5e2d301d13f849a525d91a62f161a3f290da23e4c56c59f3797350794d9","name":"nepal_provinces.geo.json","type":"application/json","lastModified":1669826800714.228,"size":994400}] 2e:{"title":"Map Folio","cells":[{"id":0,"value":"# Map Folio","pinned":false,"hidden":false,"mode":"md"},{"id":2193,"value":"Map Folio is an experiment in creating maps using SVG, HTML, and D3.js. It is heavily inspired by Nicolas Lambert’s [Bertin.js](https://observablehq.com/collection/@neocartocnrs/bertin). Because of some peculiar requirements of the project, we went on to create our own, tiny, mapping library. The legend and markings needed to be readable on mobile screens. We wanted callout labels, graticule labels, and pattern fill for some geographic features. The whole code is written in an Observable notebook. ","pinned":false,"hidden":false,"mode":"md"},{"id":411,"value":"viewof activeFeatures = Inputs.checkbox([\"Rivers\", \"Water bodies\", \"Forest\"], {\n label: \"Features\",\n value: [\"Forest\", \"Rivers\", \"Water bodies\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":477,"value":"viewof Γ = Inputs.range([-180, 180], {step:0.01, value:-80, label:\"Rotate\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1220,"value":"viewof tickPositions = Inputs.checkbox([\"top\", \"right\", \"bottom\", \"left\"], {\n label: \"Graticule Ticks\",\n value: [\"top\", \"right\", \"bottom\", \"left\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":1186,"value":"viewof graticuleTickInside = Inputs.toggle({label: \"Place graticule ticks inside\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":149,"value":"map_view = resizable ? resize`${sampleMap}` : html`${sampleMap}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"viewof resizable = Inputs.toggle({label: \"Show preview in a resizable container\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":681,"value":"viewof debug = Inputs.toggle({label: \"Debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":11,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":1241,"value":"function generateAsideElements({\n header,\n footer,\n legendTitle,\n legend,\n content,\n headerTag = \"h2\",\n footerColor = \"#595959\"\n} = {}) {\n const headerEl = header\n ? html`

${html({\n raw: [`<${headerTag}>${header}`]\n })}`\n : undefined;\n const footerEl = footer\n ? html`

${footer}

`\n : undefined;\n const legendEl = legend\n ? generateLegendElements(legend, legendTitle)\n : undefined;\n\n const contentEl = content\n ? html`

${content}

`\n : undefined;\n\n return [headerEl, contentEl, legendEl, footerEl];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1303,"value":"function generateLegendElements(legend, legendTitle = \"Legend\") {\n \n legend = legend.filter(Boolean).filter((d) => d.active !== false);\n \n const items = legend.map(\n (l) =>\n html`

${generateSwatch(l)}

${l.label}`\n );\n\n return html`

${legendTitle}

\n ${items}\n \n

`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":1309,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"},{"id":288,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":788,"value":"### Layers","pinned":false,"hidden":false,"mode":"md"},{"id":319,"value":"function drawSimpleLayer({ selection, projection, layer }) {\n const {\n geojson,\n fill = \"none\",\n fillOpacity = \"1\",\n stroke = \"black\",\n strokeWidth = 0.75,\n strokeOpacity = 1,\n strokeLinecap = \"round\",\n strokeLinejoin = \"round\",\n strokeDasharray = \"none\",\n style\n } = layer;\n\n if (geojson == null) return;\n\n const features = Array.isArray(geojson.features)\n ? [...geojson.features]\n : [geojson];\n\n selection\n .selectAll(\"path\")\n .data(features)\n .join(\"path\")\n .attr(\"d\", d3.geoPath(projection))\n .attr(\"fill\", fill)\n .attr(\"fill-opacity\", fillOpacity)\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", strokeWidth)\n .attr(\"stroke-opacity\", strokeOpacity)\n .attr(\"stroke-linecap\", strokeLinecap)\n .attr(\"stroke-linejoin\", strokeLinejoin)\n .attr(\"stroke-dasharray\", strokeDasharray)\n .attr(\"style\", style);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":733,"value":"function drawOutline({\n selection,\n projection,\n width,\n height,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n layer\n}) {\n const {\n stroke = \"black\",\n strokeWidth = 1,\n strokeOpacity = 1,\n strokeLinecap = \"round\",\n strokeLinejoin = \"round\",\n strokeDasharray = \"none\",\n style,\n clipId\n } = layer;\n\n selection\n .append(\"rect\")\n .attr(\"x\", marginLeft)\n .attr(\"y\", marginTop)\n .attr(\"width\", width - marginLeft - marginRight)\n .attr(\"height\", height - marginTop - marginBottom)\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", stroke)\n .attr(\"stroke-width\", strokeWidth)\n .attr(\"stroke-opacity\", strokeOpacity)\n .attr(\"stroke-linecap\", strokeLinecap)\n .attr(\"stroke-linejoin\", strokeLinejoin)\n .attr(\"stroke-dasharray\", strokeDasharray)\n .attr(\"style\", style);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":551,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":826,"value":"$35","pinned":true,"hidden":false,"mode":"ojs"},{"id":2135,"value":"#### `drawLabels`\n\nUses [@mapbox/polylabel](https://github.com/mapbox/polylabel) to compute label positions.","pinned":false,"hidden":false,"mode":"md"},{"id":1696,"value":"$36","pinned":true,"hidden":false,"mode":"ojs"},{"id":2198,"value":"#### `drawSymbols`","pinned":false,"hidden":false,"mode":"md"},{"id":2197,"value":"symbols = \"circle cross diamond square star triangle wye\"\n .split(/ /)\n .reduce((obj, n, i) => ({ [n]: d3.symbolsFill[i], ...obj }), {})\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":2196,"value":"$37","pinned":true,"hidden":false,"mode":"ojs"},{"id":797,"value":"### Markings","pinned":false,"hidden":false,"mode":"md"},{"id":651,"value":"function drawScaleBar({\n projection,\n width,\n height,\n padding,\n marginTop,\n marginRight,\n marginBottom,\n marginLeft,\n units,\n svgBaseStyles,\n scaleHeight = 48,\n debug\n}) {\n const node = DOM.svg(width, scaleHeight);\n const svg = d3.select(node).attr(\"style\", svgBaseStyles);\n\n const x = 3;\n const y = 24;\n\n if (debug) {\n svg\n .append(\"rect\")\n .attr(\"width\", width)\n .attr(\"height\", scaleHeight)\n .attr(\"fill\", \"#ff0\");\n }\n\n const scaleBar = d3GeoScaleBar\n .geoScaleBar()\n .projection(projection)\n .size([width, height])\n .label(units == \"miles\" ? \"Miles\" : \"Kilometres\")\n .orient(d3GeoScaleBar.geoScaleTop)\n .tickSize(6)\n .left(0)\n .top(0)\n .units(\n units === \"miles\"\n ? d3GeoScaleBar.geoScaleMiles\n : d3GeoScaleBar.geoScaleKilometers\n );\n const bar = svg\n .append(\"g\")\n .attr(\"transform\", `translate(${x},${y})`)\n .append(\"g\");\n\n bar.call(scaleBar);\n bar.attr(\"font-family\", \"inherit\");\n\n return node;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":505,"value":"function drawNorthArrow({ projection, width, height } = {}) {\n const angle = computeAngleToNorthAtCentroid(projection, width, height);\n return svg`\n${northArrow()}