2b:null 2c:["$","title",null,{"children":"Subway stations in hex grids | Chuncheng | Observable"}] 31:Ta94,mkGeoJson = (map) => { const timeStart = new Date(); // Some const for computation efficiency const { sqrt3 } = mathConst; const { xNum, padding } = map; console.log("Use", { xNum }); // Parse the current location var cx = map.getCenter().lng, cy = map.getCenter().lat, e = map.getBounds()._ne.lng, n = map.getBounds()._ne.lat, w = map.getBounds()._sw.lng, s = map.getBounds()._sw.lat; // Correct south lat on pitching s = 2 * cy - n; // xNum is defined, so compute the yNum for it var yNum = parseInt(xNum * aspect); // Make x- and y-Scaler var xScale = d3.scaleLinear().range([cx, e]).domain([0, xNum]), yScale = d3 .scaleLinear() .range([cy, n]) .domain([0, xNum * aspect]); // Parameters for Hex layout var rx = xScale(1) - xScale(0), ry = yScale(1) - yScale(0), rxFull = rx, ryFull = ry, c = sqrt3 / 2; // Padding rx and ry rx *= 1 - padding; ry *= 1 - padding; // Make features for Hex grids var coordinates, type, properties, x, y, insideStations, stations, hull, uniqueID = 0; const features = []; const stationSummary = []; for (let i = -xNum; i < xNum + 3; i += 3) { for (let j = -yNum / c; j < yNum / c + 1; j += 1) { // Center x = xScale(i + 1.5 * (j % 2)); y = yScale(c * j); // The 6 nodes of the hex, 7 is for closing the polygon // It means the latest node is as the same as the first one. coordinates = [hexFunc(rx, ry, x, y)]; hull = hexFunc(rxFull, ryFull, x, y); insideStations = subwayGeoJson.features.filter((e) => d3.polygonContains(hull, e.properties.corrected) ); stations = insideStations.length; // Generate properties properties = { pos: [x, y], color: colormap(stations), //randomColorString(), opacity: stations == 0 ? 0.0 : 0.7, stations, insideStations }; if (stations > 0) { stationSummary.push(stations); } // Push the new feature features.push({ type: "Feature", properties, id: uniqueID, geometry: { coordinates, type: "Polygon" } }); uniqueID += 1; } } // Make the histogram chart charts.histChart = Histogram(stationSummary, { value: (d) => d, label: "Amount (%) →", width, xDomain: [1, 6], yDomain: [0, 200], height: width / 4, yType: d3.scaleSqrt, color: "steelblue" }); document.getElementById("chart-1").innerHTML = charts.histChart.outerHTML; realTimeSummary.mkGeoJson = new Date() - timeStart; return { type: "FeatureCollection", features: features }; }32:T619,// Initialize the mapbox { map.on("load", () => { // Init source map.addSource("gridGeometrySource", { type: "geojson", data: mkGeoJson(map) }); // Init grid stroke map.addLayer({ id: "hexStroke", type: "line", source: "gridGeometrySource", layout: { "line-join": "round", "line-cap": "round" }, paint: { "line-color": gridColor, "line-width": 1 } }); // Init grid fill map.addLayer({ id: "hexFill", type: "fill", source: "gridGeometrySource", layout: {}, paint: { // "fill-color": ["get", "color"], //gridColor, "fill-color": [ "case", ["boolean", ["feature-state", "clicked"], false], "#000000", // Case fail, boolean is true ["get", "color"] // Case success, boolean is false ], "fill-opacity": ["get", "opacity"] } }); // Behavior onclick map.on("click", "hexFill", (e) => { console.log("Click", e, e.features[0].properties); map.setFeatureState( { source: "gridGeometrySource", id: e.features[0].id }, { clicked: true } ); }); // Add handlers { map.on("dragend", () => { console.log("dragend"); reDraw(); }); map.on("zoomend", () => { console.log("zoomend"); reDraw(); }); map.on("pitchend", () => { console.log("pitchend"); reDraw(); }); } }); }33:[{"id":"44eed3bb775fb0b85fd7f5687fbdf601a5539e9d55ad586023400cb2ad0f3ffda970dcd18f1645931911306e34ecb5d3c09a7ee77680c75d072fe19a65122fc3","href":"https://static.observableusercontent.com/files/44eed3bb775fb0b85fd7f5687fbdf601a5539e9d55ad586023400cb2ad0f3ffda970dcd18f1645931911306e34ecb5d3c09a7ee77680c75d072fe19a65122fc3","name":"subway-tianjin.json","type":"application/json","lastModified":1666852510246.887,"size":69964},{"id":"2d3f0f19c7ec07e086b0eaf40c637c89214d464847c90e31c70cece833849ff03a9a508427ffcdf5169f837e06428ae9bcc2da80f2e3196b73000913eade6730","href":"https://static.observableusercontent.com/files/2d3f0f19c7ec07e086b0eaf40c637c89214d464847c90e31c70cece833849ff03a9a508427ffcdf5169f837e06428ae9bcc2da80f2e3196b73000913eade6730","name":"subway-shanghai.json","type":"application/json","lastModified":1666851131620.892,"size":213270},{"id":"cfbe7cb1a9af936084aa7cf8ac56255cd015074ecf00548b3d588f7c37947457e66441eb1581335c0ffa992252ca1b891ece48c02c8cebef4c864c9bd1bb582c","href":"https://static.observableusercontent.com/files/cfbe7cb1a9af936084aa7cf8ac56255cd015074ecf00548b3d588f7c37947457e66441eb1581335c0ffa992252ca1b891ece48c02c8cebef4c864c9bd1bb582c","name":"subway.json","type":"application/json","lastModified":1666833408845.276,"size":180124}] 2f:{"id":"aaffc3439d2559e9","slug":"mapbox-with-hex-grids-version-3","title":"Subway stations in hex grids","thumbnail":"3640156aa215a67aec296c9913e4c25b36c27b325eff6aabf53303d7e47d264d","access_level":"public","create_time":"$D2022-10-27T01:10:50.176Z","update_time":"$D2022-10-29T11:18:16.201Z","view_time":null,"first_public_time":"$D2022-10-27T01:10:50.176Z","fork":{"id":"572338bc6422708b","slug":null,"title":"Mapbox with hex grids Version 2","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"stars":0,"starred":false,"owner":{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024"},"version":934,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null}],"members":[{"type":"individual","id":"16328058352682a8","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":3,"collection":{"id":"16b273d4fd334cfd","slug":"mapbox","title":"Mapbox","owner":{"id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng"}},"type":"notebook","body":{"title":"Subway stations in hex grids","cells":[{"id":0,"value":"# Subway stations in hex grids\n\nColor the hex cells by the count of subway stations.\nIt shows how many sub-railway lines you can get in the hex area.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":24,"value":"viewof reloadButton = Inputs.button(\"Reload\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":180,"value":"viewof xNum = Inputs.range([10, 100], { label: \"xNum\", step: 10, value: 50 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof padding = Inputs.range([0, 0.5], {\n label: \"Padding\",\n value: 0.2,\n step: 0.01\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"viewof gridColor = Inputs.color({ label: \"Grid color\", value: \"#e0c7c7\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":689,"value":"viewof setZoom = Inputs.select([5, 10], { label: \"Zoom to\", value: 10 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":715,"value":"viewof selectCity = Inputs.select(cityCenter.names, { label: \"Center to\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"## Display","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"container = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":600,"value":"colorBar = Legend(colormap, {\n title: \"Stations inside\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":806,"value":"html`

Hist chart

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"html`

[No data update]

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":920,"value":"updateMapboxParamDiv = () => {\n const { mkGeoJson, reDraw } = realTimeSummary;\n document.getElementById(\"mapboxParamDiv\").innerHTML = html`\n

\n Map parameters: \nLat: ${map.getCenter().lat.toPrecision(8)},\nLng: ${map.getCenter().lng.toPrecision(8)},\nZoom: ${map.getZoom().toPrecision(8)}\n

\n Time Cost (milliseconds): \nmkGeoJson: ${mkGeoJson},\nreDraw: ${reDraw}\n

\n`.outerHTML;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":707,"value":"cityCenter = {\n return {\n shanghai: [121.47204, 31.216047],\n beijing: [116.40067, 39.887172],\n tianjin: [117.21687, 39.097083],\n names: [\"shanghai\", \"beijing\", \"tianjin\"]\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"{\n map.setZoom(setZoom);\n map.setCenter(cityCenter[selectCity]);\n reDraw();\n return { setZoom, selectCity };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":608,"value":"colormap = d3.scaleSequentialSqrt([0, 5], d3.interpolateInferno)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":782,"value":"charts = {\n return {\n histChart: Histogram([1, 2, 3], {\n value: (d) => d,\n label: \"Amount (%) →\",\n width,\n height: width / 4,\n color: \"steelblue\"\n })\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":239,"value":"{\n map.padding = padding;\n map.xNum = xNum;\n reDraw();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":304,"value":"// Make the constants for higher efficiency\nmathConst = {\n const sqrt3 = Math.sqrt(3);\n return { sqrt3 };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"// Make function for generating Hex grids\n// hexFunc = mkHexFunc() yields hexFunc = ƒ(rx, ry, x, y)\n// rx, ry: Radius of the hex;\n// x, y: Center location of the hex.\n\nmkHexFunc = () => {\n const pnts = [];\n var rad,\n p = (2 * Math.PI) / 6;\n for (let i = 0; i < 7; ++i) {\n rad = i * p;\n pnts.push([Math.cos(rad), Math.sin(rad)]);\n }\n return (rx, ry, x, y) => {\n return pnts.map((e) => [e[0] * rx + x, e[1] * ry + y]);\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"hexFunc = mkHexFunc()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":334,"value":"mkGeoJson(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"realTimeSummary = {\n return {\n mkGeoJson: -1,\n reDraw: -1\n };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":430,"value":"randomColorString = () => {\n return d3.hsl(d3.randomUniform(0, 360)(), 0.2, 0.7).hex();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":207,"value":"// Generate reDraw function\nreDraw = () => {\n const timeStart = new Date();\n map.getSource(\"gridGeometrySource\").setData(mkGeoJson(map));\n map.setPaintProperty(\"hexStroke\", \"line-color\", gridColor);\n realTimeSummary.reDraw = new Date() - timeStart;\n updateMapboxParamDiv();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":18,"value":"$32","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"map = {\n reloadButton;\n const map = new mapboxgl.Map({\n container,\n center: cityCenter[\"beijing\"],\n zoom: 10,\n maxPitch: 80,\n style: \"mapbox://styles/listenzcc/cky2j3ywf13yi15nuybjj4kem\"\n // style: \"mapbox://styles/mapbox/light-v9\"\n });\n return map;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"aspect = 9 / 16","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"height = width * aspect","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl\");\n if (!gl.accessToken) {\n gl.accessToken =\n \"pk.eyJ1IjoibGlzdGVuemNjIiwiYSI6ImNrMzU5MmpxZDAxMXEzbXQ0dnd4YTZ2NDAifQ.GohcgYXFsbDqfsi_7SXdpA\";\n const href = await require.resolve(\"mapbox-gl/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n }\n return gl;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":475,"value":"## Test field","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":477,"value":"geoJson1 = mkGeoJson(map)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":482,"value":"d1 = {\n const { coordinates } = geoJson1.features[0].geometry;\n const { pos } = geoJson1.features[0].properties;\n return { coordinates, pos };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"d3.polygonContains(d1.coordinates[0], d1.pos)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":496,"value":"subwayGeoJson.features.map((e) => e.properties.corrected)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":498,"value":"subwayGeoJson.features.filter((e) =>\n d3.polygonContains(d1.coordinates[0], e.properties.corrected)\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":512,"value":"{\n const t = new Date();\n\n const output = geoJson1.features\n .map((e) => e.geometry.coordinates[0])\n .map((coords) => {\n return subwayGeoJson.features.filter((e) =>\n d3.polygonContains(coords, e.properties.corrected)\n );\n })\n .filter((e) => e.length > 0);\n\n const d = new Date() - t;\n const dUnit = \"milli seconds\";\n\n return { output, d, dUnit };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":458,"value":"## Load subwayGeoJson","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":503,"value":"Properties table","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":467,"value":"viewof search = Inputs.search(subwayGeoJson.features.map((e) => e.properties))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"Inputs.table(search)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":679,"value":"subwayGeoJson = {\n const type = \"FeatureCollection\";\n var features = [];\n\n features = features.concat(mkSubwayGeoJson(subway).features);\n features = features.concat(mkSubwayGeoJson(subwayShanghai).features);\n features = features.concat(mkSubwayGeoJson(subwayTianjin).features);\n\n return { type, features };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":674,"value":"subwayBeijingGeoJson = mkSubwayGeoJson(subway)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"mkSubwayGeoJson = (subway) => {\n const geoJson = { type: \"FeatureCollection\", features: [] };\n const { s } = subway;\n\n var properties, geometry;\n\n subway.l.map((line) => {\n var { ln, cl, kn, st } = line;\n st.map((station) => {\n var { n, sl } = station;\n var pair = sl.split(\",\").map((e) => parseFloat(e));\n var corrected = coordtransform.gcj02towgs84(pair[0], pair[1]);\n properties = {\n ln,\n cl: \"#\" + cl,\n kn,\n n,\n s,\n corrected\n };\n geometry = {\n type: \"Point\",\n coordinates: corrected\n };\n geoJson.features.push({ type: \"Feature\", properties, geometry });\n });\n });\n return geoJson;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":746,"value":"subwayTianjin = FileAttachment(\"subway-tianjin.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":669,"value":"subwayShanghai = FileAttachment(\"subway-shanghai.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":449,"value":"subway = FileAttachment(\"subway.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"coordtransform = require(\"coordtransform\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":550,"value":"import { Legend, Swatches } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"import { Histogram } from \"@d3/histogram\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"