28:null 29:["$","title",null,{"children":"D3 Interactive Hexbin Cartogram Map | michaelpkuhn | Observable"}] 2f:T868,D3 Interactive Hexbin Cartogram Map ============== ***U.S. Congressional Districts*** # Introduction Maps provide a powerful and intuitive representation of complex issues. After spending hours testing multiple visualization frameworks, I determined that d3 offers the most powerful visualizations including mapping. Other mapping frameworks in R (`leaflet`, `sf`, `geomspatial`) do not provide an intuitive method to create interactive cartograms. My implementation of d3 in R utilizes Quarto's observable integration, but that is beyond the scope of this post. This post aims to document how to create an interactive hexbin cartogram, and document how observable and d3 work for my future reference as well as anyone else that comes across this post. Hexbin cartograms are a great way to represent geographic data while maintaining proportionality and clarity. In this post, I demonstrate how to setup an interactive d3 visual for 2024 congressional districts. Congressional districts are an impactful geographic unit to visualize, since insights for a particular district are highly relevant to the respective legislator. Since congressional districts vary in size, based on population density, it can be difficult to see all of them on a map, let alone hover over a specific one. A cartogram makes each district the same size. This does skew the actual area represented by the district. # Observable If you're familiar with Jupyter Notebooks, RMarkdown or Quarto, then you might initially assume Observable is very similar to those programs. This assumption will lead to many headaches. **_Observable notebooks are typically published in reverse order_**: libraries are imported at the bottom, code builds up from there, then the final visuals are at the top. The best way to wrap your head around these quirks of Observable is to look up Javascript memes, "function hoisting", and refer to the documentation on their [javascript dialect](https://observablehq.com/documentation/cells/observable-javascript#observable-javascript). For now, this notebook will assume you have familiarity with data analysis, HTML and Javascript. # The Map 30:T62e,map2 = { // hopefully the projection is specified, but this might work if it is not const projection = d3.geoIdentity() .reflectY(true) // if needed. .fitSize([chartStyle.width, chartStyle.height],cd_geo) const pathGenerator = d3.geoPath(projection); // this creates a div in the HTML DOM with an HTML template string // https://observablehq.com/documentation/misc/standard-library#html-string // the tooltipTemplate variable is also an HTML template const container = d3.select( html`

${tooltipTemplate}

