2b:null 2c:["$","title",null,{"children":"Japan Ski Area Geometries | Alastair Tse | Observable"}] 31:Ta9a,layout = { const svg = d3.select(DOM.svg(canvasWidth, canvasHeight)); svg.style("background-color", "#ffffff"); let g = svg.append("g"); let strokeWidth = 0.5; svg .append("rect") .attr("fill", "none") .attr("pointer-events", "all") .attr("width", canvasWidth) .attr("height", canvasHeight); const projection = d3 .geoMercator() .fitSize([canvasWidth, canvasHeight], japanOutline); const path = d3.geoPath(projection); const scale = boxScale; const sortKey = boxSortKey; // order the areas by desc latitude const sorted = hierarchicalAreas.filter((a) => a.area); //sorted.sort((a, b) => d3.descending(a.lng, b.lng)); sorted.sort((a, b) => d3.descending(a[sortKey], b[sortKey])); //sorted.sort((a, b) => d3.descending(a.lat, b.lat)); const boxes = []; const nextPosition = (boxW, boxH) => { const MAX_Y = 100000; // All the bottom edges of the placed boxes. const bottomEdge = (box) => { return { x1: box.x, x2: box.x + box.w, y: box.y + box.h }; }; const bottomEdges = boxes.map(bottomEdge); bottomEdges.sort((a, b) => d3.descending(a.y, b.y)); // Create an array of every furthest down Y position for all X values. const maxYs = []; for (let x = 0; x < canvasWidth; x++) { let edgesAtX = bottomEdges.filter((b) => b.x1 <= x && x < b.x2); if (edgesAtX.length == 0) { maxYs.push(0); } else { maxYs.push(edgesAtX[0].y); } } // Find the x where to start drawing the box where Y is the closest to the top. let minY = MAX_Y; let px = 0; for (let startX = 0; startX < canvasWidth - boxW; startX++) { let maxY = 0; for (let x = startX; x < startX + boxW; x++) { maxY = Math.max(maxYs[x], maxY); } if (maxY < minY) { minY = maxY; px = startX; } } return { x: px, y: minY }; }; sorted.forEach((d) => { const boxXY = path.bounds(d.box); const boxW = (boxXY[1][0] - boxXY[0][0]) * scale; const boxH = (boxXY[1][1] - boxXY[0][1]) * scale; // find next let { x, y } = nextPosition(boxW, boxH); g.append("rect") .attr("fill", "rgba(90, 90, 90, 0.1)") .attr("stroke", "rgba(30, 30, 30, 0.2)") .attr("x", x) .attr("y", y) .attr("width", boxW) .attr("height", boxH); const label = g .append("text") .attr("x", x + boxW / 2) .attr("y", y + boxH / 2) .attr("text-anchor", "middle") .attr("fill", "#dd0000") .attr("font-family", "sans-serif") .attr("font-size", "8px") .text(d.id ? d.id : "no id"); boxes.push({ x: x, y: y, w: boxW, h: boxH }); }); return svg.node(); }32:T5fb,chart = { const svg = d3.select(DOM.svg(mapWidth, mapHeight)); svg.style("background-color", "#ffffff"); let g = svg.append("g"); let strokeWidth = 1; svg .append("rect") .attr("fill", "none") .attr("stroke", "none") .attr("pointer-events", "all") .attr("width", mapWidth) .attr("height", mapHeight) .call( d3 .zoom() .scaleExtent([1 / 80, 128]) .on("zoom", zoom) ); function zoom(e) { const { transform } = e; g.attr("transform", transform); g.selectAll("path").attr("stroke-width", strokeWidth / transform.k); } const projection = d3 .geoMercator() .fitSize([mapWidth, mapHeight], japanOutline); const path = d3.geoPath(projection); g.append("path") .attr("fill", "none") .attr("stroke", "rgba(128, 128, 128, 0.5)") .attr("stroke-width", strokeWidth) .attr("d", path(japanOutline)); geometries.map((d) => { const outline = g .append("path") .attr("fill", "rgba(230, 230, 230, 0.4)") .attr("stroke", "rgba(90, 90, 90, 1.0)") .attr("stroke-width", strokeWidth) .attr("d", path(d.box)); const p = path.centroid(d.box); //const p = projection(d.base.geometry.coordinates); const label = g .append("text") .attr("x", p[0]) .attr("y", p[1]) .attr("text-anchor", "middle") .attr("fill", "#dd0000") .attr("font-family", "sans-serif") .attr("font-size", "0.2px") .text(d.id ? d.id : "no id"); }); return svg.node(); }33:Tc87,circular = { const width = 400; const height = 400; const c = DOM.context2d(width, height); const center = [150, 150]; const r = 120; const tickSize = 3; const rectX = 20; const rectY = 20; const rectW = 100; const rectH = 100; c.fillStyle = "rgba(200, 200, 200, 0.5)"; c.fillRect(rectX, rectY, rectW, rectH); // draw center c.strokeStyle = "black"; c.beginPath(); c.moveTo(center[0], center[1] - tickSize); c.lineTo(center[0], center[1] + tickSize); c.closePath(); c.stroke(); c.beginPath(); c.moveTo(center[0] - tickSize, center[1]); c.lineTo(center[0] + tickSize, center[1]); c.closePath(); c.stroke(); // Draw arc c.fillStyle = "none"; c.strokeStyle = "black"; c.beginPath(); c.arc(center[0], center[1], r, Math.PI, (Math.PI * 3) / 2); c.stroke(); c.closePath(); // https://mathworld.wolfram.com/Circle-LineIntersection.html // moves x1,y1,x2,y2 to be relative to cx cy. const findIntersections = (x1, y1, x2, y2, cx, cy, r) => { let dx = x2 - cx - (x1 - cx); let dy = y2 - cy - (y1 - cy); let dr = Math.sqrt(dx * dx + dy * dy); let dd = (x1 - cx) * (y2 - cy) - (x2 - cx) * (y1 - cy); const sgn = (v) => { return v < 0 ? -1 : 1; }; let delta = r * r * dr * dr - dd * dd; if (delta < 0) { return []; } let ix1 = (dd * dy + sgn(dy) * dx * Math.sqrt(r * r * dr * dr - dd * dd)) / (dr * dr) + cx; let iy1 = (-dd * dx + Math.abs(dy) * Math.sqrt(r * r * dr * dr - dd * dd)) / (dr * dr) + cy; let ix2 = (dd * dy - sgn(dy) * dx * Math.sqrt(r * r * dr * dr - dd * dd)) / (dr * dr) + cx; let iy2 = (-dd * dx - Math.abs(dy) * Math.sqrt(r * r * dr * dr - dd * dd)) / (dr * dr) + cy; let intersections = []; if (x1 <= ix1 && ix1 <= x2 && y1 <= iy1 && iy1 <= y2) { intersections.push([ix1, iy1]); } if (x1 <= ix2 && ix2 <= x2 && y1 <= iy2 && iy2 <= y2) { intersections.push([ix2, iy2]); } return intersections; }; // https://mathworld.wolfram.com/Circle-LineIntersection.html let edges = [ [rectX, rectY, rectX + rectW, rectY], [rectX, rectY, rectX, rectY + rectH], [rectX + rectW, rectY, rectX + rectW, rectY + rectH], [rectX, rectY + rectH, rectX + rectW, rectY + rectH] ]; for (let edge of edges) { const intersections = findIntersections( edge[0], edge[1], edge[2], edge[3], center[0], center[1], r ); for (let i of intersections) { c.fillStyle = "red"; c.fillRect(i[0] - 2, i[1] - 2, 4, 4); } } // const x = Math.sqrt( // r * r - (rectY + yEdge - center[1]) * (rectY + yEdge - center[1]) // ); // c.fillStyle = "red"; // let intersectX = center[0] > rectX + xEdge ? center[0] - x : center[0] + x; // c.fillRect(intersectX, rectY + yEdge - 2, 4, 4); // const y = Math.sqrt( // r * r - (rectX + xEdge - center[0]) * (rectX + xEdge - center[0]) // ); // c.fillStyle = "blue"; // let intersectY = center[1] > rectY + yEdge ? center[1] - y : center[1] + y; // c.fillRect(rectX + xEdge, intersectY - 2, 4, 4); return c.canvas; }34:[{"id":"cddfba938f7d655d2336d54877fb9be2b76a21b42710333f73e8237d2a7ba969fc1cc59826a16d4482e4a5e076b59e40bd7725facd5615c39a11cd0ba6782b1d","href":"https://static.observableusercontent.com/files/cddfba938f7d655d2336d54877fb9be2b76a21b42710333f73e8237d2a7ba969fc1cc59826a16d4482e4a5e076b59e40bd7725facd5615c39a11cd0ba6782b1d","name":"japan_outline-3.json","type":"application/json","lastModified":1652056553411.95,"size":42131}] 2f:{"id":"97bed1c2a286063f","slug":"japan-resort-geometries","title":"Japan Ski Area Geometries","thumbnail":"32222967ded7856500ae2d25c6f85a2a1eecc27b161c7d54e966223e1e40ca2c","access_level":"unlisted","create_time":"$D2022-05-08T22:56:59.784Z","update_time":"$D2022-05-23T12:00:24.467Z","view_time":null,"first_public_time":null,"fork":{"id":"7dcef0ebff4028d9","slug":"input-chart","title":"Input + Chart","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c71b06cccf28890c","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":"starter_2024"},"version":508,"publish_version":508,"role":null,"authored":false,"authors":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null}],"members":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Japan Ski Area Geometries","cells":[{"id":4,"value":"# Japan Ski Area Geometries\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":162,"value":"Experiements in plotting visually areas.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":112,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":83,"value":"japanOutline = FileAttachment(\"japan_outline-3.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":5,"value":"rawGeometries = d3.json(\n \"https://storage.googleapis.com/snow-yuki.appspot.com/public/geometries-20220515.json\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":286,"value":"areas = d3.csv(\n \"https://storage.googleapis.com/snow-yuki.appspot.com/public/japan.csv\"\n );","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":20,"value":"geometries = rawGeometries.map((d) => {\n let box = getFeatureById(d.geojson, \"boundingBox\");\n const base = getFeatureById(d.geojson, \"bottom\");\n const peak = getFeatureById(d.geojson, \"peak\");\n const area = Math.floor(turfjs.area(box) / 10000);\n const bearing = Math.floor(turfjs.bearing(base, peak));\n let cw = false;\n // Reverses polygons that are in the wrong direction.\n if (box) {\n cw = turfjs.booleanClockwise(turfjs.polygonToLineString(box));\n if (!cw) {\n box = turfjs.rewind(box, { reverse: true });\n cw = turfjs.booleanClockwise(turfjs.polygonToLineString(box));\n }\n }\n const foundAreas = areas.filter((a) => a.identifier == d.id);\n let areaInfo = {};\n if (foundAreas.length) {\n areaInfo = foundAreas[0];\n }\n return Object.assign(d, { box, base, peak, area, bearing, cw }, areaInfo);\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":319,"value":"hierarchicalAreas = {\n const areaLookup = d3.index(areas, (a) => a.identifier);\n const geomLookup = d3.index(geometries, (g) => g.id);\n \n const notConnectedAreas = areas.filter((a) => a.type != \"Connected\");\n return notConnectedAreas.map((a) => {\n let geom = geomLookup.get(a.identifier);\n let modifiedArea = Object.assign(a, geom ? geom : {});\n if (a.type == \"ResortGroup\" || a.type == \"ConnectedMain\") {\n const childIds = a.connectedAreas.split(\",\");\n const children = childIds\n .map((cid) => areaLookup.get(cid))\n .map((c) => {\n if (!c) {\n console.error(\"Unable to find\", childIds);\n return;\n }\n let childGeom = geomLookup.get(c.identifier);\n return Object.assign(c, childGeom ? childGeom : {});\n });\n modifiedArea.children = children.filter((d) => !!d);\n }\n\n return modifiedArea;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":59,"value":"sizesSorted = d3.sort(geometries, (a, b) => d3.descending(a.area, b.area))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":225,"value":"directions = geometries.map((d) => {\n const cw = turfjs.booleanClockwise(turfjs.polygonToLineString(d.box));\n d.cw = cw;\n return d;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":159,"value":"# Plots","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":67,"value":"viewof canvasWidth = Inputs.range([100, 2000], {value: 600, step: 50, label: \"canvasWidth\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":75,"value":"viewof canvasHeight = Inputs.range([100, 2000], {value: 1600, step: 50, label: \"canvasHeight\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":500,"value":"viewof boxScale = Inputs.range([20, 100], {value: 50, step: 5, label: \"boxScale\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":504,"value":"viewof boxSortKey = Inputs.radio([\"area\", \"lat\"], {\n value: \"area\",\n label: \"boxSortKey\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":313,"value":"## Packing layout","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":277,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":179,"value":"## Constellation of areas. \nAll the ski resort areas in Japan","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":403,"value":"viewof mapWidth = Inputs.range([100, 2000], {value: 600, step: 50, label: \"mapWidth\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":406,"value":"viewof mapHeight = Inputs.range([100, 2000], {value: 600, step: 50, label: \"mapHeight\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":66,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":437,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":181,"value":"## Histogram (Size)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":7,"value":"Plot.plot({\n marks: [Plot.areaY(sizesSorted, { y: \"area\" })]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":49,"value":"Plot.rect(\n sizesSorted,\n Plot.bin({ fillOpacity: \"count\" }, { x: \"bearing\", y: \"area\" })\n).plot()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":260,"value":"## All bounding boxes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":192,"value":"tiles = {\n const svg = d3.select(DOM.svg(canvasWidth, canvasHeight));\n svg.style(\"background-color\", \"#ffffff\");\n let g = svg.append(\"g\");\n let strokeWidth = 0.5;\n\n svg\n .append(\"rect\")\n .attr(\"fill\", \"none\")\n .attr(\"pointer-events\", \"all\")\n .attr(\"width\", canvasWidth)\n .attr(\"height\", canvasHeight);\n\n const projection = d3\n .geoMercator()\n .fitSize([canvasWidth, canvasHeight], japanOutline);\n const path = d3.geoPath(projection);\n\n const scale = 100;\n\n const boxes = geometries.map((d) => {\n const boxXY = path.bounds(d.box);\n\n const boxW = (boxXY[1][0] - boxXY[0][0]) * scale;\n const boxH = (boxXY[1][1] - boxXY[0][1]) * scale;\n g.append(\"rect\")\n .attr(\"fill\", \"none\")\n .attr(\"stroke\", \"grey\")\n .attr(\"x\", 0)\n .attr(\"y\", 0)\n .attr(\"width\", boxW)\n .attr(\"height\", boxH);\n });\n\n return svg.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":167,"value":"# Functions","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":39,"value":"getFeatureById = (geojson, featureId) => {\n const boxes = geojson\n ? geojson.features.filter((f) => f.id == featureId)\n : [];\n const box = boxes.length ? boxes[0] : undefined;\n return box;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":91,"value":"# Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":17,"value":"turfjs = require(\"@turf/turf\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":433,"value":"tilebelt = import(\"https://cdn.skypack.dev/@mapbox/tilebelt\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 30:"$2f:body"