2b:null 2c:["$","title",null,{"children":"Read more, travel longer | Chuncheng | Observable"}] 31:Tf94,refreshMapBox = () => { let sourceName = "geometrySource"; // Init source map.addSource(sourceName, { type: "geojson", data: dataGeoJson, cluster: true, clusterMaxZoom, // Max zoom to cluster points on clusterRadius: 50 // Radius of each cluster when clustering points (defaults to 50) }); map.addLayer({ id: "clusters", type: "circle", source: sourceName, filter: ["has", "point_count"], paint: { // Use step expressions (https://docs.mapbox.com/mapbox-gl-js/style-spec/#expressions-step) // with three steps to implement three types of circles: // * Blue, 20px circles when point count is less than 100 // * Yellow, 30px circles when point count is between 100 and 750 // * Pink, 40px circles when point count is greater than or equal to 750 "circle-color": [ "step", ["get", "point_count"], "#51bbd6", 5, "#f1f075", 10, "#f28cb1" ], "circle-opacity": 0.5, "circle-radius": ["step", ["get", "point_count"], 20, 100, 30, 750, 40] } }); map.addLayer({ id: "cluster-count", type: "symbol", source: sourceName, filter: ["has", "point_count"], layout: { "text-field": "{point_count_abbreviated}", "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12 }, paint: { "text-opacity": 0.5 } }); map.addLayer({ id: "cluster-count-symbol", type: "symbol", source: sourceName, filter: ["!", ["has", "point_count"]], layout: { "text-field": ["get", "name"], "text-font": ["DIN Offc Pro Medium", "Arial Unicode MS Bold"], "text-size": 12, "text-offset": [0, 1] }, paint: { "text-color": ["get", "color"] //"#aaaaaa" } }); map.addLayer({ id: "unclustered-point", type: "circle", source: sourceName, filter: ["!", ["has", "point_count"]], paint: { "circle-color": ["get", "color"], "circle-radius": 5, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // inspect a cluster on click map.on("click", "clusters", (e) => { const features = map.queryRenderedFeatures(e.point, { layers: ["clusters"] }); const clusterId = features[0].properties.cluster_id; map .getSource(sourceName) .getClusterExpansionZoom(clusterId, (err, zoom) => { if (err) return; map.easeTo({ center: features[0].geometry.coordinates, zoom: zoom }); }); }); // When a click event occurs on a feature in // the unclustered-point layer, open a popup at // the location of the feature, with // description HTML from its properties. map.on("click", "unclustered-point", (e) => { console.log(e); console.log(e.features); let { properties } = e.features[0]; const coordinates = e.features[0].geometry.coordinates.slice(); const mag = e.features[0].properties.mag; const tsunami = e.features[0].properties.tsunami === 1 ? "yes" : "no"; // Ensure that if the map is zoomed out such that // multiple copies of the feature are visible, the // popup appears over the copy being pointed to. while (Math.abs(e.lngLat.lng - coordinates[0]) > 180) { coordinates[0] += e.lngLat.lng > coordinates[0] ? 360 : -360; } new mapboxgl.Popup() .setLngLat(coordinates) // .setHTML(`magnitude: ${mag}
Was there a tsunami?: ${tsunami}`) .setHTML( `

name: ${properties.raw}

dynasty: ${properties.dynasty}

location: ${properties.location}

` ) .addTo(map); }); map.on("mouseenter", "clusters", () => { map.getCanvas().style.cursor = "pointer"; }); map.on("mouseleave", "clusters", () => { map.getCanvas().style.cursor = ""; }); }32:[{"id":"30fcbe33f3ba2553ec3bea4a15cfbd8460d4b18a96a7bf2fb8672eec5323e7926da14755a1bcd1095b4c84d8149d3919c1aebe8856e52175974086faff299cf9","href":"https://static.observableusercontent.com/files/30fcbe33f3ba2553ec3bea4a15cfbd8460d4b18a96a7bf2fb8672eec5323e7926da14755a1bcd1095b4c84d8149d3919c1aebe8856e52175974086faff299cf9","name":"table-2@1.csv","type":"text/csv","lastModified":1714804014117.164,"size":48468},{"id":"b92252f10e81349d61baa8ee60f12eff47de8a46017ab074017bda9e07ccb4df1e4c46d83b2ddd6b7012b3d8e216987dcccf1485b28ae7519694a4ccf07068be","href":"https://static.observableusercontent.com/files/b92252f10e81349d61baa8ee60f12eff47de8a46017ab074017bda9e07ccb4df1e4c46d83b2ddd6b7012b3d8e216987dcccf1485b28ae7519694a4ccf07068be","name":"table-1@1.csv","type":"text/csv","lastModified":1714804016405.211,"size":79105}] 2f:{"id":"76f34f9c755e5bdc","slug":"read-more-travel-longer","title":"Read more, travel longer","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2024-05-04T06:23:50.814Z","update_time":"$D2024-05-04T08:44:38.814Z","view_time":null,"first_public_time":"$D2024-05-04T06:23:50.814Z","fork":false,"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":267,"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"},{"type":"team","id":"bcd65cef1cb4d2ed","login":"listenzcc","name":"Chuncheng","avatar_url":"https://avatars-next.observableusercontent.com/bb3c68e77a708a587ffc2d663bb83421f20d67991dbe6c1623c6e5d2fb73d15e","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Read more, travel longer","cells":[{"id":0,"value":"# Read more, travel longer\n## 读万卷书，行万里路","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":49,"value":"viewof reloadButton = Inputs.button(\"Reload mapbox\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"---\n\n## Mapbox","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":180,"value":"viewof selectNameCheckBox = Inputs.checkbox(\n namesWithCount.map((d) => d.name).reverse(),\n { label: \"Select names\", value: [] }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"viewof selectName = Inputs.select(\n namesWithCount.slice(1).map((d) => d.name),\n {\n label: \"Select name\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"viewof clusterMaxZoom = Inputs.range([1, 5], {\n label: \"Cluster max zoom\",\n step: 1,\n value: 3\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":200,"value":"{\n let names = [...new Set([selectName].concat(selectNameCheckBox))];\n\n return htl.html`\n

\nSelected \n${names.join(\", \")}\n

\n`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":55,"value":"container = html`\n

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":121,"value":"filteredData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"{\n selectName;\n selectNameCheckBox;\n clusterMaxZoom;\n reloadButton;\n\n map.on(\"load\", () => {\n refreshMapBox();\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"map = {\n selectName;\n selectNameCheckBox;\n clusterMaxZoom;\n reloadButton;\n\n let center = [d3.mean(data, (d) => d.lon), d3.mean(data, (d) => d.lat)],\n map = new mapboxgl.Map({\n container,\n center,\n zoom: 3,\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":41,"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":43,"value":"aspect = 3 / 4","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"height = width * aspect","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"namesWithCount = {\n let names = [...new Set(data.map((d) => d.name))].map((name) => {\n let count = data.filter((d) => d.name === name).length;\n return Object.assign({}, { name, count });\n });\n\n names = [{ name: \"--\", count: d3.sum(names, (d) => d.count) }].concat(names);\n\n names.map((d) => (d.name = `${d.name} (${d.count})`));\n\n names.sort((a, b) => b.count - a.count);\n\n return names;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"namesWithCount","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":118,"value":"filteredData = {\n let filteredData = data.filter(\n (d) =>\n selectName.startsWith(\"--\") |\n (d.name === selectName.split(\" \")[0]) |\n (selectNameCheckBox.find(\n (n) => (n.split(\" \")[0] === d.name) | n.startsWith(\"--\")\n ) !==\n undefined)\n );\n\n let name,\n color,\n i = 0,\n colorBox = {};\n\n filteredData.map((d) => {\n name = d.name;\n color = colorBox[name]\n if (color === undefined) {\n color = colors[i % colors.length]\n colorBox[name] = color\n i += 1;\n }\n d.color = color;\n });\n\n return filteredData;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":67,"value":"dataGeoJson = {\n let features = filteredData.map((d) => {\n let properties = d,\n coordinates = [d.lon, d.lat],\n geometry = { type: \"Point\", coordinates };\n return { type: \"Feature\", properties, geometry };\n });\n\n return { type: \"FeatureCollection\", features };\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"---\n\n## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":84,"value":"colors = d3.schemeCategory10","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"data = {\n let split = (string) => {\n string = string.slice(1, string.length - 2);\n string = string.replaceAll(\"'\", \"\");\n return string.split(\",\").map((d) => d.trim());\n };\n\n let nameTable = [];\n\n table1.map((d) => {\n let { title, names, lat, lon, num } = d;\n\n split(names).map((name) => {\n let info = table2.find((d) => d.name === name),\n { raw, start, stop, age, dynasty } = info;\n\n\n nameTable.push({\n raw,\n location: title,\n name,\n start,\n stop,\n age,\n dynasty,\n lat,\n lon\n });\n });\n });\n\n nameTable = nameTable.sort((a, b) => a.start - b.start);\n\n return nameTable;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":34,"value":"data","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"table1 = await FileAttachment(\"table-1@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"table1","database":"$undefined"},{"id":12,"value":"table2 = await FileAttachment(\"table-2@1.csv\").csv({typed: \"auto\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"table2","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"