2d:null 2e:["$","title",null,{"children":"Countries with ISO 3166-2 Data | Peter Beshai | Observable"}] 33:T64e,{ const container = html`

Hover to see details.

`; const indicator = d3.select(mapContainer.querySelector('circle')); d3.select(map) .on('mousemove', evt => { const [mx, my] = d3.pointer(evt); const closest = d3.least(activeData, d => { const projected = projection([d.geo.lng, d.geo.lat]); const [x, y] = zoomTransform.apply(projected); return Math.hypot(mx - x, my - y); }); if (!closest) { container.innerHTML = '
Hover to see details.'; indicator.style('opacity', 0); return; } const formatter = d3.format(','); const [cx, cy] = zoomTransform.apply( projection([closest.geo.lng, closest.geo.lat]) ); indicator .attr('cx', cx) .attr('cy', cy) .attr('r', rScale(closest.value) + 4) .style('stroke-width', '2px') .style('stroke', '#0bb') .style('fill', 'none') .style('opacity', 1); if ( closest.parentGeo && (!closest.geo || closest.parentGeo.code !== closest.geo.code) ) { container.innerHTML = `${closest.geo.name}, ${ closest.parentGeo.name } [${closest.code}]
${formatter(closest.value)}`; } else { container.innerHTML = `${closest.geo.name} [${ closest.code }]
${formatter(closest.value)}`; } }) .on('mouseleave', evt => { container.innerHTML = '
Hover to see details.'; indicator.style('opacity', 0); }); return container; }34:T9c3,{ // separate from the creation of the canvas so zoom state can persist when radius changes const context = map.getContext('2d'); const path = d3.geoPath(projection, context); const zoomHandlerInner = d3 .zoom() .scaleExtent([0.0625, 32]) .on("zoom", ({ transform }) => { mutable zoomTransform = transform; }) .on('start', () => { d3.select(mapContainer.querySelector('circle')).style('display', 'none'); }) .on('end', () => { d3.select(mapContainer.querySelector('circle')).style('display', ''); }); d3.select(map).call(zoomHandlerInner); draw(zoomTransform); function draw(zoomTransform) { context.save(); context.clearRect(0, 0, width, height); // apply zoom transform context.translate(zoomTransform.x, zoomTransform.y); context.scale(zoomTransform.k, zoomTransform.k); context.lineWidth = 1 / zoomTransform.k; // draw the map bg context.beginPath(); path(outline); context.clip(); context.fillStyle = '#fff'; context.fillRect(0, 0, width, height); // draw the grid context.beginPath(); path(graticule); context.strokeStyle = '#f6f6f6'; context.stroke(); // fill in the land context.beginPath(); path(land); context.fillStyle = '#fafafa'; context.fill(); context.strokeStyle = '#ddd'; context.lineWidth = 0.5 / zoomTransform.k; context.stroke(); // stroke out the country regions context.beginPath(); path(countries); context.strokeStyle = '#ddd'; context.lineWidth = 0.5 / zoomTransform.k; context.stroke(); // put a stroke around the whole shebang context.beginPath(); path(outline); context.strokeStyle = '#aaa'; context.stroke(); // draw in the data const points = activeData.map(d => [d.geo.lng, d.geo.lat]); for (const d of activeData) { if (!d.geo) continue; let [x, y] = projection([d.geo.lng, d.geo.lat]); const pointRadius = rScale(d.value) / zoomTransform.k; const fill = colorScale(d.value); context.globalAlpha = 0.5; context.beginPath(); context.arc(x, y, pointRadius, 0, 2 * Math.PI); context.fillStyle = fill; context.fill(); context.strokeStyle = darker(fill); context.lineWidth = 1 / zoomTransform.k; context.stroke(); context.globalAlpha = 1; } context.restore(); } return md`Drawing and Zoom setup, separate from Canvas creation for persistence`; }35:[{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1619204182373.235,"size":756420},{"id":"7c5f6afa168b57d3c5d3ea57ebe31a663bcaeb083464828f7b52807da5cd3e8b8c4e46461a4e9d04f2eaa9c4aa6758dc87c3a92608f928e004aad037c4ead6c7","href":"https://static.observableusercontent.com/files/7c5f6afa168b57d3c5d3ea57ebe31a663bcaeb083464828f7b52807da5cd3e8b8c4e46461a4e9d04f2eaa9c4aa6758dc87c3a92608f928e004aad037c4ead6c7","name":"3166-2-sample@1.csv","type":"text/csv","lastModified":1619208321436.271,"size":12881},{"id":"8fc55e3185816531c6959ff127bbfc04cbee12cb144cba60ed29f282eb685db8348a5a8c5931867bc70c2de3219a98215dd315f01911ac75bc56863fb29a0b6f","href":"https://static.observableusercontent.com/files/8fc55e3185816531c6959ff127bbfc04cbee12cb144cba60ed29f282eb685db8348a5a8c5931867bc70c2de3219a98215dd315f01911ac75bc56863fb29a0b6f","name":"iso_3166_2.json","type":"application/json","lastModified":1619204914990.647,"size":581834},{"id":"6d4c60fd97e9140052bee07cc28194ed6094f25dcb037ad63803e0613752b2f00c86fe61fefaf5e3bc024e7689ceebb9bbc4ae869ac517a80b4420fc75184eb3","href":"https://static.observableusercontent.com/files/6d4c60fd97e9140052bee07cc28194ed6094f25dcb037ad63803e0613752b2f00c86fe61fefaf5e3bc024e7689ceebb9bbc4ae869ac517a80b4420fc75184eb3","name":"3166-2-sample@2.csv","type":"text/csv","lastModified":1619208896812.087,"size":12637}] 31:{"id":"0089f6899f3e0be6","slug":"countries-with-iso-3166-2-data","title":"Countries with ISO 3166-2 Data","thumbnail":"f888c6ab1fe27e8c991392e05bd789f8816e16d5af17b6b1a7a920378a5af4b7","access_level":"public","create_time":"$D2021-04-23T18:55:27.734Z","update_time":"$D2021-04-23T21:29:37.266Z","view_time":null,"first_public_time":"$D2021-04-23T19:51:23.033Z","has_unpublished_edits":null,"fork":false,"stars":3,"starred":false,"owner":{"type":"team","id":"6acf8922a00de1ff","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":"starter_2024"},"version":338,"publish_version":338,"role":null,"authored":false,"authors":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null}],"members":[{"type":"individual","id":"26ab57b8a43a5dda","login":"pbeshai","name":"Peter Beshai","avatar_url":"https://avatars-next.observableusercontent.com/db43a100f98fe00872d57f02fe3deb1fe4d5305239db9310ba983a9c7d6efb65","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Countries with ISO 3166-2 Data","cells":[{"id":0,"value":"md`# Countries with ISO 3166-2 Data\n\nProvide a CSV file with ISO 3166-2 subdivision in the first column and a numeric value in the second. Uses random sample data to begin with.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"viewof csvFile = fileInput({\n initialValue: FileAttachment(\"3166-2-sample@2.csv\").blob(),\n accept: \".csv\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"viewof radiusMin = Range([0, 10], { value: 1, label: \"Min Radius\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":158,"value":"viewof radiusMax = Range([0, 100], { value: 15, label: \"Max Radius\" })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":160,"value":"viewof dataType = Radio([\"Subdivisions\", \"Countries\"], {\n label: \"Data granularity\",\n value: \"Subdivisions\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":270,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"mapContainer = {\n const context = DOM.context2d(width, height);\n\n const container = html`

`;\n container.appendChild(context.canvas);\n container.appendChild(\n html``\n );\n return container;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":213,"value":"md`Try a different projection, if you like`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":211,"value":"viewof projection = projectionInput({\n value:\n new URLSearchParams(location.search).get(\"projection\") || \"Natural Earth\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"md`---\n## Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":260,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":223,"value":"mutable zoomTransform = d3.zoomIdentity","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":303,"value":"map = mapContainer.querySelector('canvas')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"valueExtent = d3.extent(activeData, d => d.value)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"rScale = d3\n .scaleSqrt()\n .domain(valueExtent)\n .range([radiusMin, radiusMax])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":123,"value":"colorScale = d3.scaleSequential(d3.interpolatePlasma).domain(valueExtent)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":131,"value":"darker = color => {\n const lab = d3.lab(color);\n lab.l *= 0.8;\n return lab.toString();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"activeData = dataType === 'Subdivisions'\n ? data.filter(d => !!d.geo)\n : dataByParent.filter(d => !!d.geo)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"csvData = {\n const rawRows = d3.csvParse(await Files.text(csvFile));\n const [subdivisionKey, valueKey] = rawRows.columns;\n\n return rawRows.map(row => ({\n code: row[subdivisionKey],\n value: +row[valueKey]\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"data = tidy(\n csvData,\n mutate({\n geo: d => isoCodes[d.code],\n parentCode: d => d.code.split('-')[0],\n parentGeo: d => isoCodes[d.parentCode]\n }),\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":73,"value":"dataByParent = tidy(\n data,\n groupBy(\n ['parentCode'],\n [\n summarize({\n value: sum('value'),\n code: last('parentCode'),\n geo: last('parentGeo')\n })\n ]\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":61,"value":"import { tidy, mutate, groupBy, summarize, sum, last } from '@pbeshai/tidyjs'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"isoCodes = FileAttachment(\"iso_3166_2.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"d3 = require(\"d3-geo@2\", \"d3-geo-projection@3\", \"d3-dsv\", \"d3-scale\", \"d3-array\", \"d3-scale-chromatic\", \"d3-color\", \"d3-zoom\", \"d3-selection\", \"d3-format\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"world = FileAttachment(\"countries-50m.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"land = topojson.feature(world, world.objects.land)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":14,"value":"countries = topojson.feature(world, world.objects.countries)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"graticule = d3.geoGraticule10()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"outline = ({ type: \"Sphere\" })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"projxection = d3.geoMercator()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":21,"value":"height = {\n const [[x0, y0], [x1, y1]] = d3\n .geoPath(projection.fitWidth(width, outline))\n .bounds(outline);\n const dy = Math.ceil(y1 - y0),\n l = Math.min(Math.ceil(x1 - x0), dy);\n projection.scale((projection.scale() * (l - 1)) / l).precision(0.2);\n return dy;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":150,"value":"import {\n Button,\n Checkbox,\n Toggle,\n Radio,\n Range,\n Select,\n Text,\n Textarea,\n Search,\n Table\n} from \"@observablehq/inputs\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":190,"value":"import { fileInput } from \"@mbostock/file-input-with-initial-value\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":199,"value":"import { projectionInput } from \"@d3/projection-comparison\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"