2e:null 2f:["$","title",null,{"children":"Graticule labels for small regions | Saneef H. Ansari | Observable"}] 34:T91e,precisionExample = { const width = 500; const height = 600; const geo = indiaGeo; const padding = 20; const step = [3, 3]; const node = DOM.svg(width, height); const svg = d3.select(node); const projection = d3.geoTransverseMercator().rotate([-55, 0, 0]); projection.fitExtent( [ [padding, padding], [width - padding, height - padding] ], geo ); projection.clipExtent([ [0, 0], [width, height] ]); const graticuleGenerator = d3.geoGraticule().step(step); const graticules = graticuleGenerator(); const path = d3.geoPath(projection); svg .append("g") .attr("class", "features") .selectAll(".feature") .data(geo.features) .join("path") .attr("class", "feature") .attr("d", path) .attr("fill", "none") .attr("stroke", "#999") .attr("stroke-width", 0.5); svg .append("g") .attr("class", "graticules") .append("path") .attr("class", "graticules") .attr("stroke", "#999") .attr("stroke-width", 0.5) .attr("fill", "none") .attr("d", path(graticules)); const outlineStrokeWidth = 0.5; svg .append("g") .attr("class", "outline") .append("rect") .attr("stroke", "#999") .attr("stroke-width", outlineStrokeWidth) .attr("fill", "none") .attr("x", outlineStrokeWidth / 2) .attr("y", outlineStrokeWidth / 2) .attr("width", width - outlineStrokeWidth) .attr("height", height - outlineStrokeWidth); const line = [ [width / 2, padding], [width / 2, height - padding] ]; let verticeYs = d3.range(line[0][1], line[1][1] + 1, precision); verticeYs = [...verticeYs, line[1][1]]; const vertices = verticeYs.map((y) => [width / 2, y]); const latLons = vertices.map((p) => projection.invert(p)); const lineGeo = turfHelpers.lineString(latLons); console.log(lineGeo); svg .append("g") .attr("class", "sperical-space") .append("path") .attr("d", path(lineGeo)) .attr("fill", "none") .attr("stroke", sphericalGeomColor) .attr("stroke-width", 2); svg .append("g") .attr("class", "pixel-space") .append("line") .attr("x1", line[0][0]) .attr("y1", line[0][1]) .attr("x2", line[1][0]) .attr("y2", line[1][1]) .attr("stroke", pixelColor) .attr("stroke-width", 2); return node; }35:Tf41,function drawGraticuleTicks( svgNode, { step = [1, 1], fontSize = 10, fontFamily = "inherit", fontFill = "black", fontStroke = "white", fontStrokeWidth = 2, tickSize = 0, tickPadding = 4, tickStroke = "black", tickStrokeWidth = 0.75, position = "inside", // Supports "inside" and "outside", closenessPrecision = 0.001, debug = false } = {} ) { const { projection, height, width, marginTop, marginRight, marginLeft, marginBottom } = svgNode.props; const boundsGeo = viewportAsGeo({ projection, width, height, marginTop, marginRight, marginBottom, marginLeft }); 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 = d3.select(svgNode).append("g").attr("class", "graticule-ticks"); const leftMost = d3.min(P, (p) => p.x); let leftTicks = pos.filter( (p) => Math.abs(p.x - leftMost) <= closenessPrecision ); leftTicks = leftTicks.filter((t) => t.type === "latitude"); 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"); // Left ticks 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", (position === "outside" ? -1 : 1) * tickSize); leftTickG .append("text") .attr("dy", (position === "outside" ? -1 : 1) * (tickSize + tickPadding)) .attr("dominant-baseline", position === "outside" ? "auto" : "hanging") .attr("text-anchor", "middle") .attr("transform", "rotate(-90)"); // Bottom Ticks 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", (position === "outside" ? 1 : -1) * tickSize); bottomTickG .append("text") .attr("dy", (position === "outside" ? 1 : -1) * (tickSize + tickPadding)) .attr("text-anchor", "middle") .attr("dominant-baseline", position === "outside" ? "hanging" : "auto"); g.selectAll(".tick-line") .attr("stroke", tickStroke) .attr("stroke-width", tickStrokeWidth); // Add label text g.selectAll("text") .attr("font-family", fontFamily) .attr("font-size", fontSize) .attr("fill", fontFill) .attr("stroke", fontStroke) .attr("stroke-width", fontStrokeWidth) .attr("paint-order", "stroke") .text((d) => d.type === "longitude" ? formatLongitude(d[0]) : formatLatitude(d[1]) ); if (debug) { g.append("g") .selectAll(".edge-points") .data(boundsGeo.coordinates[0]) .join("circle") .attr("class", "edge-points") .attr("r", ".75") .attr("fill", "#0ff") .each(function (d) { const [x, y] = projection(d); d3.select(this).attr("cx", x).attr("cy", y); }); 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"); }); } }36:T655,function drawGraticules( svgNode, { step = [1, 1], graticulePrecision = 2.5, stroke = "#999", strokeWidth = 0.5, clipId = DOM.uid("clip"), debug = false } = {} ) { const { projection, marginTop, marginRight, marginLeft, marginBottom, height, width, padding } = svgNode.props; const canvas = d3.select(svgNode); const graticuleGenerator = d3 .geoGraticule() .step(step) .precision(graticulePrecision); const graticules = graticuleGenerator(); const path = d3.geoPath(projection); const extent = graticuleGenerator.extent(); const defs = d3.select(svgNode).select("defs").node() ? d3.select(svgNode).select("defs") : d3.select(svgNode).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)); const g = d3.select(svgNode).append("g").attr("class", "key-graticules"); g.append("path") .attr("class", "graticules") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("fill", "none") .attr("clip-path", clipId) .attr("d", path(graticules)); g.append("rect") .attr("class", "graticule-outline") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - (marginLeft + marginRight)) .attr("height", height - (marginTop + marginBottom)); }37:T994,function drawMap( geo, { width = 640, height, marginTop = 1, marginLeft = 1, marginBottom = 1, marginRight = 1, padding = 30, projection = d3.geoIdentity().reflectY(true), fill = "none", stroke = "black", strokeWidth = 0.75, strokeLinejoin = "round", backgroundFill = "#fff", debug = false } = {} ) { // If height is not provided, compute from Geo and projection if (height == null) { const fauxProjection = d3.geoIdentity().reflectY(true); const fauxPath = d3.geoPath(fauxProjection); fauxProjection.fitWidth( width - (marginLeft + marginRight + 2 * padding), geo ); height = Math.ceil(fauxPath.bounds(geo)[1][1]) + (marginTop + marginBottom + 2 * padding); } projection = projection.scale === undefined ? projection() : projection; // https://github.com/d3/d3-geo/blob/main/README.md#projection_fitSize projection.fitExtent( [ [marginLeft + padding, marginTop + padding], [width - (marginRight + padding), height - (marginBottom + padding)] ], geo ); projection.clipExtent([ [0, 0], [width, height] ]); const path = d3.geoPath(projection); const svg = DOM.svg(width, height); d3.select(svg) .attr("style", "max-width: 100%; height: auto; height: intrinsic;") .style("background", backgroundFill); const canvas = d3.select(svg).append("g").attr("class", "features"); if (debug) { canvas .append("rect") .attr("fill", "none") .attr("stroke", "#f0f") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - (marginLeft + marginRight)) .attr("height", height - (marginTop + marginBottom)); canvas .append("rect") .attr("fill", "none") .attr("stroke", "#f0f") .attr("x", marginLeft + padding) .attr("y", marginTop + padding) .attr("width", width - (marginLeft + marginRight + 2 * padding)) .attr("height", height - (marginTop + marginBottom + 2 * padding)); } canvas .append("path") .datum(geo) .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("stroke-linejoin", strokeLinejoin) .attr("d", path); return Object.assign(svg, { props: { projection, width, height, marginTop, marginLeft, marginBottom, marginRight, padding, geo } }); }38:[{"id":"25a5c86c44a4325c801679973f59243c2b2442d7735ff657ca146abea1158b124f50e398039efe4ee4f5a703d012a2fc4d02676bc64edc1ae96feeb7eef8efc3","href":"https://static.observableusercontent.com/files/25a5c86c44a4325c801679973f59243c2b2442d7735ff657ca146abea1158b124f50e398039efe4ee4f5a703d012a2fc4d02676bc64edc1ae96feeb7eef8efc3","name":"india.states.geo.json","type":"application/json","lastModified":1669998923565.18,"size":864996},{"id":"de7eb7f269083d1f996afce66eaa0a4a188c6b5623e9dd65bdb01c61eb17119bdbd0ee6846578e20878d0b2da50c62c3cb7a9500665a3c249747589cc14382c0","href":"https://static.observableusercontent.com/files/de7eb7f269083d1f996afce66eaa0a4a188c6b5623e9dd65bdb01c61eb17119bdbd0ee6846578e20878d0b2da50c62c3cb7a9500665a3c249747589cc14382c0","name":"bangalore_wards.geojson","type":"application/geo+json","lastModified":1669999611649.535,"size":1145877},{"id":"53bb01820b78f59245f06a8da54324e61af162b479b6a2dd29b4c7b165cf481fdf91fb9494d4d22311151ad46d56db2812679965292b82286e28e08da174910e","href":"https://static.observableusercontent.com/files/53bb01820b78f59245f06a8da54324e61af162b479b6a2dd29b4c7b165cf481fdf91fb9494d4d22311151ad46d56db2812679965292b82286e28e08da174910e","name":"rectactle-mapped-sphere.jpg","type":"image/jpeg","lastModified":1670013545175.3,"size":10519},{"id":"d33b69244e584d1aa36de8d1b006940d10ad6cbdb8afe6f832353ccebc06807cb37d9fe01dc2c28099436bed0a7bfe3b3a817adb6405e5c700d93dd29523f22a","href":"https://static.observableusercontent.com/files/d33b69244e584d1aa36de8d1b006940d10ad6cbdb8afe6f832353ccebc06807cb37d9fe01dc2c28099436bed0a7bfe3b3a817adb6405e5c700d93dd29523f22a","name":"graticules-alignment@2.jpg","type":"image/jpeg","lastModified":1670275655182.379,"size":132951}] 32:{"id":"f0f3c756246a57f1","slug":"graticule-labels-for-small-regions","title":"Graticule labels for small regions","thumbnail":"c079cdd8cbcac00222cf31b05ef7446742c3f9708d9c7420d36b693478f9c221","access_level":"public","create_time":"$D2022-12-02T16:33:46.368Z","update_time":"$D2022-12-09T18:54:24.520Z","view_time":null,"first_public_time":"$D2022-12-02T17:10:43.028Z","has_unpublished_edits":null,"fork":true,"stars":14,"starred":false,"owner":{"type":"team","id":"7a807139c987b4db","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":"starter_2024"},"version":2538,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null}],"members":[{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"Graticule labels for small regions","cells":[{"id":0,"value":"# Graticule labels for small regions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2271,"value":"toc({ headers: \"h2\", hideStartingFrom: \"Imports\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1832,"value":"I wanted to add graticule labels for maps of small regions, drawn with D3. Most\nof the time, these maps are drawn using projections that has rotations or curved\ngraticules. I couldn't get the labels align graticules with the common\ntutorials. See [Reference](#cell-1462)\n\nThanks, Fil, for\n[the elegant method](https://observablehq.com/@fil/finding-intersections-method-2).\nI’ve ported his code for a rectangular viewport here in this notebook.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1738,"value":"viewof tickSize = Inputs.range([0, 10], {\n label: \"Tick size\",\n step: 1,\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"viewof tickPadding = Inputs.range([0, 10], {\n label: \"Tick padding\",\n step: 1,\n value: 4\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":698,"value":"viewof projection = Inputs.radio([\"geoIdentity\", \"geoTransverseMercator\"], {\n label: \"Projection\",\n value: \"geoTransverseMercator\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1732,"value":"viewof tickPosition = Inputs.radio([\"inside\", \"outside\"], {\n label: \"Tick position\",\n value: \"outside\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1382,"value":"india = generateMap({\n features: indiaGeo,\n step: [5, 5],\n marginBottom: 20,\n marginLeft: 20,\n tickPosition,\n tickSize,\n tickPadding,\n projection:\n projection === \"geoIdentity\"\n ? d3.geoIdentity().reflectY(true)\n : d3.geoTransverseMercator().rotate([-80, 0, 0])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1890,"value":"In maps showing tiny regions, you may need to adjust\n[`graticule.precision([angle])`](https://github.com/d3/d3-geo/blob/main/README.md#graticule_precision)\nto align graticules with the labels.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2505,"value":"

\"Difference — On left, the labels are not aligned with graticules. It is drawn with default precision. On the right graticules are drawn using `graticule.precision(1)`.

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2518,"value":"Thanks to [@ciju](https://observablehq.com/@ciju), for helping me find\nthis trick.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1846,"value":"bangalore = generateMap({\n features: bangalore_wards,\n step: [1 / 8, 1 / 8],\n graticulePrecision: 1, // 👈\n marginBottom: 20,\n marginLeft: 20,\n tickPosition,\n tickSize,\n tickPadding,\n projection: d3.geoTransverseMercator().rotate([-60, 0, 0])\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1951,"value":"## How does it work?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1963,"value":"First, let’s try to find latitudes on the bottom edge of the viewport.\n\nAssume, `width` of our SVG canvas (viewport) is `1000px`, and covers longitude\nfrom 67°E to 98°E. If, we only consider the end points of the bottom edge, and\nmap to spherical geometry (project) the line will be seen as curved. That is not\nwe want in this case.\n\n

\n\nTo overcome the curvature, we need to divide the line into smaller lines (say length of `precision`) before mapping into spherical geometry.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2463,"value":"To illustrate the effect of `precision`, see a line in pixel space ${htl.html`—`} mapped to a line in spherical space ${htl.html`—`}. Change the `precision` to a lower value to see the change.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2322,"value":"viewof precision = Inputs.range([1, 600], {\n label: \"Precision (px)\",\n step: 1,\n value: 600\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2459,"value":"

\n ${precisionExample}\n

I'm using a projection to exaggerate the curvature effect.

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2483,"value":"From here on, let’s assume `precision = 1`, i.e. the lines are divides into smaller lines of length. It means the vertices will be `1px` apart.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1985,"value":"Plot.plot({\n width: 800,\n x: { label: \"pixels →\" },\n marks: [Plot.tickX(pixels, { x: (d) => d, stroke: \"#ccc\" })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2009,"value":"Then we map each vertex to spherical geometry, using [`project.invert`](https://github.com/d3/d3-geo/blob/main/README.md#project_invert).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2016,"value":"Plot.plot({\n width: 800,\n\n x: { label: \"Latitudes →\", tickFormat: (d) => d3.format(\".2~f\")(d) + \"°E\" },\n marks: [Plot.tickX(lats, { x: (d) => d, stroke: \"#ccc\" })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2031,"value":"We can pick nice and rounded points among these. Like [`graticule.step`](https://github.com/d3/d3-geo/blob/main/README.md#graticule_step) in D3, we use a `step` to generate the rounded values.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2034,"value":"viewof step = Inputs.radio([2, 5, 10], { label: \"Step\", value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2048,"value":"Plot.plot({\n marginTop: 20,\n width: 800,\n\n x: { label: \"Latitudes →\", tickFormat: formatExampleLat },\n y: { axis: null },\n marks: [\n Plot.tickX(lats, { x: (d) => d, stroke: \"#ccc\", y: 0 }),\n Plot.tickX(niceLats, {\n x: (d) => d,\n stroke: \"orangered\",\n strokeWidth: 2,\n y: 0\n }),\n Plot.textX(niceLats, {\n x: (d) => d,\n dy: -35,\n text: formatExampleLat\n })\n ]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2102,"value":"We can draw these _nice and rounded_ latitudes on the bottom edge of the map.\nSimilarly, we can compute and plot latitudes and longitudes for the other edges.\n\nIn code below, the latitudes and longitudes are not computed from individual\nedges. Instead, we generate a rectangular polygon of the viewport. See\n[`viewportAsGeo()`](https://observablehq.com/@saneef/graticule-labels-for-small-regions#viewportAsGeo).\nWe pick rounded values among vertices on the polygon. See [`graticuleLabelPositions()`](https://observablehq.com/@saneef/graticule-labels-for-small-regions#graticuleLabelPositions)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2093,"value":"formatExampleLat = (d) => d3.format(\".2~f\")(d) + \"°E\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1982,"value":"pixels = d3.range(0, 1000 + 1, 4)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2013,"value":"lats = pixels.map((p) => mapRange(p, 0, 1000, 67, 98, true))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2038,"value":"niceLats = _.uniqBy(\n lats.map((l) => ({ value: l, stepped: Math.floor(l / step) })),\n (l) => l.stepped\n)\n .map((l) => Math.floor(l.value))\n .slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2376,"value":"pixelColor = \"hsl(153, 40%, 41%)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"value":"sphericalGeomColor = \"hsl(12, 75%, 54%)\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2454,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1960,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1946,"value":"viewof debug = Inputs.toggle({ label: \"Debug\", value: false })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1726,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1727,"value":"function viewportAsGeo({\n projection,\n width,\n height,\n marginTop = 0,\n marginRight = 0,\n marginLeft = 0,\n marginBottom = 0,\n precision = 2.5\n} = {}) {\n const p1 = [marginLeft, marginTop];\n const p2 = [width - marginRight, marginTop];\n const p3 = [width - marginRight, height - marginBottom];\n const p4 = [marginLeft, height - marginBottom];\n\n const vertices = [p1, p2, p3, p4, p1];\n\n const viewportSize = Math.min(\n width - marginRight - marginLeft,\n height - marginTop - marginBottom\n );\n const parts = Math.floor(viewportSize / precision);\n\n let lines = pairUp(vertices);\n lines = lines\n .flatMap(([p1, p2]) => partitionLine(...p1, ...p2, parts))\n .map((l) => l[0]);\n lines = [...lines, p1];\n\n return {\n type: \"Polygon\",\n coordinates: [lines.map((p) => projection.invert(p))]\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1725,"value":"// Based on https://observablehq.com/@fil/finding-intersections-method-2#positions\nfunction graticuleLabelPositions(boundsGeo, { step = [1, 1] }) {\n let i = [];\n let poly = boundsGeo.coordinates[0].slice();\n let cur = poly[0];\n // poly.push(cur);\n // let p0 = cur;\n poly.forEach((p) => {\n // Above 80° longitude, we can reduce the lines\n // I think, that’s default on d3.graticules\n let latStep = Math.abs(p[1]) > 80 ? 90 : step[1];\n let lonStep = step[0];\n if (Math.floor(p[1] / latStep) != Math.floor(cur[1] / latStep)) {\n p.type = \"latitude\";\n i.push(p);\n } else if (Math.floor(p[0] / lonStep) != Math.floor(cur[0] / lonStep)) {\n p.type = \"longitude\";\n i.push(p);\n }\n cur = p;\n });\n\n return i;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1722,"value":"function pairUp(arr) {\n return arr.reduce((res, cur, i, arr) => {\n if (i === 0) return res;\n return [...res, [arr[i - 1], cur]];\n }, []);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"function generateMap({\n projection = d3.geoIdentity().reflectY(true),\n width,\n height,\n marginLeft,\n marginRight,\n marginBottom,\n marginTop,\n padding,\n step,\n features,\n tickPosition,\n tickSize,\n tickPadding,\n graticulePrecision\n} = {}) {\n const svg = drawMap(features, {\n projection,\n width,\n height,\n marginLeft,\n marginRight,\n marginBottom,\n marginTop,\n padding,\n debug\n });\n drawGraticules(svg, { step, debug, graticulePrecision });\n drawGraticuleTicks(svg, {\n step,\n position: tickPosition,\n tickSize,\n tickPadding,\n debug\n });\n return svg;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":852,"value":"$36","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"$37","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":166,"value":"formatLongitude = (x) => `${formatLatLon(x)}°${x < 0 ? \"W\" : \"E\"}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"formatLatitude = y => `${formatLatLon(y)}°${y < 0 ? \"S\" : \"N\"}`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"formatLatLon = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2002,"value":"// From https://github.com/mattdesl/canvas-sketch-util/blob/master/math.js#L164\nfunction mapRange(value, inputMin, inputMax, outputMin, outputMax, clamp) {\n // Reference:\n\n // https://openframeworks.cc/documentation/math/ofMath/\n\n if (Math.abs(inputMin - inputMax) < Number.EPSILON) {\n return outputMin;\n } else {\n var outVal =\n ((value - inputMin) / (inputMax - inputMin)) * (outputMax - outputMin) +\n outputMin;\n\n if (clamp) {\n if (outputMax < outputMin) {\n if (outVal < outputMax) outVal = outputMax;\n else if (outVal > outputMin) outVal = outputMin;\n } else {\n if (outVal > outputMax) outVal = outputMax;\n else if (outVal < outputMin) outVal = outputMin;\n }\n }\n\n return outVal;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1065,"value":"## GeoJSONs","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1795,"value":"indiaGeo = FileAttachment(\"india.states.geo.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1852,"value":"bangalore_wards = FileAttachment(\"bangalore_wards.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1462,"value":"## References\n\n- [Graticule Labels / D3](https://observablehq.com/@d3/graticule-labels)\n- [Graticule Labels (Stereographic) / D3](https://observablehq.com/@d3/graticule-labels-stereographic)\n- [Finding intersections between the graticule and the clip sphere of the stereographic projection, method 2 / Fil](https://observablehq.com/@fil/finding-intersections-method-2)\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1855,"value":"## Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1711,"value":"import { partitionLine } from \"@saneef/helper-functions-geometry\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2267,"value":"import { toc } from \"@saneef/indented-toc\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"import { footer } from \"@saneef/notebooks-footer\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2395,"value":"turfHelpers = import(\"https://cdn.jsdelivr.net/npm/@turf/helpers/+esm\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1929,"value":"---\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1927,"value":"footer","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1","titling":"auto"}} 33:"$32:body"