31: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(); }32:[{"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}] 2f:{"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"},{"id":309,"value":"Legend(x, {\n title: \"Relative cost of living (Ha Noi = 100)\",\n tickFormat: \".0f\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":28,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"## Data\n","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":181,"value":"## Appendix\n\nColor scale, tooltip, legend, and mapping resources.","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":263,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":5,"value":"vietnam = FileAttachment(\"vn_simple.json\").json()","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"d3geo = require(\"d3-geo-projection\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}