2b:null 2c:["$","title",null,{"children":"Tokyo Land Prices Map | Alastair Tse | Observable"}] 31:Tc93,map = { const stationFillColor = "#3030c0"; const stationStrokeColor = "#ffffff"; const svg = d3.create("svg").attr("viewBox", [0, 0, width, height]); const mapLayer = svg.append("g"); mapLayer .append("rect") .attr("x", 0) .attr("y", 0) .attr("width", width) .attr("height", height) .attr("fill", "white"); mapLayer.attr("transform", `scale(${scale}, ${scale})`); function drawWardsCities(offsetX, offsetY, strokeColor, i) { mapLayer .append("g") .append("path") .attr("fill", "none") .attr("stroke", strokeColor) .attr("stroke-width", 0.5) .attr("d", path(tokyoOutline)); } function drawArea(strokeColor, fillColor, feature) { const center = path.centroid(feature); let wardName = feature.properties.CITY_NAME; let areaName = feature.properties.S_NAME; let pricePerMeter = feature.properties.pricePerMeter; let area = propertiesByWardArea[wardName][areaName] || []; let properties = area.properties; let caption = `${wardName} ${areaName} (${properties.length})`; if (area.gain) { caption += `↑${area.gain}%`; } //let land = propertyForArea(wardName, areaName); // if (land) { // caption += `: //
Price: ¥${pricePerMeter}/m //
Size: ${land.size}m2 //
Build%: ${land.buildPercent}%/${land.floorPercent}% //
Station: ${land.station} (${land.stationDistance}m) //
Usage: ${land.usage}`; // } mapLayer .append("g") .append("path") .attr("fill", fillColor) .attr("stroke", strokeColor) .attr("stroke-width", 0.2) .attr("title", caption) .attr("d", path(feature)) .on("mouseover", hover); mapLayer .append("circle") .attr("fill", strokeColor) .attr("title", caption) .attr("cx", center[0]) .attr("cy", center[1]) .attr("r", 0.2); } const wardColor = d3.schemeTableau10[1]; const areaColor = "rgba(0, 0, 0, 0.3)"; drawWardsCities(0, 0, wardColor, 0); const colorRange = d3[colorSchemeName]; const random = d3.randomUniform(0.5, 1.0); const wardCities = Object.keys(tokyoAreasByWard); let i = 0; for (let ward of wardCities) { let featureCollection = tokyoAreasByWard[ward]; let features = featureCollection.features; //const areaFillColor = colorRange(parseFloat(i) / wardCities.length); for (let feature of features) { let areaFillColor = "none"; let colorFn = colorMethods[colorMethod]; if (colorFn) { areaFillColor = colorFn(feature); } drawArea(areaColor, areaFillColor, feature); } i += 1; } for (let station of tokyoStations) { const center = projection([station.Lng, station.Lat]); mapLayer .append("circle") .attr("fill", stationFillColor) .attr("stroke", stationStrokeColor) .attr("strokeWidth", 0.05) .attr("cx", center[0]) .attr("cy", center[1]) .attr("r", 1); } // Zooming. svg.call(zoomer); zoomer.on("zoom", zoomed); function zoomed(event) { const { transform } = event; mapLayer.attr("transform", transform); } // Mouse events return svg; }32:[{"id":"e92049a624042e3663367791c816f443a18b6d33b1c2b10f2e53acf9373c5aa1e3e335d84f6248b2b6ff2ac2b89a50c7c57857cd38776464f1a3527ca137d8fb","href":"https://static.observableusercontent.com/files/e92049a624042e3663367791c816f443a18b6d33b1c2b10f2e53acf9373c5aa1e3e335d84f6248b2b6ff2ac2b89a50c7c57857cd38776464f1a3527ca137d8fb","name":"tokyo-areas.geojson","type":"application/geo+json","lastModified":1677977454671.564,"size":33848180},{"id":"e72b902a1b3e8e0e24bf0195da5e395a3781d8e1604d0a2c46e12ce377cc3c9aee40109c3fc1e98ff6c73eb3e3cafff7aed9617fad39f5a0299fb3fd36116f25","href":"https://static.observableusercontent.com/files/e72b902a1b3e8e0e24bf0195da5e395a3781d8e1604d0a2c46e12ce377cc3c9aee40109c3fc1e98ff6c73eb3e3cafff7aed9617fad39f5a0299fb3fd36116f25","name":"tokyo-mainland.geojson","type":"application/geo+json","lastModified":1677977454671.564,"size":1709496},{"id":"ffd838b05f8640323b3ee3186063bb7e46f456739215d1018277f77615097f889d356367116fb804808292b2b9afab861de69aed5c57496f86304d7de6a8efde","href":"https://static.observableusercontent.com/files/ffd838b05f8640323b3ee3186063bb7e46f456739215d1018277f77615097f889d356367116fb804808292b2b9afab861de69aed5c57496f86304d7de6a8efde","name":"tokyo-stations.csv","type":"text/csv","lastModified":1678002643831.006,"size":998355},{"id":"f932855e247fd07a360fc6372869048bfdaffda9b73f3a5478af7b634c8a06f7314a6111ba03706a73875214dc66aa4d550dd1981ab82eb4fde4897b280a1139","href":"https://static.observableusercontent.com/files/f932855e247fd07a360fc6372869048bfdaffda9b73f3a5478af7b634c8a06f7314a6111ba03706a73875214dc66aa4d550dd1981ab82eb4fde4897b280a1139","name":"tokyo-stations@1.csv","type":"text/csv","lastModified":1678003377228.669,"size":774401}] 2f:{"id":"47e9f6e10e9ce0ea","slug":"tokyo-land-prices-map","title":"Tokyo Land Prices Map","thumbnail":"c42d4b7302a0927580876bad77552a3bcb083c37b0261324d97104c37c503245","access_level":"public","create_time":"$D2023-03-05T00:50:54.671Z","update_time":"$D2023-06-16T23:40:12.728Z","view_time":null,"first_public_time":"$D2023-03-05T00:50:54.671Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"c71b06cccf28890c","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":"starter_2024"},"version":1334,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null}],"members":[{"type":"individual","id":"58e7d28c7a5e95b2","login":"liquidx","name":"Alastair Tse","avatar_url":"https://avatars-next.observableusercontent.com/50ebb21e783a964a40d7ef76821dd8096335d3f4bda4bd455239823e4ca43ff5","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":{"id":"f43ef689b0bff731","slug":"tokyo-land","title":"Tokyo Land","owner":{"id":"c71b06cccf28890c","login":"liquidx","name":"Alastair Tse"}},"type":"notebook","body":{"title":"Tokyo Land Prices Map","cells":[{"id":0,"value":"# Tokyo Land Prices Map\n\nVisualization of residential land prices according to publicly available data from the [Tokyo Metropolitan Government](https://www.zaimu.metro.tokyo.lg.jp/kijunchi/chikakouji.html). Map data from gis.go.jp.\n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1151,"value":"Map is showing the % increase in land value over the last 10 years in different areas of Tokyo.\n\nNot all areas have data available.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":280,"value":"map.node()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1204,"value":"viewof colorMethod = Inputs.select([\"colorByGain\", \"colorByPrice\", \"colorByFloorPrice\"], { label: \"Color Method\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1323,"value":"- `colorByPrice` will color the map using the max price of sales in that area.\n- `colorByFloorPrice` will color the map using the price per floor area (Floor Ratio) in that area. This will normalize out high rise land prices being much higher than regular low rise zoned land.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":623,"value":"viewof colorSchemeName = {\n let colorSchemes = [\n \"interpolateSpectral\",\n \"interpolateTurbo\",\n \"interpolateViridis\",\n \"interpolateInferno\",\n \"interpolateMagma\",\n \"interpolatePlasma\",\n \"interpolateCividis\",\n \"interpolateWarm\",\n \"interpolateCool\",\n \"interpolateCubehelixDefault\",\n \"interpolateRainbow\",\n \"interpolateSinebow\",\n \"interpolateBrBG\",\n \"interpolatePRGn\",\n \"interpolatePiYG\",\n \"interpolatePuOr\",\n \"interpolateRdBu\",\n \"interpolateRdGy\",\n \"interpolateRdYlBu\",\n \"interpolateRdYlGn\"\n ];\n return Inputs.select(colorSchemes, {\n label: \"Color\",\n value: \"interpolateMagma\"\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":760,"value":"viewof maxColorValue = Inputs.range([0, 3_000_000], {\n label: \"Price (Max)\",\n step: 100_000,\n value: 2_000_000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1305,"value":"viewof maxPerFloorColor = Inputs.range([0, 5_000_000], {\n label: \"Per Floor Area (Max)\",\n step: 100_000,\n value: 1_500_000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":14,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":114,"value":"viewof height = Range([0, 1000], {value: 400, label: \"Height\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":62,"value":"viewof width = Range([0, 1000], {value: 600, label: \"Width\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":77,"value":"viewof scale = Range([0.5, 3.0], {\n value: 1,\n step: 0.01,\n label: \"Scale\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":569,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined"},{"id":1237,"value":"## Map Styling","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1210,"value":"colorMethods = ({\n colorByGain: colorByGain,\n colorByPrice: colorByPrice,\n colorByFloorPrice: colorByFloorPrice\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1197,"value":"colorByGain = (feature) => {\n const colorRange = d3[colorSchemeName];\n const wardName = feature.properties.CITY_NAME;\n const areaName = feature.properties.S_NAME;\n\n const areaProperties = propertiesByWardArea[wardName][areaName] || {};\n const properties = areaProperties.properties || [];\n const areaFillColor =\n areaProperties.gain > 0 ? colorRange(1 - areaProperties.gain / 40) : \"none\";\n return areaFillColor;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1216,"value":"colorByPrice = (feature) => {\n const colorRange = d3[colorSchemeName];\n const wardName = feature.properties.CITY_NAME;\n const areaName = feature.properties.S_NAME;\n const areaProperties = propertiesByWardArea[wardName][areaName] || {};\n\n // Fill color by price\n //const areaFillColor = price ? colorRange(opacityForPrice(price)) : \"none\";\n\n const properties = areaProperties.properties || [];\n if (properties.length < 1) {\n return \"none\";\n }\n const highestPrice = d3.max(properties.map((p) => p.pricePerMeter));\n if (!highestPrice) {\n return \"none;\";\n }\n let frac = parseFloat(highestPrice) / parseFloat(maxColorValue);\n return colorRange(1.0 - frac);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1286,"value":"colorByFloorPrice = (feature) => {\n const colorRange = d3[colorSchemeName];\n const wardName = feature.properties.CITY_NAME;\n const areaName = feature.properties.S_NAME;\n const areaProperties = propertiesByWardArea[wardName][areaName] || {};\n\n // Fill color by price\n //const areaFillColor = price ? colorRange(opacityForPrice(price)) : \"none\";\n\n const properties = areaProperties.properties || [];\n if (properties.length < 1) {\n return \"none\";\n }\n const highestPrice = d3.max(properties.map((p) => p.pricePerFloorArea));\n if (!highestPrice) {\n return \"none\";\n }\n let frac = parseFloat(highestPrice) / parseFloat(maxPerFloorColor);\n return colorRange(1.0 - frac);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1161,"value":"### Map Drawing Support","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":18,"value":"path = d3.geoPath(projection)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":17,"value":"projection = d3.geoMercator().fitSize([width, height], tokyoOutline)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":282,"value":"zoomer = d3.zoom().extent([\n [0, 0],\n [width, height]\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":549,"value":"tooltip = d3.select(\"body\")\n\t.append(\"div\")\n .attr('class', 'tooltip')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"hover = (event) => {\n let el = event.target;\n let title = el.getAttribute(\"title\");\n if (title) {\n tooltip\n .style(\"left\", event.pageX + width / 40 + \"px\")\n .style(\"top\", event.pageY + width / 40 + \"px\")\n .style(\"display\", \"block\")\n .html(`${title}`);\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":645,"value":"## Property Data ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":731,"value":"viewof maxFloorPercent = Inputs.range([0, 1000], {\n label: \"Floor (%) Max\",\n step: 50,\n value: 1000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":767,"value":"viewof maxSize = Inputs.range([0, 1000], {\n label: \"Max size (m2)\",\n step: 100,\n value: 1000\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":789,"value":"import { tokyoPropertyPrices, mlitSales } from \"@liquidx/tokyo-land-prices\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1107,"value":"import { normalizeAddress } from \"@liquidx/tokyo-land-prices\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1278,"value":"pricePerFloorArea = (p) => {\n return p.pricePerMeter / (p.floorAreaPercent / 100.0)\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1170,"value":"selectedProperties = tokyoPropertyPrices\n .map((p) => {\n // Add a new property for pricePerFloorArea\n p.pricePerFloorArea = pricePerFloorArea(p);\n return p;\n })\n .filter((p) => p.size <= maxSize)\n .filter((p) => p.floorAreaPercent <= maxFloorPercent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1117,"value":"propertiesByWardArea = {\n let byWard = {};\n for (let wardName of Object.keys(tokyoAreasByWard)) {\n let wardProperties = selectedProperties.filter((p) => p.ward == wardName);\n let areaProperties = {};\n for (let areaFeature of tokyoAreasByWard[wardName].features) {\n const areaName = areaFeature.properties.S_NAME;\n const areaNameNormalized = normalizeAddress(wardName + areaName);\n let properties = wardProperties.filter((p) =>\n p.address.startsWith(areaNameNormalized)\n );\n let meanGain = \"\";\n if (properties.length > 0) {\n meanGain = parseInt(d3.mean(properties.map((p) => p.gain)));\n }\n\n areaProperties[areaName] = {\n properties: properties,\n gain: meanGain\n };\n }\n byWard[wardName] = areaProperties;\n }\n return byWard;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1295,"value":"selectedProperties","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1293,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":1265,"value":"mlitSales","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1261,"value":"mlitAreas = {\n let wards = Object.keys(tokyoAreasByWard);\n let index = {};\n for (let ward of wards) {\n let sales = mlitSales.filter((s) => s[\"市区町村名\"] == ward);\n let uniqueAreas = new Set();\n sales.map((s) => s[\"地区名\"]).forEach((a) => uniqueAreas.add(a));\n let areas = {};\n for (let area of uniqueAreas) {\n areas[area] = sales.filter((s) => s[\"地区名\"] == area);\n }\n index[ward] = areas;\n }\n return index;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":858,"value":"### Debugging","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":820,"value":"testingAddresses = tokyoAreasByWard[\"世田谷区\"].features\n .filter((f) => f.properties.S_NAME.match(/.*/))\n .map((f) => normalizeAddress(f.properties.CITY_NAME + f.properties.S_NAME))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":527,"value":"## Map Data\n\nData for the area outlines comes from the [e-stat.go.jp](https://www.e-stat.go.jp/gis/statmap-search?page=1&type=2&aggregateUnitForBoundary=A&toukeiCode=00200521&toukeiYear=2020&serveyId=A002005212020&prefCode=13&coordsys=1&format=kml&datum=2000)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":433,"value":"tokyoAreas = FileAttachment(\"tokyo-areas.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":436,"value":"tokyoOutline = FileAttachment(\"tokyo-mainland.geojson\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":539,"value":"tokyoAreasByWard = {\n let tokyoWardsCities = tokyoOutline.features.map((f) => f.properties.ward_ja);\n let groups = {};\n for (let name of tokyoWardsCities) {\n groups[name] = {\n type: \"FeatureCollection\",\n features: tokyoAreas.features\n .filter((f) => f.properties.CITY_NAME == name)\n .filter((f) => f.properties.S_NAME.trim().length > 0)\n .filter((f) => !tokyoNonLandAreas.includes(f.properties.S_NAME))\n };\n }\n return groups;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":496,"value":"tokyoIslands = [\n \"\",\n \"小笠原村\",\n \"大島町\",\n \"神津島村\",\n \"青ヶ島村\",\n \"八丈町\",\n \"新島村\",\n \"御蔵島村\",\n \"三宅村\",\n \"利島村\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":594,"value":"tokyoNonLandAreas = [\n \"羽田沖水面及び中央防波堤外側付近\", // Oita\n \"‐\", // Minato\n \"多摩川河川敷（下流）\",\n \"水面調査区\" // Chuo\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":472,"value":"tokyoMainlandAreas = {\n let features = tokyoAreas.features\n .filter((f) => !tokyoIslands.includes(f.properties.CITY_NAME))\n .filter((f) => f.properties.S_NAME.trim().length > 0)\n .filter((f) => !tokyoNonLandAreas.includes(f.properties.S_NAME));\n return {\n type: \"FeatureCollection\",\n features: features\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":479,"value":"outliers = tokyoMainlandAreas.features.slice(5600)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":1182,"value":"tokyoStations = FileAttachment(\"tokyo-stations@1.csv\")\n .csv()\n .then((stations) =>\n stations.filter(\n (station) => !station.WithinTokyo || station.WithinTokyo != \"0\"\n )\n )","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":530,"value":"## Dependencies","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":118,"value":"import { Input, Range, Button, bind, html } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":12,"value":"d3 = require(\"d3-geo@1\", \"d3-selection\", \"d3-zoom\", \"d3-transition\", \"d3-color\", \"d3-scale-chromatic\", \"d3-random\", \"d3-array\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"