` ); const tooltipDiv = container.select(".tooltip"); // this creates a child svg element in the previously defined div container const svg = container.append('svg') .attr("viewBox", [0, 0, chartStyle.width, chartStyle.height]) .attr("width", chartStyle.width) .attr("height", chartStyle.height) .attr("style", "max-width: 100%; height: auto;"); // this creates a child rect element as the background svg.append("rect") .attr("width", chartStyle.width) .attr("height", chartStyle.height) .attr('fill', chartStyle.backgroundColor); // this creates child path elements for each data feature // https://bost.ocks.org/mike/join/ svg.selectAll('path') .data(cd_geo.features) .join('path') .attr('d', pathGenerator) .attr('fill', chartStyle.landColor) .attr('stroke', chartStyle.landStroke) .attr('stroke-width', 1) .call(tooltip, tooltipDiv); return container.node(); }31:T75c,// this is a dangerous combination of arrow functions and `this` tooltip = (selectionGroup, tooltipDiv) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover() { // show/reveal the tooltip, set its contents, // style the element being hovered on showTooltip(); setContents(d3.select(this).datum(), tooltipDiv); setStyle(d3.select(this)); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, this); // add the left & top margin values to account for the SVG g element transform setPosition(mouseX + margin.left, mouseY + margin.top); } function handleMouseleave() { // do things like hide the tooltip // reset the style of the element being hovered on hideTooltip(); resetStyle(d3.select(this)); // I don't love that `this`, inside the tooltip code is the element and not the tooltip } function showTooltip() { tooltipDiv.style("display", "block"); } function hideTooltip() { tooltipDiv.style("display", "none"); } function setPosition(mouseX, mouseY) { tooltipDiv .style( "top", mouseY < chartStyle.height / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "right", mouseX > chartStyle.width / 2 ? `${chartStyle.width - mouseX + MOUSE_POS_OFFSET}px` : "initial" ) .style( "bottom", mouseY > chartStyle.height / 2 ? `${chartStyle.height - mouseY + MOUSE_POS_OFFSET}px` : "initial" ) .style( "left", mouseX < chartStyle.height / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial" ); } }32:[{"id":"d7593f9c5f030a85f0c63ff1d11237d6dc0ddceb1f47d92d0105259aa0aad66fa6f7d38528a6f3fe9fa23d0f2d4df18d406ad4bb1a25e666e39ba2dc3f3ff44e","href":"https://static.observableusercontent.com/files/d7593f9c5f030a85f0c63ff1d11237d6dc0ddceb1f47d92d0105259aa0aad66fa6f7d38528a6f3fe9fa23d0f2d4df18d406ad4bb1a25e666e39ba2dc3f3ff44e","name":"cd_hex.json","type":"application/json","lastModified":1740861630308.711,"size":516860}] 2c:{"id":"b3bfff964181c523","slug":null,"title":"D3 Interactive Hexbin Cartogram Map","thumbnail":"508dd4596cd538561005280918ebdd2f6956997f9ba5a6bcf010f48270e51b5b","access_level":"public","create_time":"$D2025-03-01T20:34:48.244Z","update_time":"$D2025-03-02T16:48:55.009Z","view_time":null,"first_public_time":"$D2025-03-02T00:17:55.796Z","fork":{"id":"e6b14a27aef67561","slug":"d3-u-s-map","title":"D3 U.S. map","owner":{"id":"f35c755083683fe5","login":"observablehq","name":"Observable"}},"stars":1,"starred":false,"owner":{"type":"team","id":"bfcdd966decc7cab","login":"michaelpkuhn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74b8ea1a1032b6ad23c9a1947fc862f3ff45771f9b63fadca64c79421c9bf326","tier":"starter_2024"},"version":380,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"0cc4e544b33c228d","login":"michaelpkuhn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74b8ea1a1032b6ad23c9a1947fc862f3ff45771f9b63fadca64c79421c9bf326","tier":null}],"members":[{"type":"individual","id":"0cc4e544b33c228d","login":"michaelpkuhn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74b8ea1a1032b6ad23c9a1947fc862f3ff45771f9b63fadca64c79421c9bf326","tier":null,"role":"editor"},{"type":"team","id":"bfcdd966decc7cab","login":"michaelpkuhn","name":"","avatar_url":"https://avatars-next.observableusercontent.com/74b8ea1a1032b6ad23c9a1947fc862f3ff45771f9b63fadca64c79421c9bf326","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"title":"D3 Interactive Hexbin Cartogram Map","cells":[{"id":0,"value":"$2f","pinned":false,"hidden":false,"mode":"md"},{"id":173,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":304,"value":"## Chart Styles\n\nMany observable tutorials define global variables across multiple cells. This is more difficult to copy and paste, makes it more difficult to locate, and creates potential confusion if there's a scope conflict. Therefore, I combined the styles into an object. This also makes the map code easier to read.","pinned":false,"hidden":false,"mode":"md"},{"id":322,"value":"chartStyle = ({\n height: 581,\n width: 928,\n landColor: \"#09A573\",\n backgroundColor: \"#EAF2FA\",\n landStroke: \"#FCF5E9\",\n hoverColor: \"magenta\"\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":228,"value":"function resetStyle(selection) {\n selection.attr(\"fill\", chartStyle.landColor);\n};\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":230,"value":"function setStyle(selection) {\n selection.attr(\"fill\", chartStyle.hoverColor);\n};","pinned":true,"hidden":false,"mode":"ojs"},{"id":306,"value":"## GeoJSON File\n\nI spent a lot of time trying to find a hexbin cartogram file with updated congressional boundaries (after the 2020 redistricting). I even existing svg maps (that were almost certainly made in d3) and tried to convert them to GeoJSON. I finally found a well maintained maps database from The [Downballot](https://the-db.co/). However, I still had to convert it from shp format to GeoJSON, with the `geojsonsf` library. I'll also note that a version of this map required topoJSON format, which `geojsonsf` does not support, but `geojsonio` does.","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"cd_geo = FileAttachment(\"cd_hex.json\").json()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":287,"value":"# Tooltip\n\nCode modified from [@clhenrick's Tooltip (D3 Convention)](https://observablehq.com/@clhenrick/tooltip-d3-convention) notebook.\n\nThe next few cells handle the logic for creating and displaying the tool tip. \n\n","pinned":false,"hidden":false,"mode":"md"},{"id":213,"value":"// I think this gives each tooltip a custom id to prevent styling issues\ntooltipId = DOM.uid().id","pinned":true,"hidden":false,"mode":"ojs"},{"id":211,"value":"// This is an observable html template\n// https://observablehq.com/documentation/misc/standard-library#html-string\ntooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":354,"value":"## Tooltip Display Function\n\nThis section is fairly complicated, but it basically accomplishes the following:\n\n- On hover:\n - Displays tooltip\n - Changes congressional district color\n\n- Off hover:\n - Removes tooltip\n - Resets congressional district color\n\n A lot of the complexity is in where the tooltip appears.","pinned":false,"hidden":false,"mode":"md"},{"id":219,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":359,"value":"## Tooltip Contents\n\nThis function sets the tooltip's content. The function below simply displays all of the properties for each feature. However, you may only want to display certain properties. Also, keep in mind that the code may need to be updated based on your geoJSON structure.","pinned":false,"hidden":false,"mode":"md"},{"id":225,"value":"function setContents(datum, tooltipDiv) {\n // customize this function to set the tooltip's contents however you see fit\n tooltipDiv\n .selectAll(\"p\")\n .data(Object.entries(datum.properties)) // I had to add properties here bc my json structure was different\n .join(\"p\")\n .filter(([key, value]) => value !== null && value !== undefined)\n .html(\n ([key, value]) =>\n `${key}: ${\n typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value\n }`\n );\n};\n\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":223,"value":"// Another observable html template\n// https://observablehq.com/documentation/misc/standard-library#html-string\ntooltipStyles = htl.html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"## Tooltip Variables\n\nJust style-related variables","pinned":false,"hidden":false,"mode":"md"},{"id":221,"value":"MOUSE_POS_OFFSET = 8","pinned":true,"hidden":false,"mode":"ojs"},{"id":232,"value":"margin = ({ top: 10, right: 10, bottom: 10, left: 10 })","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"# d3\n\nLast strange convention for d3/observable. D3 modules are assigned to a `d3` variable. However, these are not listed as dependencies in notebooks. You'll need to add them to the require function below. ","pinned":false,"hidden":false,"mode":"md"},{"id":7,"value":"d3 = require(\"d3@7\", \"d3-geo@3\", \"d3-selection@2\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}} 2d:"$2c:body"