2d:null 2e:["$","title",null,{"children":"US Map Tooling Examples | Brendan Ratter | Observable"}] 33:T4a9,viewof singleMap = { const scope = scopeMap[config.scope], map = config.zoomable // If we want a zoomable map we simply wrap the map factory output in the zomable mixin ? usMap.zoomable(usMap.usMap(scope)) : usMap.usMap(scope), // Get the right premade feature, loading the pre-projected topology and scope, then tweak some settings prelimFeature = featureMap[config.layer](topologyAlbers, scope) .width(0.5) .strokeColor(['#777777']) .fillColor(['#f5f5f5']), // Scale the feature's stroke if that setting is active feature = config.scaleStroke ? usMap.scaleWidth(prelimFeature, map) : prelimFeature, svg = d3.create('svg'), // Finally we call the map with the svg selection, returning the group // No need to bind data in premade features g = map(svg).call(feature); // If the option to show inset outlines is checked, then add to the map // Inset outlines are a special feature that comes as a separate pre-projected TopoJSON fom the us-atlas package if (config.outlines) usMap.outlineMesh(topologyOutlines, scope)(g); return svg.node(); }34:T4e7,viewof config = form((function () { return html``; })());35:T6fb,zoomSyncExample = { const scope = usMap.scopes.states(), baseMap = usMap.usMap(scope) .size({ width: width / 2}), // Here we add the zoomable and apply the sync setting based on the config map = zoomSyncConfig.zoomable ? usMap.zoomable(baseMap).sync(zoomSyncConfig.sync) : baseMap, // We use the premade counties feature with pre-projected topology and states scope // The county fill color will be based on data using the compound syncScale counties = usMap.counties(topologyAlbers, usMap.scopes.states()) .width(0.2) .fillColor(syncScale) .fill(d => d.properties), // A purely aesthetic overlay of slightly thicker state borders stateMesh = usMap.stateMesh(topologyAlbers, scope) .width(2) .strokeColor(['#ffffff']), // The view box sets up the parent svg to be the right size to hold the children // we don't touch the width itself parent = d3.create('svg') .attr('viewBox', [0, 0, width, width * 9 / 16 / 2]), // Set up the actual map containers, first by positioning groups then appending an svg svg = parent .selectAll('g') .data(zoomSyncData) .join('g') .attr('transform', (d, i) => `translate(${i * width / 2},0)`) .append('svg'); // Now just wire it together, calling the map as a function to use the returned group map(svg).call(counties).call(stateMesh); // Note that this line does the same thing // The data() call is redundant in this special case beacuse the feature already bound the data to the group //svg.call(map).selectAll('g.usMap').data(d => [d]).call(counties).call(stateMesh); return parent.node(); }36:[{"id":"c0fb09167b9461c87ed11ac92772ef278e190cf29424a5bb7025dea6836b4f93c50a891815ce3cdb4bcdb8153577ca51fdbbd439a6a18fa914eef4e3a3a3e6fc","href":"https://static.observableusercontent.com/files/c0fb09167b9461c87ed11ac92772ef278e190cf29424a5bb7025dea6836b4f93c50a891815ce3cdb4bcdb8153577ca51fdbbd439a6a18fa914eef4e3a3a3e6fc","name":"cdc-diabetes-obesity.csv","type":"text/csv","lastModified":1606452977066.29,"size":49043}] 31:{"id":"28b50a1b2be4b8b3","slug":"us-map-examples","title":"US Map Tooling Examples","thumbnail":"15a8024f1ee803c59be2f5bb1a503c1dec11bceb754ba49ca5a4d3fd713be518","access_level":"public","create_time":"$D2020-11-21T23:53:59.798Z","update_time":"$D2020-12-08T02:12:23.335Z","view_time":null,"first_public_time":"$D2020-11-29T03:11:20.822Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ac1efc54e02edbcb","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":"starter_2024"},"version":770,"publish_version":770,"role":null,"authored":false,"authors":[{"type":"individual","id":"832b3a3dcd4c23fe","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":null}],"members":[{"type":"individual","id":"832b3a3dcd4c23fe","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"title":"US Map Tooling Examples","cells":[{"id":0,"value":"md`\n# US Map Tooling Examples\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"md`\nMy [US Map tooling package](https://github.com/bratter/us-map) is based on [@d3/u-s-map](https://observablehq.com/@d3/u-s-map), but extended with composable features for quick rendering of features, zoom behavior, and a customized projection for optionally showing insular areas. Focus on svg for the time being.\n\nSources of data, techniques, and inspiration in the [bibliography](#appendixBibliographySection).\n\nThis notebook runs through exmaple uses of the package to demonstrate the main features available.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":62,"value":"md`\n## Single Map Example\n\nAn example of setting up a single map with options to add in various zoom features. The controls below the map demonstrate several of the options available in the API, and comments in the map's code cell show how the features can be used.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":70,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":106,"value":"scopeMap = ({\n all: usMap.scopes.all(),\n states: usMap.scopes.states(),\n lower48: usMap.scopes.lower48(),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":636,"value":"featureMap = ({\n nation: usMap.nation,\n states: usMap.states,\n counties: usMap.counties,\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":189,"value":"md`\n## Zoom Sync and Data Binding Example\n\nThis example demonstrates additional functionality: (a) synchoronized zooming, (b) aesthetic only mesh layers, and (c) a general approach to data binding to display (potentially multiple) choropleths using premade features.\n\nWe use data from the [@d3/bivariate-choropleth](https://observablehq.com/@d3/bivariate-choropleth) example, but render on two separate maps to demonstrate synchronized zooming.\n\nNote how the data is pre-constructed in the [zoomSyncData cell](#zoomSyncData), bound into the map upfront, then cascaded through to rendering. The premade feature functions automatically merge the correct GeoJSON with any bound data.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":204,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":194,"value":"viewof zoomSyncConfig = form((function () {\n return html``;\n})());","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":397,"value":"md`\n### Data Prep\n\nTo make the visual data-driven, we set up the data in the right shape in the cell below. Couple of things to note:\n\n1. The top line prepares the raw csv data from the attached file.\n2. Next, we declare a \\`makeDataMap()\\` function that builds a \\`Map\\` object from the csv that maps counties to a simple \\`{key, value}\\` pair. We need the data as an object in an es6 \\`Map\\` keyed by FIPS code for the premade feature to merge it with the GeoJSON – an error will be thrown if a different form of data is provided.\n3. Finally, the return statement wires the functions together creating a two-element array, one for each map in the final output.\n\nOpen the [zoomSyncData](#zoomSyncData) cell to see the code. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"zoomSyncData = {\n const parsedCSV = d3.csvParse(await FileAttachment(\"cdc-diabetes-obesity.csv\").text());\n const makeDataMap = key => new Map(\n parsedCSV.map(d => [d.county, {key, value: +d[key]}])\n );\n \n return ['diabetes', 'obesity'].map(makeDataMap);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"md`\nTo show how the premade feature manages the data, I've pulled out the datum for a single county (LA County, FIPS code \\`06037\\`) both before and afer the premade feature merges the data. Also note that (a) if data is missing for a GeoJSON feature, the feature will be rendered but the additional properties will be \\`undefined\\`, and (b) if data is provided for features that don't exist, it will be skipped.\n\nLA County diabetes data passed into the premade feature (the entry from the map):\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":607,"value":"zoomSyncData[0].get('06037');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":618,"value":"md`\nNow see how this is merged into the properties of the GeoJSON feature that becomes the datum on the \\`\\` element:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"value":"d3.select(zoomSyncExample)\n .select('svg.usMap')\n .selectAll('path')\n .filter(d => d.id === '06037')\n .datum();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":424,"value":"md`\n### Lookup Scale\n\nA standard d3-scale cannot easily be used to show independent scales on each map, as they potentially have different domains and ranges (the same issue applies to any small multiple). A several solutions are possible including hot-swapping scales with local variables, embedding scales in data, manually post-selecting then coloring, etc.\n\nHowever the best solution I've come across is a a lookup table. Instead of passing a single value to the scale, pass an object containing a key/value pair where the key is the lookup value for the scale for the particular datapoint.\n\nIn this example, the below [syncScale](#syncScale) cell sets up a scale each for diabetes and obesity, then adds them to a simple lookup. It also provides a default (white) if the data is missing. The resulting function has the same call signature as an individual scale, so can be directly substituted in the feature's \\`fillColor\\` setting.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"syncScale = {\n const scaleLookup = {\n diabetes: d3.scaleSequential()\n // As of d3 v6, extent works on es6 maps using the default entries iterator\n .domain(d3.extent(zoomSyncData[0], d => d[1].value))\n .interpolator(d3.interpolateBlues),\n obesity: d3.scaleSequential()\n .domain(d3.extent(zoomSyncData[1], d => d[1].value))\n .interpolator(d3.interpolatePurples),\n };\n \n return d => scaleLookup[d.key]\n ? scaleLookup[d.key](d.value)\n // Use white by default if the key doesn't exist in the lookup\n : 'rgb(255, 255, 255)';\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":51,"value":"md`\n## Projection\n\nFactory function that builds a non-standard Albers' projection. As a compound projection it does not have all methods from the full d3-projection object.\n\nThis projection is used by the main UsMap object below and also exported in case anyone wants to use the projection with their own tooling.\n\nThe projection is be built with the \\`usMapProjection\\` factory function that accepts a \\`scope\\` argument. The nunber of insets depends on the scope used. For instance using \\`scopes.states()\\` you get a projection with insets for AK and HI which ou can explore in the cell below.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"proj = {\n const scope = usMap.scopes.states(),\n projection = usMap.usMapProjection(scope),\n insets = projection.insets();\n \n return {scope, projection, insets};\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"md`\nThe projection can then be used to map to and from pixel coordinates given the default view box of 1024×576 as this random point in Alaska shows:\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":39,"value":"({\n toPx: proj.projection([-149, 64]),\n fromPx: proj.projection.invert([163, 486]),\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"md`\n## Appendix: Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"// Swap lines to use the file picker for local development\nusMap = require('@d3ts/us-map@v0.5')\n//usMap = require(await URL.createObjectURL(scriptFile))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// Uncomment for local development\n//viewof scriptFile = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":275,"value":"topologyOutlines = d3.json('https://cdn.jsdelivr.net/npm/@d3ts/us-atlas/outlines-albers-10m.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":254,"value":"topologyAlbers = d3.json('https://cdn.jsdelivr.net/npm/@d3ts/us-atlas/counties-albers-10m.json')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"d3 = require('d3@6');","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":66,"value":"import { form } from '@bratter/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":74,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":441,"value":"appendixBibliographySection = md`\n## Appendix: Bibliography\n\nData, techniques, and inspiration from:\n- https://github.com/topojson/us-atlas\n- https://observablehq.com/@d3/u-s-map\n- https://observablehq.com/@d3/zoom-to-bounding-box\n- https://observablehq.com/@d3/u-s-map-with-puerto-rico\n- https://github.com/rveciana/d3-composite-projections/blob/master/src/albersUsaTerritories.js\n- https://www.smashingmagazine.com/2018/05/svg-interaction-pointer-events-property/\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 32:"$31:body"