2d:null 2e:["$","title",null,{"children":"Experiments with maps and markings | categori.se | Observable"}] 33:T472,34:T431,function generateScaleBar(map, { offsetX = 0, debug } = {}) { const { projection, width, height, marginLeft, marginRight, padding } = map.props; const scaleHeight = 40; // Generate an SVG with same width as the plot. // Thus, even if the image scales it will be in proportion with the map const svg = DOM.svg(width, scaleHeight); d3.select(svg).attr( "style", "max-width: 100%; height: auto; height: intrinsic;" ); const scaleBar = d3GeoScaleBar .geoScaleBar() .projection(projection) .left( (marginLeft + offsetX) / (width - (marginLeft + marginRight + 2 * padding)) ) .top(20 / (height - (marginLeft + marginRight + 2 * padding))) .size([ width - (marginLeft + marginRight + 2 * padding), height - (marginLeft + marginRight + 2 * padding) ]); d3.select(svg).append("g").call(scaleBar); if (debug) { d3.select(svg) .append("rect") .attr("width", width) .attr("height", scaleHeight) .attr("stroke", "#f0f") .attr("fill", "none"); } return svg; }35:T994,function drawMap( geo, { width = 640, height, marginTop = 1, marginLeft = 4, 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 } }); }36:Tb3e,function drawGraticules( svgNode, { fontSize = 10, fontFamily = defaultFontFamily, tickFill = "black", stroke = "#999", strokeWidth = 0.5, step = [1, 1], 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); const graticules = graticuleGenerator(); const path = d3.geoPath(projection); const [longitudes, latitudes] = generateLabelLatLons({ graticuleGenerator, ...svgNode.props }); console.log({ latitudes, longitudes }); 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") .attr("font-family", fontFamily) .attr("font-size", fontSize); 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)); const ticks = g .append("g") .attr("class", "graticule-ticks") .attr("clip-path", clipId) .attr("fill", tickFill); const [labelLon] = projection.invert([marginLeft, marginTop]); ticks .append("g") .selectAll("text.lat-tick") .data(latitudes) .join("text") .attr("class", "lat-tick") .attr("x", marginLeft) .attr("dx", fontSize / 2) .attr("y", (d) => projection([labelLon, d])[1]) .attr("dy", fontSize * -0.5) // .attr("text-anchor", "end") // .attr("dominant-baseline", "middle") .text((d) => formatLatitude(d)); const [_, labelLat] = projection.invert([marginLeft, height - marginBottom]); ticks .append("g") .selectAll("text.lat-tick") .data(longitudes) .join("text") .attr("class", "lat-tick") .attr("y", height - marginBottom) .attr("x", (d) => projection([d, labelLat])[0]) .attr("dx", fontSize / 2) .attr("dy", fontSize * -0.5) // .attr("text-anchor", "end") // .attr("dominant-baseline", "middle") .text((d) => formatLongitude(d)); }37:T4c1,function generateLabelLatLons({ graticuleGenerator, height, width, marginTop, marginRight, marginBottom, marginLeft, projection } = {}) { const extent = { topLeft: projection.invert([marginLeft, marginTop]), topRight: projection.invert([width - marginRight, marginTop]), bottomRight: projection.invert([ width - marginRight, height - marginBottom ]), bottomLeft: projection.invert([marginLeft, height - marginRight]) }; console.log(extent) const [lonStep, latStep] = graticuleGenerator.step(); const latMin = roundTillDecimalsLike(extent.topLeft[1], latStep); const latMax = roundTillDecimalsLike(extent.bottomLeft[1], latStep); console.log({ latMin, latMax },extent.bottomLeft[1]); const latSign = latMin < latMax ? 1 : -1; const latitudes = d3.range( latMin, latMax + latStep * latSign, latStep * latSign ); const lonMin = roundTillDecimalsLike(extent.bottomLeft[0], lonStep); const lonMax = roundTillDecimalsLike(extent.bottomRight[0], lonStep); const lonSign = lonMin < lonMax ? 1 : -1; let longitudes = d3.range( lonMin, lonMax + lonStep * lonSign, lonStep * lonSign ); return [longitudes, latitudes]; }38:Ta22,function drawGraticulesOld( svgNode, { fontSize = 10, fontFamily = defaultFontFamily, tickFill = "black", stroke = "#ccc", strokeWidth = 0.5, outlineStroke = "black", outlineStrokeWidth = 0.75, step = [1, 1] } = {} ) { const { projection, width, height, marginLeft, marginRight, marginTop, marginBottom } = svgNode.props; const extent = { topLeft: projection.invert([marginLeft, marginTop]), topRight: projection.invert([width - marginRight, marginTop]), bottomRight: projection.invert([ width - marginRight, height - marginBottom ]), bottomLeft: projection.invert([marginLeft, height - marginRight]) }; const graticuleGenerator = d3.geoGraticule().step(step); graticuleGenerator.extent([ [extent.topLeft[0], extent.topLeft[1]], [extent.bottomRight[0], extent.bottomRight[1]] ]); const graticules = graticuleGenerator(); const path = d3.geoPath(projection); const g = d3 .select(svgNode) .append("g") .attr("class", "key-graticules") .attr("font-family", fontFamily) .attr("font-size", fontSize); g.append("path") .attr("class", "graticules") .attr("fill", "none") .attr("stroke", stroke) .attr("stroke-width", strokeWidth) .attr("d", path(graticules)); g.append("path") .attr("class", "graticule-outline") .attr("stroke", outlineStroke) .attr("storke-width", outlineStrokeWidth) .attr("fill", "none") .attr("d", path(graticuleGenerator.outline())); const graticuleLines = graticuleGenerator.lines(); const longitudes = graticuleLines.filter( (l) => l.coordinates[0][0] === l.coordinates[1][0] ); const latitudes = graticuleLines.filter( (l) => l.coordinates[0][1] === l.coordinates[1][1] ); const ticks = g.append("g").attr("fill", tickFill); ticks .append("g") .selectAll("text.lat-tick") .data(latitudes.map((f) => f.coordinates[0])) .join("text") .attr("class", "lat-tick") .attr("x", (d) => projection(d)[0]) .attr("y", (d) => projection(d)[1]) .attr("dx", -3) .attr("text-anchor", "end") .attr("dominant-baseline", "middle") .text((d) => formatLatitude(d[1])); ticks .append("g") .selectAll("text.lon-tick") .data(longitudes.map((f) => f.coordinates[0])) .join("text") .attr("class", "lat-tick") .attr("x", (d) => projection(d)[0]) .attr("y", (d) => projection(d)[1]) .attr("dy", fontSize + 3) .attr("text-anchor", "middle") .text((d) => formatLongitude(d[0])); return svgNode; }39:[{"id":"8c84e0b198648c90f70e8ceeb7762f5e289d1ced515f53fdbbeeb365cc3d7a6a2734d32c7dfc6bd3cebc1496915782e836c645b73655b17e182d88a1e5e91af8","href":"https://static.observableusercontent.com/files/8c84e0b198648c90f70e8ceeb7762f5e289d1ced515f53fdbbeeb365cc3d7a6a2734d32c7dfc6bd3cebc1496915782e836c645b73655b17e182d88a1e5e91af8","name":"colombia-states.geojson","type":"application/geo+json","lastModified":1663944738703.093,"size":7625170},{"id":"25a5c86c44a4325c801679973f59243c2b2442d7735ff657ca146abea1158b124f50e398039efe4ee4f5a703d012a2fc4d02676bc64edc1ae96feeb7eef8efc3","href":"https://static.observableusercontent.com/files/25a5c86c44a4325c801679973f59243c2b2442d7735ff657ca146abea1158b124f50e398039efe4ee4f5a703d012a2fc4d02676bc64edc1ae96feeb7eef8efc3","name":"india.states.geo.json","type":"application/json","lastModified":1663708393495.884,"size":864996},{"id":"1434c90d8847dbaae37b24ce1e77e06bcb980da26b61b82c84297b6b3d3aa3b1aa53493c6747cbf5b74dc5cf5bfd0911d648aad55ef99690c1b42bcb456af8bc","href":"https://static.observableusercontent.com/files/1434c90d8847dbaae37b24ce1e77e06bcb980da26b61b82c84297b6b3d3aa3b1aa53493c6747cbf5b74dc5cf5bfd0911d648aad55ef99690c1b42bcb456af8bc","name":"kerala@1.geo.json","type":"application/json","lastModified":1663731793799.506,"size":684113},{"id":"07636e232d2b2e1529401009d6b3e0f0e49cc6753ba73951e8d311d281aeb6cba95a07c9c29dc7782424b76b70c1009211400d16da59a54a3ce35b0e2f6f3969","href":"https://static.observableusercontent.com/files/07636e232d2b2e1529401009d6b3e0f0e49cc6753ba73951e8d311d281aeb6cba95a07c9c29dc7782424b76b70c1009211400d16da59a54a3ce35b0e2f6f3969","name":"nepal_admin_provinces@1.geojson","type":"application/geo+json","lastModified":1663701482568.055,"size":138833},{"id":"f40a80f903df0c8a410cfbe582d4263c7442efd08826eeb741b4aa4692160766a6772047c3a5d7a2d7de9f11166509b718a0a04e40b9cd4850b073b4949f7ba4","href":"https://static.observableusercontent.com/files/f40a80f903df0c8a410cfbe582d4263c7442efd08826eeb741b4aa4692160766a6772047c3a5d7a2d7de9f11166509b718a0a04e40b9cd4850b073b4949f7ba4","name":"tanahun.json","type":"application/json","lastModified":1663698068930.834,"size":33257}] 31:{"id":"39005deaf90c19d6","slug":null,"title":"Experiments with maps and markings","thumbnail":"78975075632cf1f8f046f7f0a90816280fe23b087fe5e2b9aeb259a115484885","access_level":"public","create_time":"$D2022-09-20T10:02:45.759Z","update_time":"$D2023-01-15T07:09:22.835Z","view_time":null,"first_public_time":"$D2023-01-15T06:13:14.232Z","has_unpublished_edits":null,"fork":false,"stars":5,"starred":false,"owner":{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024"},"version":1391,"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":"a7fa3027921865cf","login":"aaronkyle","name":"Aaron Kyle Dennis","avatar_url":"https://avatars-next.observableusercontent.com/eb6d0b32ccc6c8febbf105ce4d2a938819bcbd1c6a2c108d3a9c01745d3590f2","tier":null,"role":"editor"},{"type":"team","id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se","avatar_url":"https://avatars-next.observableusercontent.com/a9c86cf777f4c09b5a0d50256359bd05d36e722508e94fa8dd994861910470f0","tier":"starter_2024","role":"editor"},{"type":"individual","id":"e0ce6bdad38e3e5e","login":"saneef","name":"Saneef H. Ansari","avatar_url":"https://avatars-next.observableusercontent.com/a773bad590c23d0ae77d00a38b75a3dddda96007f7152937d2acf8893a6f66b3","tier":null,"role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":{"id":"b07b2170d95b75f1","slug":"utils-geo","title":"utils-geo","owner":{"id":"9cb66d8571abb7bd","login":"categorise","name":"categori.se"}},"type":"notebook","body":{"title":"Experiments with maps and markings","cells":[{"id":0,"value":"# Experiments with maps and markings","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":234,"value":"viewof selectedGeo = Inputs.radio(new Map(data), {\n label: \"GeoJSON\",\n value: data[0][1]\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":704,"value":"viewof Γ = Inputs.range([-180, 180], {\n step: 0.01,\n value: selectedGeo.yaw ?? -72.5,\n label: \"yaw\",\n disabled: projection === \"geoIdentity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":724,"value":"viewof Φ = Inputs.range([-180, 180], {\n step: 0.01,\n value: 0,\n label: \"pitch\",\n disabled: projection === \"geoIdentity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":726,"value":"viewof Λ = Inputs.range([-180, 180], {\n step: 0.01,\n value: 0 ,\n label: \"roll\",\n disabled: projection === \"geoIdentity\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"## Layout using CSS Grid","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1222,"value":"cssGridLayout = {\n const map = generateMap({\n marginLeft: -1,\n marginRight: -1,\n marginTop: -1,\n marginBottom: -1,\n step: selectedGeo.step\n });\n const scale = generateScaleBar(map, { offsetX: 16, debug });\n const northKey = drawNorthArrow(map);\n\n return html`

\n \n

\n ${map} \n

${scale}

\n ${northKey}\n

`;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1242,"value":"$33","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":621,"value":"## Laying out using HTML and Tachyons","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":594,"value":"flexboxLayout = {\n const map = generateMap({ step: selectedGeo.step });\n const scale = generateScaleBar(map, { debug });\n const northKey = drawNorthArrow(map);\n\n return html`

${scale}

\n ${map}\n ${northKey}\n

`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":625,"value":"## Separate Cells","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":634,"value":"generateScaleBar(map, { debug })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":630,"value":"map = generateMap({ step: selectedGeo.step })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":695,"value":"drawNorthArrow(map)","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":572,"value":"viewof debug = Inputs.toggle({label: \"Debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"function drawNorthArrow(map) {\n const { geo, projection } = map.props;\n\n const angle = computeAngleToNorthAtCentroid(geo, projection);\n return htl.svg`\n${northArrow()}

${selectedGeo.title}