31:T4f9,md`# Reusable U.S. Choropleth Map I found myself making this type of map with D3JS fairly frequently so it seemed like a good idea to make it reusable. Why not just use an existing charting library such as [Vega/VegaLite](https://observablehq.com/@uwdata/introduction-to-vega-lite)? I wanted to maintain access to the implementation / internals so that I can customize just about anything I see fit, or fork the implementation to create a variation if needed. My day to day work often requires implementing design polish and high levels of customization in data viz and UI, so this made it seem worth the work. I'll probably prove myself wrong later 😝 Rather than making the map reusable via Observable's \`import { x } with { y }\` syntax, I instead decided on making it a function. This allows for more easily having multiple instances of the map in the same notebook. This can be quite helpful when there is a requirement for showing different views of the data a la ["small multiples"](https://observablehq.com/@stephanietuerk/radar-chart-small-multiples) (h/t [@ZanArmstrong](https://observablehq.com/@zanarmstrong) for introducing me to that technique). _Suggestions are of course welcome though I'd like to keep the implementation as "simple" as possible :)_ `32:T847,usage = md`## Usage: First import the map rendering function: ~~~js import { drawChoroplethMap } from "@clhenrick/reusable-choropleth-map" ~~~ Then in another cell: ~~~js map = drawChoroplethMap(\) ~~~ When invoking \`drawChoroplethMap\`, you may pass the following options in an object: | property | default | description | | --- | --- | --- | | adminLevel | "counties" | What administrative level of data to show. Either "counties" or "states". | | accessor | \`d => d.value\` | a function to be used to access each datum's value used by the colorScale | | backgroundColor | "#fff" | background color of the graphic excluding the map area | | borderColorStates | "#fff" | color of the state boundaries | | borderColorCounties | "#e2e2e2" | color of the county boundaries | | borderEnabled | true | whether or not a rectangular border is drawn around the map | | colorScale | _see code_ | d3-scale used to set the polygon fill color | | colorNoData | "#e2e2ee2" | color to use for no data / null values | | data | empty array | An array of objects. Each object must have an "id" property which corresponds to its corresponding FIPS code. Typically a "value" property is used to store the value of the datum that will be used by the map's \`color\` scale | | height | width * 3 / 5 | the height of the map | | name | DOM.uid().id | a string that will scope the map's CSS. Should not contain spaces. | | tooltipContents | | a function that will be used to set the contents of the tooltip. Accepts a datum from the dataset as a single argument. Should return a string. | | width | width | the width of the map, defaults to Observable's built in \`width\` variable. | zoomEnabled | true | whether or not zooming and panning is enabled |
Optionally, the map may be made a \`viewof\` cell: ~~~js viewof map = drawChoroplethMap(options) ~~~ Then, other notebook cells may reference the value of \`map\`: ~~~md md\`The selected value is: \$\{map.selected.value\} and the hovered value is \$\{map.hovered.value\}\` ~~~ See below for examples and implementation details.
`33:T180b,drawChoroplethMap = (options = {}) => { const adminLevel = allowedAdminLevels.has(options.adminLevel) ? options.adminLevel : "counties"; const data = options.data || []; const accessor = options.accessor || function (d) { return d.value; }; const colorScale = options.colorScale || defaultColorScale; const colorNoData = options.colorNoData || "#e2e2e2"; const name = options.name ? options.name.replace(/,/gi, "").replace(/ /gi, "") : DOM.uid().id; const cssScoped = `map-${name}-${adminLevel}-container`; const tooltipContents = options.tooltipContents; const width = options.width || mapConfig.width; const height = options.height || Math.floor((width * 3) / 5); const zoomEnabled = options.zoomEnabled !== false ? true : false; const borderEnabled = options.borderEnabled !== false ? true : false; const borderColorStates = options.borderColorStates || "#fff"; const borderColorCounties = options.borderColorCounties || "#e2e2e2"; const backgroundColor = options.backgroundColor || "#fff"; // for making the map a "viewof" cell const initialState = { selected: {}, hovered: {} }; const geoData = adminLevel === "counties" ? countiesGeoByFips : statesGeoByFips; const zoom = d3.zoom().scaleExtent([1, 8]).on("zoom", zoomed); const container = html`

`; const svg = d3 .select(container) .append("svg") .attr("viewBox", `0 0 ${mapConfig.width} ${mapConfig.height}`); const g = svg.append("g"); const divTooltip = d3 .select(container) .append("div") .classed("tooltip", true); const tooltip = new Tooltip(divTooltip); const btnZoomIn = d3 .select(container) .select("button.zoom-in") .on("click", handleZoomIn); const btnZoomOut = d3 .select(container) .select("button.zoom-out") .on("click", handleZoomOut); g.append("g") .attr("id", "nation-boundary") .attr("stroke-width", 0.8) .append("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", path(topojson.mesh(us, us.objects.nation))) .attr("fill", "#eee") .attr("stroke", "#888"); g.append("g") .attr("id", `${adminLevel}-data`) .selectAll("path") .data(data, (d) => d.id) .join("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", (d) => path(geoData.get(d.id))) .attr("fill", (d) => { const value = accessor(d); if (value === null || value === undefined) { return colorNoData; } return colorScale(value); }) .on("mouseover", ({ currentTarget }, d) => { d3.select(currentTarget) .attr("stroke", "yellow") .attr("stroke-width", 2) .raise(); if (tooltipContents) tooltip.display(d, tooltipContents); dispatch("hovered", d); }) .on("mouseout", ({ currentTarget }) => { d3.select(currentTarget).attr("stroke", "none").attr("stroke-width", 0); if (tooltipContents) tooltip.hide(); }) .on("mousemove", (event) => { if (tooltipContents) tooltip.move(event); }) .on("click", (event, d) => { dispatch("selected", d); }); if (adminLevel === "counties") { g.append("g") .attr("id", "county-boundaries") .attr("stroke-width", 0.5) .append("path") .attr( "d", path( topojson.mesh( us, us.objects.counties, (a, b) => a !== b && ((a.id / 1000) | 0) === ((b.id / 1000) | 0) ) ) ) .attr("fill", "none") .attr("stroke", borderColorCounties); } g.append("g") .attr("id", "state-boundaries") .attr("stroke-width", 0.7) .append("path") .attr("vector-effect", "non-scaling-stroke") .attr("d", path(topojson.mesh(us, us.objects.states))) .attr("fill", "none") .attr("stroke", borderColorStates); if (borderEnabled) { svg .append("rect") .attr("width", mapConfig.width) .attr("height", mapConfig.height) .attr("fill", "none") .attr("stroke", "#222") .attr("stroke-width", 2); } // Helper functions that need access to local variables in this cell function zoomed({ transform }) { g.attr("transform", transform); g.selectAll("g").attr("stroke-width", 1 / transform.k); } function handleZoomIn(event) { svg.transition().duration(500).call(zoom.scaleBy, 1.74); } function handleZoomOut(event) { svg.transition().duration(500).call(zoom.scaleBy, 0.5); } // for when the map is a "viewof" cell function dispatch(key, value) { container.value = { ...container.value, ...{ [key]: value } }; container.dispatchEvent(new CustomEvent("input")); } if (zoomEnabled) svg.call(zoom); container.value = { ...initialState }; return container; }34:[] 2f:{"title":"Reusable U.S. Choropleth Map","cells":[{"id":0,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":348,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":247,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":185,"value":"md`The selected value is: ${testWithCountiesData.selected.value} and the hovered value is ${testWithCountiesData.hovered.value}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"viewof zoomToggle = checkbox({\n description: \"Toggle Map Zoom\",\n options: [{ value: \"zoomEnabled\", label: \"Zoom On\" }],\n value: \"zoomEnabled\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof testWithCountiesData = drawChoroplethMap({\n data: countiesData,\n colorScale,\n tooltipContents,\n zoomEnabled: zoomToggle === \"zoomEnabled\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":301,"value":"testWithStatesData = drawChoroplethMap({\n data: statesData,\n colorScale,\n tooltipContents,\n adminLevel: \"states\",\n zoomEnabled: zoomToggle === \"zoomEnabled\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"testMoreOptions = drawChoroplethMap({\n width: 450,\n // height: 300,\n zoomEnabled: false,\n borderEnabled: false,\n adminLevel: \"states\",\n backgroundColor: \"#333\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":130,"value":"colorScale = d3\n .scaleQuantize()\n .domain([0, 0.8])\n .range(d3.schemeRdPu[7])","pinned":true,"hidden":false,"mode":"ojs"},{"id":136,"value":"tooltipContents = datum => {\n const { id, value } = datum;\n return `${id}: ${d3.format(\".2f\")(value)}`;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":104,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":25,"value":"$33","pinned":true,"hidden":false,"mode":"ojs"},{"id":16,"value":"mapConfig = ({\n padding: 24,\n height: Math.floor((width * 3) / 5),\n width\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":401,"value":"defaultColorScale = d3.scaleQuantize().domain([0, 1]).range(d3.schemeRdPu[5])","pinned":true,"hidden":false,"mode":"ojs"},{"id":290,"value":"allowedAdminLevels = new Set([\"counties\", \"states\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":229,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs"},{"id":224,"value":"projection = d3\n .geoAlbersUsa()\n .fitExtent(\n [\n [mapConfig.padding, mapConfig.padding],\n [\n mapConfig.width - mapConfig.padding,\n mapConfig.height - mapConfig.padding\n ]\n ],\n countiesGeo\n )","pinned":true,"hidden":false,"mode":"ojs"},{"id":197,"value":"format = d3.format(\".2f\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"countiesData = Array.from(testData.entries()).map(([id, values]) => ({\n id,\n value: values.HD01_VD13 / values.HD01_VD01\n}))","pinned":true,"hidden":false,"mode":"ojs"},{"id":12,"value":"countiesGeoByFips = new Map(countiesGeo.features.map(d => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":10,"value":"countiesGeo = topojson.feature(us, \"counties\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":285,"value":"statesData = {\n const data = Array.from(statesGeoByFips.keys()).map(id => ({\n id,\n value: +format(Math.random())\n }));\n data.find(d => d.id === \"48\").value = null; // test no data color\n return data;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"statesGeoByFips = new Map(statesGeo.features.map(d => [d.id, d]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"statesGeo = topojson.feature(us, \"states\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":4,"value":"us = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"topojson = require(\"topojson-client@3\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":32,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":379,"value":"import { checkbox } from \"@jashkenas/inputs\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":109,"value":"import { acs as testData } from \"@clhenrick/u-s-broadband-internet-access\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":393,"value":"import {\n countyFipsToName,\n countyNameToFips,\n stateNameToFips,\n stateFipsToName\n} from \"@clhenrick/us-census-constants\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"import { Tooltip } from \"@clhenrick/tooltip-component\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":6,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W34","stdlib":"1","titling":"auto"}