32:Td9b,md` Thematic maps are specialized maps made to visualize a particular subject or theme about a geographic area. Thematic maps can portray physical, social, political, cultural, economic, sociological, or any other aspects of a city, state, region, nation, continent, or the entire globe.^{[[1](http://www.lib.washington.edu/maps/MapResources/thematic2.html "Thematic Maps Map Collection & Cartographic Information Services Unit. University Library, University of Washington.")]} These maps are designed to illustrate a particular subject, and can accomodatrea variety of phenomena appearing together, such as landforms, lines of transportation, settlements, and political boundaries.^{[[2.1](# "Norman Joseph William Thrower $2007$. Maps & Civilization: Cartography in Culture and Society. p.95.")]} While features such as coastlines, boundaries and places offer points of locational reference for the phenomenon being mapped,^{[[2.2](# "Norman Joseph William Thrower $2007$. Maps & Civilization: Cartography in Culture and Society. p.95.")]} it is important to acknowledge that the data being represented are abstrated, and their locational point of reference is typicaly an arbitrary choice. In this case, population is used to proportionally vary the size of a circle marker (a "[bubble](https://observablehq.com/@d3/bubble-map)"), and the bubble location is calculted at the center of the polygon it represents. A force method is apply to prevent overlapping bubbles. This kind of cartograms are popularly knowns as _Dorling cartogram_. You can find many such examples, like [Dorling Cartogram by Harry Stevens](https://observablehq.com/@harrystevens/dorling-cartogram), in Observable. `33:T157f,function drawMap( geo, { dataAccessor, // Provide data for each feature in the GeoJSON areaAccessor, // Provide values corresponding to the area of the bubble valueAccessor, // Provide value, based on which the shape is colored titleAccessor = (d) => {}, width = 640, height = 400, margin = 10, projection = d3.geoTransverseMercator().rotate([-80, 0, 0]), scale = d3.scaleQuantize, range = colorScheme[5], domain = [0, 1], nice = true, // Apply nice, if available maxRadius = 25, unknown = "#f4f4f4", // fill color for missing data stroke = "#fff", // stroke color for borders strokeWidth = 0.5, // stroke width for borders strokeOpacity, // stroke width for borders strokeLinecap = "round", // stroke line cap for borders strokeLinejoin = "round", // stroke line join for borders drawUnderlay = false, underlayFill = "#fff", underlayStroke = "#999", colorLegendTitle, tickFormat = ".2r", tickValues, legendWidth = 200, areaTickUnit, backgroundFill = "white", debug } = {} ) { let features = geo.features.slice(); features = features.map((f) => ({ ...f, geoCentroid: d3.geoCentroid(f) })); const D = features.map(dataAccessor); const S = D.map(areaAccessor); const V = D.map(valueAccessor); const T = D.map(titleAccessor); // Compute default domains. domain = domain == null ? d3.extent(V) : domain; // Construct scales let color = scale(domain, range); if (nice && typeof color.nice === "function") color.nice(); if (color.unknown && unknown !== undefined) color.unknown(unknown); const radiusDomain = [0, d3.max(S)]; const radius = d3.scaleSqrt().domain(radiusDomain).range([0, maxRadius]); projection = projection.scale === undefined ? projection() : projection; // Adding margin to chart // https://github.com/d3/d3-geo/blob/main/README.md#projection_fitSize projection.fitExtent( [ [margin, margin], [width - margin, height - margin] ], geo ); const path = d3.geoPath(projection); // Set intial positions for applying force features = features.map((f, i) => { const centroid = projection(f.geoCentroid); const [x, y] = centroid; const r = S[i] == null ? 0 : radius(S[i]); const dx = 15; const transitionRange = [ CSMath.inverseLerp(0, width, Math.max(0, x - dx)), CSMath.inverseLerp(0, width, Math.min(width, x + dx)) ]; return { ...f, centroid, x, y, radius: r, transitionRange }; }); features = applyForce(features, { width, height, debug }); // Set path interpolator features = features.map((f, i) => { const basePath = path(f); const interpolater = flubber.toCircle(basePath, f.x, f.y, f.radius); return { ...f, interpolater }; }); const svg = DOM.svg(width, height); d3.select(svg).style("background", backgroundFill); const plot = d3.select(svg).append("g").attr("class", "plot"); if (drawUnderlay) { plot .append("path") .datum(geo) .attr("class", "underlay") .attr("stroke", underlayStroke) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("fill", underlayFill) .attr("d", path); } const shapes = plot .selectAll(".boundary") .data(features) .join("path") .attr("class", "boundary") .attr("stroke", stroke) .attr("stroke-linecap", strokeLinecap) .attr("stroke-linejoin", strokeLinejoin) .attr("stroke-width", strokeWidth) .attr("stroke-opacity", strokeOpacity) .attr("fill", (d, i) => color(V[i])); shapes.append("title").text((d, i) => T[i]); // Add legends const legend = d3 .select(svg) .append("g") .attr("class", "legend") .attr("transform", `translate(${width - legendWidth - margin},${margin})`); const colorKey = Legend(color, { title: colorLegendTitle, tickFormat, tickValues, width: legendWidth }); const radiusKey = circleLegend({ scale: radius, marginTop: 0, marginBottom: 0, stroke: "#666", strokeWidth: 0.75, // tickFormat: radius.tickFormat(4, "s"), tickFormat: (d, i, g) => { const str = radius.tickFormat(4, "s")(d); return i === g.length - 1 && areaTickUnit ? `${str} ${areaTickUnit}` : str; }, tickFont: "10px sans-serif", tickStrokeWidth: 0.75, tickStroke: "#666" }); legend.append("g").node().appendChild(colorKey); legend .append("g") .attr("transform", `translate(${legendWidth / 4},70)`) .node() .appendChild(radiusKey); if (debug) { const debugCanvas = d3.select(svg).append("g").attr("class", "debug"); debugCanvas .selectAll(".centroid") .data(features) .join("circle") .attr("class", "centroid") .attr("r", 2) .attr("fill", "#f0f") .attr("cx", (d) => d.centroid[0]) .attr("cy", (d) => d.centroid[1]); } function draw(t = 0) { const T = eases.sineInOut(t); shapes.each(function (d, i) { const shape = d3.select(this); const { interpolater, transitionRange } = d; const shapeT = CSMath.clamp01(CSMath.inverseLerp(...transitionRange, T)); shape.attr("d", () => interpolater(eases.sineInOut(shapeT))); }); } return Object.assign(svg, { features, draw }); }34:Taf0,## References, Inspirations, and Credits - This work utilizes [Noah Veltman](https://github.com/veltman)’s excellent shape interpolation library, [Flubber](https://github.com/veltman/flubber). The implementation used here is heavily inspired by [KDO](https://observablehq.com/@karimdouieb)'s [Try to impeach this? Challenge accepted!](https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted) notebook. A similar and comparable implementation is [Ryan Shackleton](https://observablehq.com/@ryshackleton)'s [Flubber the US](https://observablehq.com/@ryshackleton/flubber-the-us). Also refer to Mike Bostock's [Hello, Flubber!](https://observablehq.com/@mbostock/hello-flubber), [Jo Wood](https://observablehq.com/@jwolondon)'s [Hello Polygon Morphing](https://observablehq.com/@jwolondon/morphing), as well as to [Neocarto](https://observablehq.com/@neocartocnrs)'s [Shape interpolations with flubber](https://observablehq.com/@neocartocnrs/shape-interpolations-with-flubber) and [Countries and population (flubber interpolation)](https://observablehq.com/@neocartocnrs/countries-and-population-flubber-interpolation). Also very nice is [Ryan Joshua Liwag](https://observablehq.com/@ryanliwag)'s [Philippines Population per Region (Flubber animation + force layout)](https://observablehq.com/@ryanliwag/philippines-population-per-region). - Alternative approaches to transitioning between geographic, geometric, and discreet visualizations can be achieved using D3.js. [Florian Ledermann](https://observablehq.com/@floledermann) offers a two-part^{([1](https://observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-1),
[2](https://observablehq.com/@floledermann/transitions-from-maps-to-diagrams-part-2))} discussion of transitions from maps to diagrams that is very informative. [Shinichiro Kuwahara]((https://observablehq.com/@shinichirokuwahara) also offers an [excellent implementation](https://observablehq.com/@shinichirokuwahara/transition-between-chicago-transportaion-map-and-diagram) of [@floledermann](https://observablehq.com/@floledermann)'s approach that extends the transformations to also show data as a grid cartogram. - The Nepal municipalities GeoJSON from [Official Spatial Data on Administrative Divisions](https://observablehq.com/@adb/nepal-official-spatial-data-on-administrative-divisions). 35:[] 30:{"title":"Access to Household Facilities Across Municipalities, Nepal, 2011","cells":[{"id":0,"value":"# Access to Household Facilities Across Municipalities, Nepal, 2011","pinned":false,"hidden":false,"mode":"md"},{"id":178,"value":"viewof facility = Inputs.radio(\n [\n \"Mobile Phone\",\n \"Internet\",\n \"Computer\",\n \"Telephone\",\n \"Refrigerator\",\n \"Motorcycle\",\n \"Cycle\",\n \"Motor\",\n \"Radio\",\n \"Television\",\n \"Cable Television\",\n ],\n { label: \"Facility\", value: \"Mobile Phone\" }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":68,"value":"graphic = drawMap(nepalMunicipalities, {\n dataAccessor: (f) => getMuncipalDataByName(f.properties.GaPa_NaPa),\n areaAccessor: (d) => d?.Total,\n valueAccessor: (d) => {\n if (d) {\n return d[facility] / d.Total;\n }\n },\n titleAccessor: (d, i) => {\n const name =\n d?.Municipality || nepalMunicipalities.features[i]?.properties?.GaPa_NaPa;\n\n if (d && d.Total && d[facility]) {\n const per = d[facility] / d.Total;\n return `${name}\n${formatNumber(d.Total)} households.\n${formatPercentage(per)} households have ${facility.toLocaleLowerCase()}.`;\n }\n\n return name;\n },\n colorLegendTitle: `Households having access`,\n tickFormat: \".0%\",\n areaTickUnit: \"total households\",\n\n debug\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":371,"value":"viewof view = Inputs.radio([\"Animated\", \"Bubble\", \"Choropleth\"], {\n label: \"View\",\n value: \"Animated\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"viewof t = {\n let el = md``;\n if (view === \"Choropleth\") {\n el.value = 0;\n return el;\n } else if (view === \"Bubble\") {\n el.value = 1;\n return el;\n } else {\n return Scrubber(\n d3.range(totalFrames).map((d, i, arr) => d / (arr.length - 1)),\n {\n format: formatPercentage,\n loop,\n loopDelay: 2000,\n alternate: true\n }\n );\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":322,"value":"viewof totalFrames = Inputs.radio([300, 240, 180, 120, 60], {label: \"Frames Rendered (slow ↔ fast)\", value: 300})","pinned":false,"hidden":false,"mode":"ojs"},{"id":757,"value":"viewof loop = Inputs.toggle({label: \"Loop\", value: true})","pinned":false,"hidden":false,"mode":"ojs"},{"id":298,"value":"viewof debug = Inputs.toggle({label: \"Debug\", value: false})","pinned":false,"hidden":false,"mode":"ojs"},{"id":334,"value":"graphic.draw(t)","pinned":false,"hidden":false,"mode":"ojs"},{"id":703,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":705,"value":"## Context & Discussion","pinned":false,"hidden":false,"mode":"md"},{"id":611,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":296,"value":"## Implementation","pinned":false,"hidden":false,"mode":"md"},{"id":499,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"function getMuncipalDataByName(name) {\n let result = byMuncipality.find((m) => m.Municipality?.startsWith(name));\n\n if (!result) {\n const altName = getAlternateName(name);\n result = byMuncipality.find((m) => m.Municipality?.startsWith(altName));\n }\n \n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":257,"value":"// Based on https://observablehq.com/@karimdouieb/try-to-impeach-this-challenge-accepted#applySimulation\nfunction applyForce(\n dataNodes,\n { width, height, nodePadding = .25, maxTries = 200, debug = false } = {}\n) {\n let nodes = dataNodes.slice();\n\n // prettier-ignore\n const simulation = d3.forceSimulation(nodes)\n .force(\"cx\", d3.forceX().x(d => width / 2).strength(0.02))\n .force(\"cy\", d3.forceY().y(d => height / 2).strength(0.02))\n .force(\"x\", d3.forceX().x(d => d.centroid ? d.centroid[0] : 0).strength(0.3))\n .force(\"y\", d3.forceY().y(d => d.centroid ? d.centroid[1] : 0).strength(0.3))\n .force(\"charge\", d3.forceManyBody().strength(-1))\n .force(\"collide\", d3.forceCollide().radius(d => d.radius + nodePadding).strength(1))\n .stop()\n\n let i = 0;\n while (simulation.alpha() > 0.01 && i < maxTries) {\n simulation.tick();\n i++;\n debug && console.log(`${Math.round((100 * i) / maxTries)}%`);\n }\n\n return simulation.nodes();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":141,"value":"function getAlternateName(name) {\n let result;\n for (const [k, v] of alternateMunicipalityNames) {\n if (v.startsWith(name)) {\n result = k;\n break;\n }\n }\n\n return result;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":237,"value":"formatPercentage = d3.format(\".2%\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":238,"value":"formatNumber = d3.format(\",\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":727,"value":"// To apply base styles when the notebook is downloaded/exported\nsubstratum({invalidation})","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"## Imports\n","pinned":false,"hidden":false,"mode":"md"},{"id":44,"value":"import { admin_municipalities as nepalMunicipalities } from \"@categorise/nepal-sources-of-geospatial-data-extended\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {getValueByPath} from \"@saneef/utils-object\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {byMuncipality, alternateMunicipalityNames} from \"@categorise/nepal-cbs-2011-census-household-facilities\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"import { featureFilter } from \"@categorise/utils-geo\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":199,"value":"import { schemeBlues as colorScheme } from \"@categorise/data-vis-style-guide\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":254,"value":"flubber = require(\"flubber@0.4.2/build/flubber.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":435,"value":"import {circleLegend} from \"@categorise/circle-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":412,"value":"import {Legend} from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"import {Scrubber} from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":581,"value":"import { CSMath } from \"@saneef/canvas-sketch-util\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":580,"value":"eases = require('https://bundle.run/eases@1.0.8')","pinned":false,"hidden":false,"mode":"ojs"},{"id":724,"value":"import {substratum} from \"@saneef/substratum\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":635,"value":"md`\n---\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":35,"value":"$34","pinned":false,"hidden":false,"mode":"md"}],"files":"$W35","stdlib":"1","titling":"auto"}