2c:null 2d:["$","title",null,{"children":"地理空間情報から眺望の優れた場所を探すメソッドを確立する | TMU Dataviz Class | Observable"}] 32:Td09,TokyoMapVisualization1 = { const container = yield html`

Elevation Legend (m)

< 10

10–20

20–40

40–60

60–80

80–100

100–150

150–200

200–300

> 300

`; const myOffice = [139.3669, 35.66157]; const map = new maplibregl.Map({ attributionControl: false, // アトリビューションを非表示にする container: container.querySelector("#map"), center: myOffice, zoom: 9, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true, width: container.clientWidth, height: container.clientHeight }); map.on("load", () => { const coloredGeojsonData = { ...geojsonData, features: geojsonData.features.map((f) => ({ ...f, properties: { ...f.properties, fillColor: getElevationColor( f.properties["kyokai_with_elevation_標高"] ) } })) }; map.addSource("geojson", { type: "geojson", data: coloredGeojsonData }); map.addLayer({ id: "geojson-layer", type: "fill", source: "geojson", paint: { "fill-color": ["get", "fillColor"], "fill-opacity": 0.8 } }); }); return container; }33:T1cf3,Tokyo2 = { const container = html`

地物情報

「台」「山」「丘」を含む地域

眺望ポイント

地物にホバーすると情報が表示されます

`; let map = new maplibregl.Map({ attributionControl: false, container, center: [139.3669, 35.66157], zoom: 9, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true, width: container.clientWidth, height: container.clientHeight }); const updateLegend = (properties, type = "polygon") => { const legendContent = document.getElementById("legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

'; return; } if (type === "polygon") { const sName = properties.S_NAME || "不明"; const elevation = properties.kyokai_with_elevation_標高 || "不明"; const formattedElevation = typeof elevation === "number" ? `${elevation.toFixed(1)}m` : elevation; legendContent.innerHTML = `

町名: ${sName}

標高: ${formattedElevation}

`; } else if (type === "point") { const name = (properties.名称 || "不明").replace(/['"]/g, ""); const attribute = (properties.属性 || "不明").replace(/['"]/g, ""); const comment = (properties.コメント || "不明").replace(/['"]/g, ""); legendContent.innerHTML = `

名称: ${name}

属性: ${attribute}

コメント: ${comment}

`; } }; window.addEventListener("resize", () => { map.resize(); }); map.on("load", () => { map.resize(); map.addSource("filtered-geojson", { type: "geojson", data: filteredGeojsonData }); map.addLayer({ id: "boundary-line-layer", type: "line", source: "filtered-geojson", paint: { "line-color": "#0000FF",//きょうかい線 "line-width": 1, "line-opacity": 0.8 } }); map.addLayer({ id: "filtered-geojson-layer", type: "fill", source: "filtered-geojson", paint: { "fill-color": [ "case", ["boolean", ["feature-state", "hover"], false], "#1e90ff", "#87cefa" ], "fill-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 0.9, 0.6 ] } }); map.addSource("point-data", { type: "geojson", data: choubougeo_full_jsonData }); map.addLayer({ id: "point-layer", type: "circle", source: "point-data", paint: { "circle-radius": 6, "circle-color": "#e31a1c", "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff"//周りの色 } }); let hoveredStateId = null; let hoveredPointId = null; map.on("mousemove", "filtered-geojson-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredStateId !== null) { map.setFeatureState( { source: "filtered-geojson", id: hoveredStateId }, { hover: false } ); } hoveredStateId = e.features[0].id; map.setFeatureState( { source: "filtered-geojson", id: hoveredStateId }, { hover: true } ); updateLegend(e.features[0].properties, "polygon"); }); map.on("mousemove", "point-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredPointId !== null) { map.setFeatureState( { source: "point-data", id: hoveredPointId }, { hover: false } ); } hoveredPointId = e.features[0].id; map.setFeatureState( { source: "point-data", id: hoveredPointId }, { hover: true } ); updateLegend(e.features[0].properties, "point"); }); map.on("mouseleave", "filtered-geojson-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredStateId !== null) { map.setFeatureState( { source: "filtered-geojson", id: hoveredStateId }, { hover: false } ); } hoveredStateId = null; updateLegend(null); }); map.on("mouseleave", "point-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredPointId !== null) { map.setFeatureState( { source: "point-data", id: hoveredPointId }, { hover: false } ); } hoveredPointId = null; updateLegend(null); }); }); yield container; return {}; }34:T2b75,Tokyo = { const container = html`

地物情報

「台」「山」「丘」を含む地域

東京タワーの可視領域

フィルタリング前の眺望ポイント

フィルタリング後の眺望ポイント

地物にホバーすると情報が表示されます

町名: ${sName}

標高: ${formattedElevation}

名称: ${name}

属性: ${attribute}

コメント: ${comment}

`; } }; window.addEventListener("resize", () => { map.resize(); }); // アニメーション関数 function animatePaintProperty( map, layerId, prop, startValue, endValue, duration, onComplete = () => {} ) { const startTime = performance.now(); function step(now) { const t = Math.min((now - startTime) / duration, 1); const currentValue = startValue + (endValue - startValue) * t; map.setPaintProperty(layerId, prop, currentValue); if (t < 1) { requestAnimationFrame(step); } else { onComplete(); } } requestAnimationFrame(step); } // 透明度をアニメーションで低下させる関数 function animateStrokeColor(map, layerId, duration, onComplete = () => {}) { const startTime = performance.now(); const initialAlpha = 0.8; function step(now) { const t = Math.min((now - startTime) / duration, 1); const alpha = initialAlpha * (1 - t); const color = `rgba(255,255,255,${alpha})`; map.setPaintProperty(layerId, "circle-stroke-color", color); if (t < 1) { requestAnimationFrame(step); } else { onComplete(); } } requestAnimationFrame(step); } // アニメーション再生の処理をひとまとめにする関数 async function runAnimations() { // リセットする if (map.getLayer("orange-point-layer")) { map.setPaintProperty("orange-point-layer", "circle-opacity", 0); } if (map.getLayer("red-point-layer")) { map.setPaintProperty("red-point-layer", "circle-opacity", 0); } if (map.getLayer("viewshed-layer")) { map.setPaintProperty("viewshed-layer", "fill-opacity", 0); } // 配水施設のオレンジ点レイヤーをフェードイン animatePaintProperty( map, "orange-point-layer", "circle-opacity", 0, 0.8, 1000 ); // 配水施設の赤点レイヤーをフェードイン animatePaintProperty( map, "red-point-layer", "circle-opacity", 0, 0.8, 1000 ); await new Promise((resolve) => setTimeout(resolve, 1000)); // 視認域レイヤーをフェードイン animatePaintProperty(map, "viewshed-layer", "fill-opacity", 0, 0.4, 1000); await new Promise((resolve) => setTimeout(resolve, 1000)); // 赤点レイヤーをフェードアウト animatePaintProperty( map, "red-point-layer", "circle-opacity", 0.8, 0, 1000 ); animateStrokeColor(map, "red-point-layer", 1000); } map.on("load", async () => { map.resize(); // ポリゴンデータの追加 map.addSource("filtered-geojson", { type: "geojson", data: filteredGeojsonData }); map.addLayer({ id: "boundary-line-layer", type: "line", source: "filtered-geojson", paint: { "line-color": "#0000FF", "line-width": 1, "line-opacity": 0.8 } }); map.addLayer({ id: "filtered-geojson-layer", type: "fill", source: "filtered-geojson", paint: { "fill-color": [ "case", ["boolean", ["feature-state", "hover"], false], "#1e90ff", "#87cefa" ], "fill-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 0.7, 0.4 ] } }); await new Promise((resolve) => setTimeout(resolve, 1000)); // 配水施設（オレンジ点）の追加 map.addSource("orange-point-data", { type: "geojson", data: choubougeojsonData }); map.addLayer({ id: "orange-point-layer", type: "circle", source: "orange-point-data", paint: { "circle-radius": 6, "circle-color": "#ff4500", "circle-opacity": 0, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // 配水施設（赤点）の追加 map.addSource("red-point-data", { type: "geojson", data: choubougeo_full_jsonData }); map.addLayer({ id: "red-point-layer", type: "circle", source: "red-point-data", paint: { "circle-radius": 6, "circle-color": "#ff0000", "circle-opacity": 0, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); // 赤点レイヤーのホバー処理 let hoveredRedPointId = null; map.on("mousemove", "red-point-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredRedPointId !== null) { map.setFeatureState( { source: "red-point-data", id: hoveredRedPointId }, { hover: false } ); } hoveredRedPointId = e.features[0].id; map.setFeatureState( { source: "red-point-data", id: hoveredRedPointId }, { hover: true } ); updateLegend(e.features[0].properties, "point"); }); map.on("mouseleave", "red-point-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredRedPointId !== null) { map.setFeatureState( { source: "red-point-data", id: hoveredRedPointId }, { hover: false } ); } hoveredRedPointId = null; updateLegend(null); }); // オレンジ点レイヤーのホバー処理 let hoveredOrangePointId = null; map.on("mousemove", "orange-point-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredOrangePointId !== null) { map.setFeatureState( { source: "orange-point-data", id: hoveredOrangePointId }, { hover: false } ); } hoveredOrangePointId = e.features[0].id; map.setFeatureState( { source: "orange-point-data", id: hoveredOrangePointId }, { hover: true } ); updateLegend(e.features[0].properties, "point"); }); map.on("mouseleave", "orange-point-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredOrangePointId !== null) { map.setFeatureState( { source: "orange-point-data", id: hoveredOrangePointId }, { hover: false } ); } hoveredOrangePointId = null; updateLegend(null); }); await new Promise((resolve) => setTimeout(resolve, 1000)); // 視認域レイヤーの追加 map.addSource("viewshed-source", { type: "geojson", data: viewshedjsonData }); map.addLayer({ id: "viewshed-layer", type: "fill", source: "viewshed-source", paint: { "fill-color": "#32CD32", "fill-opacity": 0, "fill-outline-color": "#228B22" } }); // 初回のアニメーション実行 runAnimations(); }); // ボタンが押された際に再度アニメーション再生する btn.addEventListener("click", () => { runAnimations(); }); yield container; return {}; }35:T1612,viewof map2 = { const container = html`

地物情報

フィルタリングした眺望ポイント

地物にホバーすると情報が表示されます

`; const sliderContainer = html`

${viewof opacity}

`; container.appendChild(sliderContainer); const demCanvas = canvas; let map = new maplibregl.Map({ attributionControl: false, // アトリビューションを非表示にする container: container, style: { version: 8, sources: { "base-map": { type: "raster", tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256 }, "dem-raster": { type: "image", url: demCanvas.toDataURL(), coordinates: [ [bbox[0], bbox[3]], [bbox[2], bbox[3]], [bbox[2], bbox[1]], [bbox[0], bbox[1]] ] }, "haisui-data": { type: "geojson", data: await FileAttachment("choubou_intersect_cleanup.geojson").json() } }, layers: [ { id: "base-map", type: "raster", source: "base-map" }, { id: "dem-raster", type: "raster", source: "dem-raster", paint: { "raster-opacity": 0.8 } }, { id: "haisui-layer", type: "circle", source: "haisui-data", paint: { "circle-radius": 6, "circle-color": "#ff4500", "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } } ] }, center: [139.767, 35.681], zoom: 11 }); const updateLegend = (properties) => { const legendContent = container.querySelector("#legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

'; return; } const name = properties.名称 || "不明"; const address = properties.住所 || "不明"; legendContent.innerHTML = `

名称: ${name}

住所: ${address}

地物情報

配水施設

配水施設(写真有)

地物にホバーすると情報が表示される

`; let map = new maplibregl.Map({ attributionControl: false, container: container, center: [139.3669, 35.66157], zoom: 9, style: "https://basemaps.cartocdn.com/gl/voyager-gl-style/style.json", scrollZoom: true, width: container.clientWidth, height: container.clientHeight }); // legendの更新関数 const updateLegend = (properties) => { const legendContent = container.querySelector("#legend-content"); // propertiesが渡された場合のみ内容を更新する if (properties) { let photoHTML = ""; if (properties.photo) { const photoURLs = properties.photo.split(","); if (photoURLs.length > 0 && photoURLs[0] !== "") { photoURLs.forEach((url) => { const trimmedUrl = url.trim(); photoHTML += `

`; }); } else { photoHTML = '

写真: なし

'; } } else { photoHTML = '

写真: なし

'; } legendContent.innerHTML = `

名称: ${properties.名称 || "不明"}

住所: ${properties.住所 || "不明"}

${photoHTML} `; } }; map.on("load", async () => { try { const geojsonData = await FileAttachment( "kyusui_haisui_photo.geojson" ).json(); map.addSource("haisui-data", { type: "geojson", data: geojsonData }); map.addLayer({ id: "haisui-layer", type: "circle", source: "haisui-data", paint: { "circle-radius": 6, "circle-color": [ "case", ["boolean", ["feature-state", "hover"], false], [ "case", [ "any", ["!", ["has", "photo"]], ["==", ["get", "photo"], null], ["==", ["get", "photo"], ""] ], "#1f78b4", "#bb65c9" ], [ "case", [ "any", ["!", ["has", "photo"]], ["==", ["get", "photo"], null], ["==", ["get", "photo"], ""] ], "#1f78b4", "#8e44ad" ] ], "circle-opacity": [ "case", ["boolean", ["feature-state", "hover"], false], 0.5, 0.8 ], "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }); let hoveredHaisuiId = null; map.on("mousemove", "haisui-layer", (e) => { map.getCanvas().style.cursor = "pointer"; // すでに他の地物にホバーしている場合は、その hover 状態を解除 if (hoveredHaisuiId !== null && hoveredHaisuiId !== e.features[0].id) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = e.features[0].id; map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: true } ); // 新たにホバーした地物の情報を legend に反映 updateLegend(e.features[0].properties); }); } catch (error) { console.error("データの読み込みに失敗した", error); } }); // 凡例内のスクロールイベントがマップに伝播しないように設定 const legend = container.querySelector(".legend"); legend.addEventListener("wheel", (e) => { e.stopPropagation(); }); window.addEventListener("resize", () => { map.resize(); }); return container; }37:T1f22,viewof map3 = { const container = html`

地物情報

フィルタリングした眺望ポイント

城跡

地物にホバーすると情報が表示されます

`; const sliderContainer = html`

${viewof opacity1}

`; container.appendChild(sliderContainer); const demCanvas = canvas; let map = new maplibregl.Map({ container: container, attributionControl: false, // アトリビューションを非表示にする style: { version: 8, sources: { "base-map": { type: "raster", tiles: ["https://tile.openstreetmap.org/{z}/{x}/{y}.png"], tileSize: 256 }, "dem-raster": { type: "image", url: demCanvas.toDataURL(), coordinates: [ [bbox[0], bbox[3]], [bbox[2], bbox[3]], [bbox[2], bbox[1]], [bbox[0], bbox[1]] ] }, "haisui-data": { type: "geojson", data: await FileAttachment("choubou_intersect_cleanup.geojson").json() }, "shiroato-data": { type: "geojson", data: shiroatoData } }, layers: [ { id: "base-map", type: "raster", source: "base-map" }, { id: "dem-raster", type: "raster", source: "dem-raster", paint: { "raster-opacity": 0.8 } }, { id: "haisui-layer", type: "circle", source: "haisui-data", paint: { "circle-radius": 6, "circle-color": "#ff7f00", "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } }, { id: "shiroato-layer", type: "circle", source: "shiroato-data", paint: { "circle-radius": 6, "circle-color": "#bcbd22", "circle-opacity": 0.8, "circle-stroke-width": 1, "circle-stroke-color": "#fff" } } ] }, center: [139.767, 35.681], zoom: 11 }); const updateLegendHaisui = (properties) => { const legendContent = container.querySelector("#legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

'; return; } const name = properties.名称 || "不明"; const address = properties.住所 || "不明"; legendContent.innerHTML = `

名称: ${name}

住所: ${address}

`; }; const updateLegendShiroato = (properties) => { const legendContent = container.querySelector("#legend-content"); if (!properties) { legendContent.innerHTML = '

地物にホバーすると情報が表示されます

'; return; } const name = properties.名称 || "不明"; const comment = properties.コメント || "不明"; legendContent.innerHTML = `

名称: ${name}

コメント: ${comment}

`; }; let hoveredHaisuiId = null; map.on("mousemove", "haisui-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = e.features[0].id; map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: true } ); updateLegendHaisui(e.features[0].properties); }); map.on("mouseleave", "haisui-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredHaisuiId) { map.setFeatureState( { source: "haisui-data", id: hoveredHaisuiId }, { hover: false } ); } hoveredHaisuiId = null; updateLegendHaisui(null); }); let hoveredShiroatoId = null; map.on("mousemove", "shiroato-layer", (e) => { map.getCanvas().style.cursor = "pointer"; if (hoveredShiroatoId) { map.setFeatureState( { source: "shiroato-data", id: hoveredShiroatoId }, { hover: false } ); } hoveredShiroatoId = e.features[0].id; map.setFeatureState( { source: "shiroato-data", id: hoveredShiroatoId }, { hover: true } ); updateLegendShiroato(e.features[0].properties); }); map.on("mouseleave", "shiroato-layer", () => { map.getCanvas().style.cursor = ""; if (hoveredShiroatoId) { map.setFeatureState( { source: "shiroato-data", id: hoveredShiroatoId }, { hover: false } ); } hoveredShiroatoId = null; updateLegendShiroato(null); }); map.on("load", () => { map.resize(); map.fitBounds( [ [bbox[0], bbox[1]], [bbox[2], bbox[3]] ], { padding: 20 } ); }); window.addEventListener("resize", () => { map.resize(); }); viewof opacity1.addEventListener("input", (event) => { const value = event.target.value / 100; map.setPaintProperty("dem-raster", "raster-opacity", value); }); return container; }38:T7a7,

参考サイト

39:Tb77, 3a:Tec8,canvas = { let demRaster = await image.readRasters({ interleave: true }); let minVal = Infinity; let maxVal = -Infinity; for (let i = 0; i < demRaster.length; i++) { const val = demRaster[i]; if (val < minVal) minVal = val; if (val > maxVal) maxVal = val; } console.log("DEM 最小値:", minVal, "最大値:", maxVal); function lerp(a, b, t) { return a + (b - a) * t; } const classes = [ { min: -Infinity, max: -14.8, color: [0, 0, 4] }, { min: -14.8, max: -0.0002, color: [57, 15, 110] }, { min: -0.0002, max: 1.5298, color: [66, 15, 117] }, { min: 1.5298, max: 2.4499, color: [74, 16, 121] }, { min: 2.4499, max: 3.1498, color: [82, 19, 124] }, { min: 3.1498, max: 3.9601, color: [90, 22, 126] }, { min: 3.9601, max: 5.4001, color: [98, 25, 128] }, { min: 5.4001, max: 8.1002, color: [106, 28, 129] }, { min: 8.1002, max: 11.1999, color: [114, 31, 129] }, { min: 11.1999, max: 15.78, color: [121, 34, 130] }, { min: 15.78, max: 20.6597, color: [129, 37, 129] }, { min: 20.6597, max: 24.9798, color: [137, 40, 129] }, { min: 24.9798, max: 29.1001, color: [145, 43, 129] }, { min: 29.1001, max: 33.0597, color: [153, 45, 128] }, { min: 33.0597, max: 36.7203, color: [161, 48, 126] }, { min: 36.7203, max: 40.3299, color: [170, 51, 125] }, { min: 40.3299, max: 43.8503, color: [178, 53, 123] }, { min: 43.8503, max: 47.6101, color: [186, 56, 120] }, { min: 47.6101, max: 52.1002, color: [194, 59, 117] }, { min: 52.1002, max: 56.4898, color: [202, 62, 114] }, { min: 56.4898, max: 61.5897, color: [210, 66, 111] }, { min: 61.5897, max: 67.5999, color: [217, 70, 107] }, { min: 67.5999, max: 74.4997, color: [224, 76, 103] }, { min: 74.4997, max: 82.53, color: [231, 82, 99] }, { min: 82.53, max: 92.7101, color: [236, 88, 96] }, { min: 92.7101, max: 104.5002, color: [241, 96, 93] }, { min: 104.5002, max: 117.5101, color: [244, 105, 92] }, { min: 117.5101, max: 132.7697, color: [247, 114, 92] }, { min: 132.7697, max: 154.64, color: [249, 123, 93] }, { min: 154.64, max: 182.4398, color: [251, 133, 96] }, { min: 182.4398, max: 221.2002, color: [252, 142, 100] }, { min: 221.2002, max: 266.0899, color: [253, 152, 105] }, { min: 266.0899, max: 314.4198, color: [254, 161, 110] }, { min: 314.4198, max: 360.3996, color: [254, 170, 116] }, { min: 360.3996, max: 412.9901, color: [254, 180, 123] }, { min: 412.9901, max: 470.8896, color: [254, 189, 130] }, { min: 470.8896, max: 531.4, color: [254, 198, 138] }, { min: 531.4, max: 599.8295, color: [254, 207, 146] }, { min: 599.8295, max: 675.8799, color: [254, 216, 154] }, { min: 675.8799, max: 762.8995, color: [253, 226, 163] }, { min: 762.8995, max: 881.4496, color: [253, 235, 172] }, { min: 881.4496, max: 1038.8693, color: [252, 244, 182] }, { min: 1038.8693, max: 1637.5494, color: [252, 253, 191] }, { min: 1637.5494, max: Infinity, color: [252, 253, 191] } // 最大値 > 1637.5494 ]; function getColor(value) { for (let i = 0; i < classes.length; i++) { if (value >= classes[i].min && value < classes[i].max) { return classes[i].color; } } return [0, 0, 0]; } let canvas = document.createElement("canvas"); canvas.width = width; canvas.height = height; let ctx = canvas.getContext("2d"); let imageData = ctx.createImageData(width, height); for (let i = 0; i < demRaster.length; i++) { const val = demRaster[i]; const [r, g, b] = getColor(val); imageData.data[i * 4 + 0] = r; imageData.data[i * 4 + 1] = g; imageData.data[i * 4 + 2] = b; imageData.data[i * 4 + 3] = 255; } ctx.putImageData(imageData, 0, 0); return canvas; }3b:T5b5, 3c:[{"id":"59086b932289ac772d6276c478f455cfa7888e4c7be04604abd9804fa14da6db805af1df98fb8f76835e50bb6f11498a47fcec21bafabc55a5c19de64b429351","href":"https://static.observableusercontent.com/files/59086b932289ac772d6276c478f455cfa7888e4c7be04604abd9804fa14da6db805af1df98fb8f76835e50bb6f11498a47fcec21bafabc55a5c19de64b429351","name":"ddddd.geojson","type":"application/geo+json","lastModified":1736585522774.127,"size":21268271},{"id":"724f977cf5081cfce7f4a82dee07b155688491f0dc86079e537bbd4d0c44e9130bbe2efa9f19e205a9e3dad0d5b9f0ba58e59da997264903097bf1a36ab8baca","href":"https://static.observableusercontent.com/files/724f977cf5081cfce7f4a82dee07b155688491f0dc86079e537bbd4d0c44e9130bbe2efa9f19e205a9e3dad0d5b9f0ba58e59da997264903097bf1a36ab8baca","name":"miharashi_place@1.csv","type":"text/csv","lastModified":1737224401248.601,"size":62719},{"id":"b78c503d7484a3f7b6c5db5267b1cd3bad594e3d313be8a8d180e54246e50449d3e05ce6a7eee400d885b1b51d14e208708ebcc41ae67dd0fe97849006ccfc1e","href":"https://static.observableusercontent.com/files/b78c503d7484a3f7b6c5db5267b1cd3bad594e3d313be8a8d180e54246e50449d3e05ce6a7eee400d885b1b51d14e208708ebcc41ae67dd0fe97849006ccfc1e","name":"Nishitokyo_big_DEM.tif","type":"image/tiff","lastModified":1738172663078.191,"size":46309068},{"id":"222b1ac22dc4319062fdaa40a35e66e4560614227667d588b1c587e7f75355ad1655beb9221616dc2fd8d90c2c29695eaf584f8e695fe5d847b8297617e7b573","href":"https://static.observableusercontent.com/files/222b1ac22dc4319062fdaa40a35e66e4560614227667d588b1c587e7f75355ad1655beb9221616dc2fd8d90c2c29695eaf584f8e695fe5d847b8297617e7b573","name":"kyusui_haisui_photo.geojson","type":"application/geo+json","lastModified":1738241606182.791,"size":24291},{"id":"ebbe9b11320187b85e73959f949320aa9383ffaa25aa88ce5ad78d03b180bbb27031f8911c8cfa2e319ef6b8750201c97b5054e60f483bf3f7c78a59164db122","href":"https://static.observableusercontent.com/files/ebbe9b11320187b85e73959f949320aa9383ffaa25aa88ce5ad78d03b180bbb27031f8911c8cfa2e319ef6b8750201c97b5054e60f483bf3f7c78a59164db122","name":"choubou_intersect_cleanup.geojson","type":"application/geo+json","lastModified":1737567251672.895,"size":35759},{"id":"a13dc2d686ae296e915f65f8bc3b16855883c2674e881dae5e0807cae1b569694826072de1ab9de952174d107c01181a8f94a960a31853efc1af2c38a787f96c","href":"https://static.observableusercontent.com/files/a13dc2d686ae296e915f65f8bc3b16855883c2674e881dae5e0807cae1b569694826072de1ab9de952174d107c01181a8f94a960a31853efc1af2c38a787f96c","name":"shiroato_output_final_.geojson","type":"application/geo+json","lastModified":1738530819391.112,"size":18583},{"id":"73fe06d8721376eadd10693ff0df2871e743abd580398b740cea45c7f784a1b69c92e3652d782b3e5514bdc1464c704e06afc47d212ce72d3368b6bbee0c0261","href":"https://static.observableusercontent.com/files/73fe06d8721376eadd10693ff0df2871e743abd580398b740cea45c7f784a1b69c92e3652d782b3e5514bdc1464c704e06afc47d212ce72d3368b6bbee0c0261","name":"標高データ-1-1024x683 (1).png","type":"image/png","lastModified":1738546184286.249,"size":95037},{"id":"9c6fe0b2e1f152f7a7266e1fab6c6879d1d211c9bf65c72af8f1a284e38af356465d08abcf74c0153fb29cb9f15b6dea4a6767cad7dd2edcc5fcb2ccd7612cd1","href":"https://static.observableusercontent.com/files/9c6fe0b2e1f152f7a7266e1fab6c6879d1d211c9bf65c72af8f1a284e38af356465d08abcf74c0153fb29cb9f15b6dea4a6767cad7dd2edcc5fcb2ccd7612cd1","name":"google map@1.png","type":"image/png","lastModified":1738547642850.086,"size":542},{"id":"6afd8aeb7f96d61dcae034c65cc7d5d0b20f1c5dc2633935e197b65b04d5e4cc617464c2dd44a1f76f12080a5dc5e376c45b1c3e53eb9d6177a67ffad70a5ac2","href":"https://static.observableusercontent.com/files/6afd8aeb7f96d61dcae034c65cc7d5d0b20f1c5dc2633935e197b65b04d5e4cc617464c2dd44a1f76f12080a5dc5e376c45b1c3e53eb9d6177a67ffad70a5ac2","name":"network_thumbnail@1.png","type":"image/png","lastModified":1738554258049.546,"size":1188130},{"id":"f5aa1c2d8e67dbbda93befc568a495fb63bd0fc62889190e6e5e6e7540f90d2655244166dcb248ba0f1df1f46cbe3ebebbf7977108bdb441c177fa99d415dad4","href":"https://static.observableusercontent.com/files/f5aa1c2d8e67dbbda93befc568a495fb63bd0fc62889190e6e5e6e7540f90d2655244166dcb248ba0f1df1f46cbe3ebebbf7977108bdb441c177fa99d415dad4","name":"tokyo_tower_reduce.geojson","type":"application/geo+json","lastModified":1738152653766.348,"size":34826458},{"id":"d7cfa3ca55e4e3c40d9b0884618d25a886c2b9ec4331157688417e6fa4dc00f1c7a7f1def5fafb76c64e78a012baedb44e95aa423913c502514ecf6e7b9021e9","href":"https://static.observableusercontent.com/files/d7cfa3ca55e4e3c40d9b0884618d25a886c2b9ec4331157688417e6fa4dc00f1c7a7f1def5fafb76c64e78a012baedb44e95aa423913c502514ecf6e7b9021e9","name":"Choubou_point_data@2.geojson","type":"application/geo+json","lastModified":1738158907592.573,"size":132936}] 30:{"id":"38422bbbb4baeb3e","slug":"tokyo_elevation_analyze","title":"地理空間情報から眺望の優れた場所を探すメソッドを確立する","thumbnail":"c21e043c2d9a2bd4ec9834fa812414def94f8467daa7a5e35088bd2379e47d97","access_level":"public","create_time":"$D2025-01-07T00:42:37.404Z","update_time":"$D2025-02-14T08:19:15.638Z","view_time":null,"first_public_time":"$D2025-02-03T04:18:17.562Z","has_unpublished_edits":null,"fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026"},"version":1753,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"296c9b7ca924c8ff","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/26c669a237457969f9d31688f6421647207470a95c76acfc096ec5a76b45c5f0","tier":null}],"members":[{"type":"individual","id":"296c9b7ca924c8ff","login":"kai-shiraishi","name":"kai shiraishi","avatar_url":"https://avatars-next.observableusercontent.com/26c669a237457969f9d31688f6421647207470a95c76acfc096ec5a76b45c5f0","tier":null,"role":"editor"},{"type":"team","id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class","avatar_url":"https://avatars-next.observableusercontent.com/7549232d2187bf99f5cfbd7780436d4ce1cc4257fe3eae6585b5ff10b836499b","tier":"education_2026","role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":{"id":"64342ad2a9267bf8","slug":"2024-final-project","title":"2024 Final Project","owner":{"id":"fdca81b2f5eb7de5","login":"tmu-dataviz-class","name":"TMU Dataviz Class"}},"type":"notebook","body":{"titling":"auto","title":"地理空間情報から眺望の優れた場所を探すメソッドを確立する","cells":[{"id":268,"value":"# 地理空間情報から眺望の優れた場所を探すメソッドを確立する\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":907,"value":"{\n const imageUrl = await FileAttachment(\"network_thumbnail@1.png\").url();\n\n return html`\n

\n \n

\n `;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":637,"value":"

はじめに

\n 私は散歩が趣味で街を歩くのが好きだ．
日頃, 街を歩いているといつしか眺めがいい場所を探すことが目的になっていた．

そうして自分の家の周りにある眺めがいい場所を探していくうちにその地点にはある特徴的なパターンがあると感じた．今回のプロジェクトでは東京都が公開している地理空間情報を元にそのパターンを分析し，見知らぬ地に行った際でも地図や周囲の情報から眺望が優れた場所を見つけ出すことのできるメソッドを確立することを目的とする．\n\n

\n \n 眺望が優れた場所 = その地点から遠くまで見通すことができる場所\n \n

東京都の地形

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":709,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1741,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1618,"value":"

\n 国土数値情報ダウンロードサイト　行政区画データ　東京都： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html\n \n

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\n標高を元に色分けを行い，可視化してみると東京は東から西にかけて傾斜がかかっていることがわかる．それに伴い川の流れも東から西にかけて流れていることがわかる．その土地の傾斜を把握する上で川の流れている方向はかなり使えそうだ．
e-statから取得した行政地域の代表点の情報を元に国土地理院APIからその地点の標高を取得し，作成した．\n

町名と眺望の優れた場所の関係

\n 自分が日々散歩をしながら眺望ポイントを探している際に自分の中に一つ仮説があった．それは標高と町名の関係だ．町名に「--台」「--山」「--丘」とつく地域は眺望の良い場所は周囲の地域よりも標高が高い場所が多く，眺望の優れたポイントが多いイメージがあった．\n

\n \n 仮説1:
眺望が優れた場所は「--台」「--山」「--丘」とつく地域に集中する\n \n

\n 仮説1を確かめるために以下の手順でデータ可視化を行なった．\n

GoogleMapの口コミから「眺望」「景色」「夜景」のキーワードを検索
検索にヒットした地点をCSVに記録し、ビルの展望台などは手作業で除去
GoogleMap APIを用いて座標を特定
QGISでGeoJson形式に変換
Observableで眺望がいいとされるポイントを赤色にプロット

e-statから行政地区の境界データをダウンロード
QGISでGeoJson形式に変換
Obserableで町の名前に「--台」「--山」「--丘」を含む地域を青色にハイライト

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1110,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1744,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1623,"value":"

\n GoogleMap 眺望・見晴らし・夜景： \n \n https://www.google.com/maps/search/%E7%9C%BA%E6%9C%9B/@35.5668567,138.4059432,232033m/data=!3m2!1e3!4b1?entry=ttu&g_ep=EgoyMDI1MDEyOS4xIKXMDSoASAFQAw%3D%3D\n \n

\n 国土数値情報ダウンロードサイト　行政区画データ　東京都： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html\n \n

\n \n 大体4割強くらいのポイントが「--台」「--山」「--丘」と名前のつく地域に含まれていることがわかった．\n \n

\n \n 結果1:
多少の重なりは見られるがそこまで関係はなさそう\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1139,"value":"

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1127,"value":"

眺望の優れた場所をフィルタリングして再度分析

\n GoogleMapでスクレイピングしたデータの中には自分が定義する眺望が良い(=遠くまで見通すことができる)にそぐわないものが含まれている可能性がある．そこで，もう少し厳密に\"眺望がいい\"を定義する．\n

\n \n 再定義:
眺望が優れた場所=その地点から東京タワーを見ることができる．\n \n

\n東京タワーを見ることができる場所は(その地点が西東京であるとすれば)40km先を見通すことになるので距離の基準として東京タワーを設定した．\n

\n 画像引用元：
GISにおける標高データの扱い方とは？〜DEMやDSM、GISソフトでの操作方法などを解説します！〜
\n \n https://sinrintech.com/knowledge/gis/elevation-data/\n \n

\n フィルタリングの手順\n

国土地理院の標高データをもとにDEM(数値標高モデル)のラスターデータを作成
Plateauで公開される東京都全域の建物の高さデータをラスターデータに変換
　1と2で作成したデータを加算して擬似DSM(数値表層モデル)を作成
3で作成したDSMに対し，GDSLの可視領域分析を実施
GeoJson形式に変換
Obserableで可視化東京タワーが見える箇所を緑色でハイライト

GoogleMapの口コミで取得したポイントデータに対し半径25mのバッファを作成
可視領域とそのバッファが重なる場所のみを抽出
QGISでGeoJson形式に変換
Obserableでオレンジ色でプロット

\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1721,"value":"btn = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1003,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1746,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1625,"value":"

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\n\n

\n plateau： \n \n https://www.mlit.go.jp/plateau/open-data/\n \n

\n\n

\n G空間情報センター 3D都市モデル： \n \n https://www.geospatial.jp/ckan/dataset/plateau-13201-hachioji-shi-2022\n \n

\n\n

\n 国土数値情報ダウンロードサイト　行政区画データ　東京都： \n \n https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N03-v2_3.html\n \n

\n \n 結果1-1:
結果はあまり変わらず，多少の重なりは見られるがそこまで関係はなさそう\n \n

\nフィルタリングしたデータを用いて再度分析を行なったが眺望がいい場所と町名の関係はなさそうであった．しかしプロットした点がかなり集中していることがわかる．この地点の特徴をより詳細な標高データと重ね合わせ，分析を行った．\n

\n DEMの可視化手順\n

国土地理院の標高データをもとにDEM(数値標高モデル)のラスターデータを作成
QGISでGeoTiff形式に変換
QGISのカラーパターンを定義
標高値の配列demRasterに対し、各画素ごとにgetColor関数で色を取得、その色情報をcanvasに反映canvasを返す
Obserableで可視化

\n 参考にしたノートブック\n
\n Display and project a geotiff with plot： \n \n https://observablehq.com/@neocartocnrs/display-and-project-a-geotiff-with-plot\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1225,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1748,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1627,"value":"

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\nプロットが集中する地域は周囲の平野部に食い込む形で山が入り込んでいるのがわかる．\n

\nこのことから，周囲の平野部よりも独立して標高が高くなっている地域を見つけること・急激に標高が変化している場所を探すことが眺望がいい場所を探す上で重要であることがわかる．\n

眺望の優れた場所と水道網の関係

\nここで新たに仮説を立てた．\n

\n\n

\n \n 仮説2:
眺望が良い場所は配水場のある場所の周囲に集中する．\n \n

\n配水場に目をつけた理由はGoogleMapから取得した眺望ポイントのデータを分析している際に配水場がデータ内にあった．そこから水道網と標高には関係何かしらの関係があるのではないかと考えたからだ．\n

\n\n

\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1452,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1750,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1615,"value":"

\n 東京都水道局
\n 給水所・配水管・水運用センターの紹介： \n \n https://www.waterworks.metro.tokyo.lg.jp/suidojigyo/gaiyou/mizuunyou.html\n \n

\n実際に紫色でプロットがされている場所は実際に足を運んで訪れてみた箇所だ．その地点の眺望は東京タワーが見えるほどではないが周囲の地域よりも少し標高が高い場所に設置されているため周囲の地域を見渡すことができた．\n

\nしかし，他の地点の場所を見ると標高がさほど高くない地域に設置されている場所もあるようだ．配水場について詳しく調べてみると配水場には自然流下方式・ポンプ圧送方式があるらしく，前者の自然流下方式は位置エネルギーを用いて各家庭に配水を行い，後者のポンプ圧送方式はポンプの力を用いて配水を行うことがわかった．\n

\n\n

\n 明石市/配水場： \n \n https://www.city.akashi.lg.jp/suidou/s_jousui_ka/haisuijyou.html#:~:text=%E6%B5%84%E6%B0%B4%E5%A0%B4%E3%81%A7%E9%80%A0%E3%81%A3%E3%81%9F,%E3%83%9D%E3%83%B3%E3%83%97%E5%9C%A7%E9%80%81%E6%96%B9%E5%BC%8F%E3%81%8C%E3%81%82%E3%82%8A%E3%81%BE%E3%81%99%E3%80%82\n \n

\n確かに，自然流下方式は高い地域に設置される場合が多いが地図上から自然流下方式かポンプ圧送方式かを見分けることは難しいので今回の目的である眺望の優れたポイントの指標にはならないと感じた．\n

\n\n

\n \n 結果2:
眺望が良い場所と配水場の関係は一部の場合では成立する．\n \n

眺望の優れた場所と城跡の関係

\nGoogleMapから取得した眺望ポイントのデータを分析している際に気づいたもう一つの特徴が城跡を由来とする地名，施設名の多さだ．\n公園名に城址が含まれる「八王子城跡公園」や，駅の名前に含まれる「平山城址」など遺跡を由来とする施設名は多くある．城は敵の動きを遠くから察知するために見通しの良い場所に建てられるので，眺望が良い場所と関連があるのではないかと予想した．

ここで新たに仮説を立てた．\n

\n\n

\n \n 仮説3:
眺望が良い場所は城址のある場所の周囲に集中する．\n \n

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1341,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1752,"value":"\n\n","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1632,"value":"

\n GoogleMap 城址・城跡： \n \n https://www.google.com/maps/search/%E5%9F%8E%E5%9D%80/@35.563263,138.4031678,232043m/data=!3m2!1e3!4b1?entry=ttu&g_ep=EgoyMDI1MDEyOS4xIKXMDSoASAFQAw%3D%3D\n \n

\n 基盤地図情報ダウンロードサービス　数値標高モデル： \n \n https://fgd.gsi.go.jp/download/menu.php\n \n

\n \n 結果3:
眺望が良い場所は城址のある場所の周囲に集中する．\n \n

\n\n

\n可視化の結果，かなり分布の特徴が似ていると感じた．特にDEMレイヤーと比較してみるとかなり色の濃淡が顕著に変化している部分=標高が顕著に変化している部分にプロットされていることがわかる．\n

\n\n

\n結果1-1で導いた\"周囲の平野部よりも独立して標高が高くなっている地域・急激に標高が変化している場所\"に城址の分布も集中している．\n

結果

\n ここまでの分析結果をもとに眺望が良い場所を探すメソッドを整理してみる．\n

\n \n\n

\n
川の流れる方向から地形の傾斜を把握する
\n
城跡の場所を検索し，周囲から独立して高い地域を見つける
\n
絞り込んだ地域から配水場を検索しその地域内で最も高い地点をさらに絞り込む
\n
その配水場周辺の公園を探す
\n

\n \n \n

おわりに

\n 個人的な予測として最初の仮説にあるように街の名前と眺望が良い場所はかなり関係があると予想していたが，実際にプロットを行うとあまり被っていないのが意外であった．\n 趣味で行なっていた散歩の経験をもとにこの企画を計画したがデータとしてみてみると新たに特徴的なパターンがあり興味深かった．
\n \n

\n \n \n GoogleMap眺望ポイント\n \n

データ処理

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":166,"value":"import { view } from \"@neocartocnrs/geoverview\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"import { addTooltips } from \"@mkfreeman/plot-tooltip\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1674,"value":"CSS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1609,"value":"$39","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":738,"value":"東京地形図","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":725,"value":"getColoredGeoJson = (geojsonData, threshold, colorFunction) => {\n return {\n ...geojsonData,\n features: geojsonData.features\n .filter((d) => d.properties[\"kyokai_with_elevation_標高\"] >= threshold)\n .map((d) => ({\n ...d,\n properties: {\n ...d.properties,\n fillColor: colorFunction(d.properties[\"kyokai_with_elevation_標高\"])\n }\n }))\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":729,"value":"getElevationColor = (elevation) => {\n if (elevation < 10) return \"#f7fcf0\"; // 青に近い白\n if (elevation < 20) return \"#ccece6\"; // 明るい青\n if (elevation < 40) return \"#99d8c9\"; // 水色\n if (elevation < 60) return \"#66c2a4\"; // 緑がかった青\n if (elevation < 80) return \"#2ca25f\"; // 緑\n if (elevation < 100) return \"#006d2c\"; // 暗い緑\n if (elevation < 150) return \"#fee08b\"; // 明るい黄色\n if (elevation < 200) return \"#fdae61\"; // 橙\n if (elevation < 300) return \"#f46d43\"; // 赤に近い橙\n return \"#d73027\"; // 赤\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":743,"value":"東京眺望ポイントCSV","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":745,"value":"maplibregl = require(\"maplibre-gl\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":748,"value":"geojsonData = (await FileAttachment(\"ddddd.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":751,"value":"choubougeojsonData = (\n await FileAttachment(\"choubou_intersect_cleanup.geojson\")\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1114,"value":"choubougeo_full_jsonData = (\n await FileAttachment(\"Choubou_point_data@2.geojson\")\n).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":754,"value":"targetKeywords = [\"山\", \"丘\", \"台\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":757,"value":"searchPattern = targetKeywords.join(\"|\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"getFilteredGeoJson = (name) => {\n return {\n ...geojsonData,\n features: geojsonData.features.filter((d) =>\n new RegExp(name).test(d.properties.S_NAME)\n )\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":763,"value":"filteredGeojsonData = getFilteredGeoJson(searchPattern)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":767,"value":"matchedSNames = filteredGeojsonData.features.map((f) => f.properties.S_NAME)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1061,"value":"viewshedjsonData = (await FileAttachment(\"tokyo_tower_reduce.geojson\")).json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1594,"value":"sleep = (ms) => new Promise((resolve) => setTimeout(resolve, ms))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"円グラフ","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":919,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":923,"value":"chouboucsv = await FileAttachment(\"miharashi_place@1.csv\").csv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":925,"value":"genreCounts = d3.rollup(\n chouboucsv,\n (v) => v.length,\n (d) => {\n if (d[\"yama\"] === \"1\") return \"yama\";\n if (d[\"oka\"] === \"1\") return \"oka\";\n if (d[\"dai\"] === \"1\") return \"dai\";\n return \"その他\";\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":930,"value":"data = Array.from(genreCounts, ([name, value]) => ({ name, value }))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1344,"value":"城跡","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1348,"value":"shiroatoData = (await FileAttachment(\"shiroato_output_final_.geojson\")).json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1196,"value":"DEMの可視化","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1198,"value":"GeoTIFF = require(\"geotiff@2.0.7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"Nishitokyo_DEM_50MB = await FileAttachment(\n \"Nishitokyo_big_DEM.tif\"\n).arrayBuffer()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1202,"value":"tiff = await GeoTIFF.fromArrayBuffer(Nishitokyo_DEM_50MB)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1204,"value":"image = await tiff.getImage()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1206,"value":"width = image.getWidth()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1208,"value":"height = image.getHeight()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1210,"value":"bbox = image.getBoundingBox()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1212,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"dataUrl = canvas.toDataURL(\"image/png\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"配水場可視化","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1263,"value":"geojsonData_haisui = await FileAttachment(\"kyusui_haisui_photo.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1597,"value":"viewof opacity1 = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1600,"value":"viewof opacity = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":687,"value":"$3b","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"}],"files":"$W3c","stdlib":"1"}} 31:"$30:body"