25:["$","title",null,{"children":"Tokyo JKK Residence and Railroad map using leaflet | kj9 | Observable"}] 49:T485,map = { const container = html`

`; yield container; const tileWhite = L.tileLayer( "https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png", { attribution: "© GSI" } ); const tileOsm = L.tileLayer( "https://tile.openstreetmap.org/{z}/{x}/{y}.png", { attribution: "© OpenStreetMap" } ); const viewpoint = [35.689655593827986, 139.70060999030161]; //新宿駅 const map = L.map(container, { layers: [tileWhite, tileOsm], scrollWheelZoom: false, maxZoom: 14, minZoom: 10 }).setView(viewpoint, 11); L.control .layers({ OpenStreetMap: tileOsm, WhiteMap: tileWhite }) .addTo(map); // mapping railroad L.geoJson(railroad, { style: function (geoJsonFeature) { const props = geoJsonFeature.properties; return { ...baseStyle, smoothFactor: 1 }; } }).addTo(map); // add station/residence as feature group for changing by input value stationFG.addTo(map); residenceFG.addTo(map); return map; }4a:[{"id":"797d7c57c9915d7d3cf2114f1a402d8d2e440ab61e91befe7b60cc7b52e59c720cfa0e1a052c5718079ce27515ec5ce08682ee4f7757ed562ed8e251f3449dcc","href":"https://static.observableusercontent.com/files/797d7c57c9915d7d3cf2114f1a402d8d2e440ab61e91befe7b60cc7b52e59c720cfa0e1a052c5718079ce27515ec5ce08682ee4f7757ed562ed8e251f3449dcc","name":"N05-21_Station2@4.geojson","type":"application/geo+json","lastModified":1672668340658.357,"size":8424318},{"id":"0f0a3b8a705f1ca3844e44431e8736be9534929889fbde1d1ed53a0233ca2bed2c29ca72bfc5f8b74e0c5c9df8011ff209f5255b8c42b6c53d4eb2c96511a91d","href":"https://static.observableusercontent.com/files/0f0a3b8a705f1ca3844e44431e8736be9534929889fbde1d1ed53a0233ca2bed2c29ca72bfc5f8b74e0c5c9df8011ff209f5255b8c42b6c53d4eb2c96511a91d","name":"N05-21_RailroadSection2@1.geojson","type":"application/geo+json","lastModified":1672827940150.11,"size":26549344}] 29:{"id":"fea4b2891a894da2","slug":null,"title":"Tokyo JKK Residence and Railroad map using leaflet","thumbnail":"e1800e3264fa742b2d5ca85b99957c6c1fb18d08eedb3c8bc858047c447c94bb","access_level":"public","create_time":"$D2023-01-01T15:21:04.806Z","update_time":"$D2023-03-11T11:25:39.873Z","view_time":null,"first_public_time":"$D2023-01-01T15:21:04.806Z","has_unpublished_edits":null,"fork":{"id":"21819201cf423c78","slug":"hello-leaflet","title":"Hello, Leaflet","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":2,"starred":false,"owner":{"type":"team","id":"9a1d7227cee687d6","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":1058,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71f807c27be719b8","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"71f807c27be719b8","login":"kj9","name":"kj9","avatar_url":"https://avatars-next.observableusercontent.com/d4d04a521026803172339d7d44e2d105118dc0d969d29f4b9999450f75599677","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Tokyo JKK Residence and Railroad map using leaflet","cells":[{"id":277,"value":"# Tokyo JKK Residence and Railroad map using leaflet","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":289,"value":"# Datasets\n\n3 datasets are used.\n\n2 are station/railload GeoJSON files from [MLIT of Japan](https://nlftp.mlit.go.jp/ksj/gml/datalist/KsjTmplt-N05-v2_0.html):\n- n0521_station\n- n0521_railroadsection\n\ndownload zip file from link and unzip. shapefile is also included in zip.\n\nLast one is JKK residence csv dataset scraped from web site and at github repository [here]().","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":201,"value":"n0521_station24 = FileAttachment(\"N05-21_Station2@4.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":307,"value":"n0521_railroadsection2 = FileAttachment(\"N05-21_RailroadSection2@1.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":363,"value":"function condition(x) {\n const props = x.properties;\n return props.N05_005e == \"9999\" // select current stations\n && props.N05_001 != \"1\" // exclude shinkansen\n && (\n props.N05_003.includes(\"東日本旅客鉄道\") || !props.N05_003.includes(\"旅客鉄道\") \n )\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":959,"value":"station = n0521_station24.features.filter(condition);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1009,"value":"railroad = n0521_railroadsection2.features.filter(condition)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":203,"value":"db = {\n const client = await DuckDBClient.of({\n station: station,\n railroad: railroad\n });\n\n client.query(`\nCREATE TABLE residence AS\nselect * from 'https://raw.githubusercontent.com/kj-9/jkk-py/get_residence/flow/get_residence/residence.csv'\nwhere lat is not null`);\n return client;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":654,"value":"select * from residence","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"residence","database":"var:db"},{"id":294,"value":"# Plot map\n\n- 白地図: https://maps.gsi.go.jp/development/ichiran.html#pale","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":751,"value":"viewof residenceCond = Inputs.form({\n rent_upper: Inputs.range([0, 200000], {\n label: \"家賃上限\",\n step: 5000,\n value: 120000\n }),\n rent_lower: Inputs.range([0, 200000], {\n label: \"家賃下限\",\n step: 5000,\n value: 70000\n }),\n year_upper: Inputs.range([0, 100], { label: \"築年上限\", step: 1 }),\n residenceMarked: Inputs.textarea({\n label: \"注目物件\",\n placeholder: \"Enter comma separated list to mark\"\n })\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":980,"value":"viewof stationMarked = Inputs.text({\n label: \"注目駅\",\n placeholder: \"Enter comma separated list to mark\"\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":214,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":744,"value":"select * from residence\nwhere rent_from <= ${residenceCond.rent_upper}\n AND rent_to >= ${residenceCond.rent_lower}\n AND (2023 - built_year) <= ${residenceCond.year_upper} ","pinned":false,"hidden":false,"mode":"sql","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"redicenceFiltered","database":"var:residence"},{"id":5,"value":"// import leaflet\nL = {\n const L = await require(\"leaflet@1/dist/leaflet.js\");\n if (!L._style) {\n const href = await require.resolve(\"leaflet@1/dist/leaflet.css\");\n document.head.appendChild(\n (L._style = html``)\n );\n }\n return L;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":965,"value":" baseStyle = ({\n color: d3.schemeSet3[10], // pale green\n weight: 1\n });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":949,"value":"stationFG = L.featureGroup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":955,"value":"//mapping station\n_stationLayer = {\n stationFG.clearLayers();\n\n const stationRgx = new RegExp(\n stationMarked\n .split(\",\")\n .map((x) => `^${x}$`)\n .join(\"|\")\n );\n\n const g = L.geoJson(station, {\n pointToLayer: (geoJsonPoint, latlng) => {\n const props = geoJsonPoint.properties;\n\n let opts = {\n ...baseStyle,\n radius: 4,\n fillOpacity: 0.5\n };\n\n if (stationRgx.test(props.N05_011)) {\n opts = {\n ...opts,\n radius: 8,\n fillColor: d3.schemeSet3[3], //orange\n fillOpacity: 1\n };\n }\n\n return L.circleMarker(latlng, opts).bindPopup(\n html`

${props.N05_011}

${props.N05_003}: ${props.N05_002}

`\n );\n }\n });\n return stationFG.addLayer(g);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":915,"value":"residenceFG = L.featureGroup()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"// mapping residence\n_redicenceLayer = {\n residenceFG.clearLayers();\n\n const residenceRgx = new RegExp(\n residenceCond.residenceMarked\n .split(\",\")\n .map((x) => `^${x}$`)\n .join(\"|\")\n );\n\n redicenceFiltered.forEach((x) => {\n const m = L.marker([x.lat, x.lng], {\n opacity: residenceRgx.test(x.name) ? 1 : 0.4\n }).bindPopup(\n html`\n

${x.name}

家賃: ${x.rent_raw}

管理費: ${x.management_fee_raw}

間取り: ${x.layouts}

築年数: ${2023 - x.built_year}

${x.access}

${x.address}

\n詳細\n`\n );\n residenceFG.addLayer(m);\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":802,"value":"## Appendix\n\n- https://japonyol.net/rosenzu.html","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1055,"value":"console.log(JSON.stringify(residence))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 24:null