map

31:T3b52,mapSvgOriginal = svg``32:T29cf,mapSvgOptimized = svg``33:[] 2f:{"title":"U.S. Hexagon Map SVG with Data Joined","cells":[{"id":0,"value":"md`# U.S. Hexagon Map SVG with Data Joined\n\nUsing the version created by [NPR](http://blog.apps.npr.org/2015/05/11/hex-tile-maps.html), this particular hexagonal US state map design comes from the article [_Did You Know It's Legal In Most States To Discriminate Against LGBT People?_](https://www.npr.org/sections/itsallpolitics/2015/04/28/402774189/activists-urge-states-to-protect-the-civil-rights-of-lgbt-people). I modified the SVG from that article so that it could be joined to arbitrary data using D3JS. See below for how this was done.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"mapObesity.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"mapLegend.cloneNode(true)","pinned":false,"hidden":false,"mode":"ojs"},{"id":65,"value":"md`## Implementation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":47,"value":"md`First, clean up the original SVG by removing the class names and fill attributes on the hexagon paths. Then create a unique \\`data-id\\` attribute using the state name that was extracted from the original class names. \n\nWe can do something similar for the text elements as well. Because the SVG text nodes are already in alphabetical order in the DOM, we can create an array of state name strings and join them using the index of each text node. \n\nThis allows for us to join data to each of the hexagon shapes and/or text nodes using \\`d3-selection\\`'s data join method, by using the state name as the primary key between our data and SVG hexagon paths.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":46,"value":"mapSvgWithIds = {\n const map = d3.select(mapSvgOriginal.cloneNode(true));\n const statesGroup = map.select(\"g.states\");\n const statesPaths = statesGroup.selectAll(\"path\");\n\n statesPaths.each(function(_d, i) {\n const pathEl = d3.select(this);\n const [stateClassName] = pathEl.attr(\"class\").split(\" \");\n const stateNameId = stateClassName\n .replace(\"state-\", \"\")\n .replace(/-/gi, \" \");\n pathEl.attr(\"data-id\", stateNameId);\n pathEl.attr(\"class\", null);\n pathEl.attr(\"fill\", null);\n });\n\n map.selectAll(\"text\").each(function(_d, i) {\n d3.select(this).attr(\"data-id\", textData[i]);\n });\n\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":53,"value":"textData = data\n .map(d => d.locationdesc)\n .filter(d => d !== \"puerto rico\" && d !== \"guam\" && d !== \"virgin islands\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":45,"value":"md`With our SVG prepped we can now try joining some state data to it, for example the prevalence of Obesity in White, non-Hispanic people, from the [CDC's CDI dataset](https://observablehq.com/@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss?collection=@clhenrick/msm-fellowship-data-intake).`","pinned":false,"hidden":false,"mode":"ojs"},{"id":44,"value":"mapLegend = legend({\n color,\n title: \"Percentage of Obesity Prevelance in White, Non-Hispanic\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"mapObesity = {\n const map = d3.select(mapSvgWithIds.cloneNode(true));\n map\n .selectAll(\"path\")\n .data(data, function(d) {\n return d ? d.locationdesc : this.dataset.id;\n })\n .attr(\"fill\", d => color(d[\"White, non-Hispanic\"]))\n .attr(\"stroke\", \"#e2e2e2\");\n\n return map.node();\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":42,"value":"color = d3\n .scaleSequential(d3.interpolateYlOrRd)\n .domain(d3.extent(data, d => d[\"White, non-Hispanic\"]))","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"data = pivotByRaceData.map(({ locationdesc, ...rest }) => ({\n ...rest,\n locationdesc: locationdesc.toLowerCase()\n}))","pinned":false,"hidden":false,"mode":"ojs"},{"id":40,"value":"md`Here is the original SVG element that I stole from NPR:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":18,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`## Extras`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"md`Here is an optimized SVG of the original processed using [SVGOMG](https://jakearchibald.github.io/svgomg/), I chose not to use it as it has some artifacts though (see the intersection of Iowa, Ill., Mo.)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"md`## Dependencies`","pinned":false,"hidden":false,"mode":"ojs"},{"id":37,"value":"import { legend } from \"@d3/color-legend\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":36,"value":"import { pivotByRaceData } from \"@clhenrick/het-data-intake-u-s-chronic-disease-indicators-cdi-brfss\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":35,"value":"d3 = require(\"d3@6\")","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}