2c:null 2d:["$","title",null,{"children":"Vietnam Spatial Cost of Living 2020 | Quỳnh Vương | Observable"}] 32:T455,chart = { // Prepare map features and projection. const provinces = topojson.feature(vietnam, vietnam.objects.vn_iso_province), projection = d3geo.geoMiller().fitSize([width, width], provinces) //Draw map. const svg = d3.create("svg") .attr("viewBox", [0, 0, width, width]) const tooltip = new Tooltip() svg.append("g") .selectAll("path") .data(provinces.features) .join("path") .attr("fill", d => x(col.get(d.properties.ISO3166_2_CODE))) .attr("stroke-width", 0.3) .attr("stroke", "white") .attr("d", d3.geoPath(projection)) .attr("cursor", "pointer") .attr("pointer-events", "all") .on("mousemove", function(e, d) { const pointer = d3.pointer(e, svg.node()) tooltip.show(pointer, d) d3.select(this).attr("stroke-width", 1.5) .attr("stroke", "#444") .raise() }) .on("mouseout", function() { tooltip.hide() d3.select(this).attr("stroke-width", 0.3) .attr("stroke", "white") }) svg.append(() => tooltip.node) return svg.node(); }33:[{"id":"ad54caddd5b1ba106b12bc009e07cb1b0a424ad426845273f5ecff35b377df312c43221a04a7bc5a26b3efa57e53926d4dca3b353cf4588f051ab59d1ff626f7","href":"https://static.observableusercontent.com/files/ad54caddd5b1ba106b12bc009e07cb1b0a424ad426845273f5ecff35b377df312c43221a04a7bc5a26b3efa57e53926d4dca3b353cf4588f051ab59d1ff626f7","name":"vn_simple.json","type":"application/json","lastModified":1649698757952.888,"size":357841},{"id":"7c43f8fbefee7382f8bacd09c42061b6f68bebb48a4e8c2b185bc9b5ae93ecb2cbecdc2c57f5b8a151e315d1798b1fa89156ca9218136b6bab49499a8e2d46c9","href":"https://static.observableusercontent.com/files/7c43f8fbefee7382f8bacd09c42061b6f68bebb48a4e8c2b185bc9b5ae93ecb2cbecdc2c57f5b8a151e315d1798b1fa89156ca9218136b6bab49499a8e2d46c9","name":"spatial_col.csv","type":"text/csv","lastModified":1649855861012.246,"size":2221}] 30:{"id":"8062d3d420487748","slug":"vietnam-spatial-cost-of-living-2020","title":"Vietnam Spatial Cost of Living 2020","thumbnail":"4d1ecd46a735f9a1dc04eface6c34d88c5b2bb0ca8e3df72430f22b9d88e2594","access_level":"public","create_time":"$D2022-04-11T17:39:17.952Z","update_time":"$D2022-04-13T19:03:24.564Z","view_time":null,"first_public_time":"$D2022-04-13T19:03:53.647Z","has_unpublished_edits":null,"fork":{"id":"77cf7940b11a6469","slug":"vietnam-map","title":"Vietnam Map","owner":{"id":"06730b0557f9ca07","login":"quynhvng","name":"Quỳnh Vương"}},"stars":0,"starred":false,"owner":{"type":"team","id":"06730b0557f9ca07","login":"quynhvng","name":"Quỳnh Vương","avatar_url":"https://avatars-next.observableusercontent.com/b92f7b699c5c830746d4415951c3cad4a737247792511e06d0409a631c781700","tier":"starter_2024","bio":"One step at a time."},"version":411,"publish_version":411,"role":null,"authored":false,"authors":[{"type":"individual","id":"3bb70ca92ada92ec","login":"quynhvng","name":"Quỳnh Vương","avatar_url":"https://avatars-next.observableusercontent.com/b92f7b699c5c830746d4415951c3cad4a737247792511e06d0409a631c781700","tier":null,"bio":"One step at a time."}],"members":[{"type":"individual","id":"3bb70ca92ada92ec","login":"quynhvng","name":"Quỳnh Vương","avatar_url":"https://avatars-next.observableusercontent.com/b92f7b699c5c830746d4415951c3cad4a737247792511e06d0409a631c781700","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Vietnam Spatial Cost of Living 2020","cells":[{"id":0,"value":"# Vietnam Spatial Cost of Living 2020\n\nCost of living by province, Vietnam 2020. Data: [General Statistics Office of Vietnam](https://www.gso.gov.vn/en/prices/). Hover to see tooltip.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":309,"value":"Legend(x, {\n title: \"Relative cost of living (Ha Noi = 100)\",\n tickFormat: \".0f\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"## Data\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":233,"value":"col = new Map(d3.map(await FileAttachment(\"spatial_col.csv\").csv({typed: true}), d => [d.ISO3166_2_CODE, d[\"2020_cpi\"]]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":181,"value":"## Appendix\n\nColor scale, tooltip, legend, and mapping resources.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":219,"value":"x = d3.scaleQuantize()\n .domain(d3.extent(Array.from(col), d => d[1]))\n .range(d3.schemeOrRd[5])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"// Based on Observable d3 interaction tutorial.\nclass Tooltip {\n constructor() {\n this._name = htl.svg``;\n this._col = htl.svg``;\n this.node = htl.svg`\n \n ${this._name}\n ${this._col}\n (Ha Noi=100)\n`;\n }\n show(pos, d) {\n this.node.removeAttribute(\"display\");\n this.node.setAttribute(\"transform\", `translate(${pos[0]},${pos[1]})`);\n this._name.textContent = d.properties.Name_EN;\n this._col.textContent = `Relative COL: ${col.get(d.properties.ISO3166_2_CODE)}`;\n }\n hide() {\n this.node.setAttribute(\"display\", \"none\");\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":263,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"vietnam = FileAttachment(\"vn_simple.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"d3geo = require(\"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"