2d:null 2e:["$","title",null,{"children":"US Map | Brendan Ratter | Observable"}] 33:T979,viewof map = { const filter = usMapFilters[state.filter], map = state.zoomable ? zoomable(usMap(filter)) : usMap(filter), svg = d3.create('svg'), node = svg.node(), // The container call returns the group for easy access, can also be selected with svg.select('g.usMap') g = map(svg), layer = state.layer === 'nation' ? nation(map) : state.layer === 'states' ? states(map) : counties(map), scaledLayer = state.scaleStroke ? scaleStroke(map, layer, 'layer') : layer; // Adjust some settings on the layer scaledLayer.width(0.5).strokeScale().range(['#777777']); scaledLayer.fillScale().range(['#f5f5f5']); // Click to reset handler if (state.clickReset) svg.call(map.makeBehavior(zoomReset)); // Note that if you are going to add zoomReset on click handler, should set stopPropagation to true to stop clashing // The features calls return the wrapping g, the individual features can be obtained through .selectAll('path') or to not change the selection, use within selection.call() const lg = scaledLayer(g).call(state.clickZoom ? map.makeBehavior(zoomToFeature, true) : () => {}); // Overlay the inset outlines if (state.outlines) (state.scaleStroke ? scaleStroke(map, outlines(map), 'outline') : outlines(map))(g); // Stream points either on click or mousemove if (state.streamPoints) { svg.call(map.makeBehavior( positionStream, undefined, state.streamPointsType === 'move' && 'mousemove.streamType', )); } // Stream feature either on click or mouseover if (state.streamFeatures) { lg.call(map.makeBehavior( featureStream, undefined, state.streamFeaturesType === 'mouseover' && 'mouseover.streamFeature', )); } // Add the zoom controls if also have a zoomable if (state.zoomable && state.controls) svg.append(() => zoomLayer(map, node)); // Add some arbitrary projected points (LA and Chicago) - any geojson feature can be projected with map.projection() const cities = [[-118.2437, 34.0522], [-87.6298, 41.8781]].map(map.projection()) g.selectAll('circle.city').data(cities).join('circle').classed('city', true) .attr('r', 3).attr('cx', d => d[0]).attr('cy', d => d[1]); // Set the initial data node.renderValue({ position: map.projection().invert([0, 0]), feature: { id: null, properties: null }, }); return svg.node(); }34:T4e5,{ const baseClass = 'feature'; const hash = mhash(`${baseClass}${new Date()}`); const hashClass = `${baseClass}_${hash}`; const f = d3.format(' > 7.2f'); const [x, y] = map.position; const props = map.feature.properties || {}; return html`

${state.streamPoints ? `[${f(x)},${f(y)}]` : 'Not tracking points'}

${state.streamPoints ? `Tracking mouse position on ${state.streamPointsType} [lng, lat]` : 'Check "Stream Points" to enable' }

${state.streamFeatures ? `${props.label || props.name || 'none selected'}` : 'Not tracking features'}

${state.streamFeatures ? `Recording ${state.layer} on ${state.streamFeaturesType}` : 'Check "Stream Features" to enable' }

` }35:T8f2,viewof state = form((() => { const baseClass = 'controlForm'; const hash = mhash(`${baseClass}${new Date()}`); const hashClass = `${baseClass}_${hash}`; return html``})())36:T570,{ // Set up some intial objects const baseMap = usMap(usMapFilters.states).size({ width: width / 2 }), map = choroState.zoomable ? zoomable(baseMap).sync(choroState.sync) : baseMap, countyLayer = counties(map).width(0.2), mesh = sel => sel.append(stateMesh(map, undefined, { stroke: '#ffffff', 'stroke-width': 2 })), dataIdx = d3.local(); // Set up the two parent svgs with local variable to store the indes and color scale const svgParent = d3.create('svg').attr('viewBox', [0, 0, width, width * 9 / 16 / 2]), svg = svgParent.selectAll('g') .data([[0, scales[0]], [1, scales[1]]]) .join('g') .each(function (d) { dataIdx.set(this, d) }) .attr('transform', (d, i) => `translate(${i * width / 2}, 0)`).append('svg').attr('id', (d, i) => i); // Call all the layers on the group, then post-select the counties for data join and coloring const g = map(svg).call(countyLayer).call(mesh).call(outlines(map)), paths = g.selectAll('path.county'); // Join the data into the existing geoJSON data attached to the counties, then fill paths .data(paths.data().map(d => ({ ...d, data: diabetesObesity.get(d.id) || [] })), d => d.id) .attr('fill', function (d) { const [idx, scale] = dataIdx.get(this); return scale(d.data[idx] || 0); }); return svgParent.node(); }37:T6ef,// TODO: This should be done without d3, should it create the svg itself? // TODO: Is the best setup here to return the group? Does it need to accept the svg, or just return it? // TODO: Think about how much to generalize the usMap container, or keep the bounds / projection as fixed constants outside? // TODO: Balance between single node stuff and selection stuff should be thought through function usMap(filter = usMapFilters.all) { const topojson = topojsonFilter(filter); const projection = usMapProjection(topojson.objects.states.geometries.map(d => d.id)); const path = d3.geoPath(projection); let size = { width: null, height: null }; function usMap(selection) { return selection .attr('viewBox', [0, 0].concat(usMapViewBox)) .attr('height', size.height) .attr('width', size.width) .classed('usMap', true) .each(function () { this.value = {}; this.renderValue = value => { this.value = { ...this.value, ...value } }; }) .selectAll('g.usMap') .data([null]) .join(enter => enter.append('g').classed('usMap', true)); } usMap.topojson = () => topojson; usMap.projection = () => projection; usMap.path = () => path; usMap.size = function (_) { return _ === undefined ? { ...size } : (size = { ...size, ..._ }, this) }; /** * Provides the ability to wrap a behavior into a map layer. * Most behaviors will rely on the `zoomable` mixin, but not all, hence why this method is here. * The optional last parameter lets the user specify a custom event type, will default to click with a unqie name. */ usMap.makeBehavior = function (behavior, stopPropagation, type) { return makeBehavior(this, behavior, stopPropagation, type); } return usMap; }38:Te33,// TODO: Should we have a default for the filter on the zoom? What about key controls for the actions? Need to make zoom events not clash // TODO: Currently all underlying zoom methods available on zoomable, is this the best option? Should exclude any? // TODO: This does not currently add zoom transform data to the state, do not want the transform to be mutable and cascade (although declarative updating would be nice). Can maybe do this if necessary as an enumerable readonly getter? // Mix zoom behavior into a usmap object. Returns a configurable function that takes a second 'name' argument. Use the name argument to provide a name to the zoom transition, if not provided subsequent calls will replace the zoom event on any previously run selections. function zoomable(mapContainer) { let sync = true; let ease = zoomableDefaults.ease; const zoomSymbol = Symbol('zoomable'); const zoom = d3.zoom() .duration(zoomableDefaults.duration) .scaleExtent(zoomableDefaults.scaleExtent) .extent(zoomableDefaults.extent) .translateExtent(zoomableDefaults.extent); function zoomable(selection, name) { // First call the container to ensure the elements are set up properly const mapGroup = mapContainer(selection); // Then bind the zoom transform and input event emitter zoom.on(`zoom.usmap-base${name && `-${name}`}`, function () { const { transform } = d3.event; const el = this; // When in sync mode apply same transform to all elements in the selection // Need to use the this.__zoom escape hatch to avoid triggering an infinite loop of events // When not synced must only transform the target element, not the entire selection if (sync) { mapGroup.attr('transform', transform); selection.each(function () { if (this !== el) this.__zoom = transform }); } else { d3.select(el).select('g.usMap').attr('transform', transform); } }); // Add the zoom handlers to each container svg if not previously done // This will only add the behavior once, letting the user unset the animations as per d3-zoom docs // Use zoomable.clear(selection) to scrub the zoom behavior from the selection selection.each(function () { if (!this[zoomSymbol]) { d3.select(this) .call(zoom) .append('rect') .attr('width', usMapViewBox[0]) .attr('height', usMapViewBox[1]) .attr('fill', 'none') .attr('pointer-events', 'visible') .lower(); this[zoomSymbol] = true; } }); return mapGroup; } Object.assign(assignAllMethods(zoom, zoomable), mapContainer); /** * Clears all zoom behavior on the passed selection and resets the default ease, duration, extents * Calling the zoomable on the selection again will re-add all the handlers */ zoomable.clear = function (selection) { zoomable .ease(zoomableDefaults.ease) .duration(zoomableDefaults.duration) .scaleExtent(zoomableDefaults.scaleExtent) .extent(zoomableDefaults.extent) .translateExtent(zoomableDefaults.translateExtent); selection.on('.zoom', null); selection.on('click.zoomReset', null); selection.each(function () { this[zoomSymbol] = undefined }); return this; }; // Sets whether the zooms applied to the same selection should by synced or run separately zoomable.sync = function (_) { return _ === undefined ? sync : (sync = _, this); } zoomable.ease = function (_) { return _ === undefined ? ease : (ease = _, this); } return zoomable; }39:T475,md` ## Features Functions to add overlay layers within the map container. The \`features()\` HoF returns a function that takes a selection and binds it with the passes geojson *data* to produce a wrapping group and internal paths represeting each geojson feature in the data. Because the outer function takes the data as an argument, this produces a fixed set of features, not a dynamic set. The feature function returns a selection of wrapping group elements. The \`nation\`, \`states\`, and \`counties\` constants are pre-made feature functions that use the appropriate slice of the projected usMap data. Any feature can be wrapped in the \`scaleStroke\` mixin to enable automatic scaling of stroke-width if the map is a zoomable: ~~~js const map = zoomable(mapContainer()); const scaledFeature = scaleStroke(map, feature(data, d3.geoPath(), 'myClass')); ~~~ Once made, the feature can be called either in \`selection.call(scaledFeature)\` to keep the outer selection, or as follows (which is demonstrated to show adding a behavior to the feature's group): ~~~js scaledFeature(selection).call(map.makeBehavior(zoomToFeature)); ~~~ `3a:T6bb,// TODO: When other topojson files are made (pre-projected containing all entities), take base data as an argument in nation, state, county objects - if data is not pre-projected then needs to run projection // TODO: Should each path be wrapped in a group to act as the event host, and potentially allow other elements to be attached? function features(data, path, className) { let fill = d => d.id; let fillScale = d3.scaleOrdinal().range(['#e5e5e5']); let stroke = d => d.id; let strokeScale = d3.scaleOrdinal().range(['#ffffff']); let width = 1; function features(selection) { const g = selection .selectAll(`g.${className}Wrapper`) .data([null]) .join('g') .classed(`${className}Wrapper`, true) .attr('stroke-width', width) .attr('stroke-linejoin', 'round') // Pointer-events visible means that unfilled paths will still capture events .attr('pointer-events', 'visible'); g .selectAll(`path.${className}`) .data(data, d => d.id) .join(enter => enter.append('path').classed(className, true).attr('d', path)) .attr('stroke', d => strokeScale(stroke(d))) .attr('fill', d => fillScale(fill(d))); return g; } features.fill = function (_) { return _ === undefined ? fill : (fill = _, this) }; features.fillScale = function (_) { return _ === undefined ? fillScale : (fillScale = _, this) }; features.stroke = function (_) { return _ === undefined ? stroke : (stroke = _, this) }; features.strokeScale = function (_) { return _ === undefined ? strokeScale : ( strokeScale = _, this) }; features.width = function (_) { return _ === undefined ? width : (width = _, this) }; return features; } 3b:T672,zoomControlsSection = md` ## Zoom Controls Functions for a zoom control layer. There are four functions available: 1. \`zoomLayer()\`: Function that returns a \`zoomControl\` instance wrapped for inclusion as a child of a zoomable \`mapContainer\` svg element. Positions itself and connects to the appropriate events for two-way binding. 1. \`zoomControls()\`: Function that returns a wrapper for \`zoomButtons\` and an optional \`zoomSlider\`. The wrapper also manages the zoom state. Dispatches a customer \`input\` event when the value changes and the scale value is output on the node's \`value\` member. See note below on state. 1. \`zoomButtons()\`: Function that returns a node containing a plus and minus button that can be vertical or horizontal. Is an event target that dispatches a custom \`input\` events when the button is clicked. The detail property on the custom event is \`1\` for plus and \`-1\` for minus. There is no \`value\` available. 1. \`zoomSlider()\`: Funtction that returns a node containing a vertical or horizontal range input. The wrapper dispatches a custom \`input\` event when the slider changes value and stores the current value (0-100 range input default) on the returned node's \`value\` property. #### A note on zoom state The \`zoomControls\` wrapper maps a standard range input to a transform's \`scale\` value with the minimum k being right/bottom and the maximum left/top. The intermediate values are mapped using a square root function to maintain perceptual equality along the scale. #### Example The \`zoomLayer\` is shown in the main example above, a standalone \`zoomControls\` instance is below. `3c:T6ef,// TODO: Is there a better way to inject ${buttons} ${hasSlider ? slider : ''} `; buttons.addEventListener('input', e => { e.stopPropagation(); // Convert the increment into the domain then re-apply scale node.renderValue(scale(scale.invert(node.value) - e.detail * stepSize)); node.dispatchEvent(new CustomEvent('input')); }) if (hasSlider) { slider.addEventListener('input', e => { e.stopPropagation(); node.value = scale(e.detail); node.dispatchEvent(new CustomEvent('input')); }) // Updater function for the underlying slider only if it exists node.renderValue = k => { node.value = k; slider.renderValue(scale.invert(k)); }; } else node.renderValue = k => { node.value = k }; node.renderValue(k); return node; }3d:T597,// Zoom +/- buttons that emit a custom input event when clicked containing detail of +1 for zoom in, or -1 for zoom out // This is not a generator, it does not have a value and does not maintain state zoomButtons = (vertical = true) => { const baseClass = 'zoomButtons'; const hash = mhash(`${baseClass}${new Date()}`); const hashClass = `${baseClass}_${hash}`; const node = html`

`; node.addEventListener('click', e => { e.stopPropagation(); e.preventDefault(); if (e.target.tagName === 'BUTTON') node.dispatchEvent(new CustomEvent('input', { detail: +e.target.value })) }); return node; }3e:T43c,zoomSlider = (vertical = true) => { const baseClass = 'zoomSlider'; const hash = mhash(`${baseClass}${new Date()}`); const hashClass = `${baseClass}_${hash}`; const input = html``; const node = html`

${input}

`; input.addEventListener('input', e => { e.stopPropagation(); node.renderValue(+input.value); node.dispatchEvent(new CustomEvent('input', { detail: node.value })); }); // Updater function, allowing it to be bound node.renderValue = value => { node.value = +value; input.value = +value; }; node.renderValue(+input.value); return node; }3f:Tba5,function usMapProjection(stateGeometry) { let cache, cacheStream, lower48 = d3.geoAlbers(), lower48Point, point, pointStream = { point: function(x, y) { point = [x, y]; } }; const dx = 0.02, dy = -0.01, insets = makeInsetList(getInsetStates(stateGeometry)); function albersUsa(coordinates) { const x = coordinates[0], y = coordinates[1]; point = null; lower48Point.point(x, y); return insets.reduce((acc, cur) => acc || (cur.pt.point(x, y), point), point); } function reset() { cache = cacheStream = null; return albersUsa; } albersUsa.insets = () => [...insets]; albersUsa.invert = function (coordinates) { // Offset the xy and y coordinates by the lower48 offset to ensure the insert boxes capture the correct coords const k = lower48.scale(), t = lower48.translate(), x = (coordinates[0] - t[0]) / k + dx, y = (coordinates[1] - t[1]) / k + dy; for (let i = 0; i < insets.length; ++i) { const p = insets[i].projection, [[x0, y0], [x1, y1]] = insets[i].extent; if (y >= y0 && y < y1 && x >= x0 && x < x1) return p.invert(coordinates); } return lower48.invert(coordinates); }; albersUsa.stream = function (stream) { return cache && cacheStream === stream ? cache : cache = multiplex([ lower48.stream(cacheStream = stream), ...insets.map(p => p.projection.stream(stream)), ]); }; albersUsa.precision = function (_) { if (!arguments.length) return lower48.precision(); lower48.precision(_); insets.forEach(p => p.projection.precision(_)); return reset(); }; albersUsa.scale = function (_) { if (!arguments.length) return lower48.scale(); lower48.scale(_); insets.forEach(p => p.projection.scale(_ * p.scale)); return albersUsa.translate(lower48.translate()); }; albersUsa.translate = function (_) { // Set an offset on the lower48 to allow the states to move without affecting the overall projection // Offset should also be applied to the clip extent const k = lower48.scale(); if (!arguments.length) { const [tx, ty] = lower48.translate(); return [tx - dx * k, ty - dy * k]; }; const x = +_[0], y = +_[1]; lower48Point = lower48 .translate([x + dx * k, y + dy * k]) .clipExtent([[x - 0.4655 * k, y - 0.262 * k], [x + 0.4655 * k, y + 0.262 * k]]) .stream(pointStream); for (let i = 0; i < insets.length; ++i) { const p = insets[i].projection, [[x0, y0], [x1, y1]] = insets[i].extent, [tx, ty] = insets[i].translate; insets[i].pt = p .translate([x + tx * k, y + ty * k]) .clipExtent([[x + x0 * k + epsilon, y + y0 * k + epsilon], [x + x1 * k - epsilon, y + y1 * k - epsilon]]) .stream(pointStream); } return reset(); }; return albersUsa.scale(usMapScale).translate(usMapViewBox.map(d => d / 2)); }40:T5e0,projectionData = [ { id: 'AK', object: 'Alaska', type: 'state', fips: ['02'], projection: d3.geoConicEqualArea().rotate([154, 0]).center([-2, 58.5]).parallels([55, 65]), translate: [-0.337, 0.214], extent: [[-0.4655, 0.123], [-0.239, 0.262]], scale: 0.35, pt: undefined, }, { id: 'HI', object: 'Hawaii', type: 'state', fips: ['15'], projection: d3.geoConicEqualArea().rotate([157, 0]).center([-3, 19.9]).parallels([8, 18]), translate: [-0.225, 0.227], extent: [[-0.239, 0.169], [-0.127, 0.262]], scale: 1, pt: undefined, }, { id: 'PR-VI', object: 'Puerto Rico and US Virgin Islands', type: 'insular area', fips: ['72', '78'], projection: d3.geoConicEqualArea().rotate([66, 0]).center([0, 18]).parallels([8, 18]), translate: [0.350, 0.239], extent: [[0.310, 0.214], [0.385, 0.262]], scale: 1, pt: undefined, }, { id: 'AS', object: 'American Samoa', type: 'insular area', fips: ['60'], projection: d3.geoEquirectangular().rotate([173, 14]), translate: [-0.475, 0.098], extent: [[-0.4655, 0.083], [-0.390, 0.123]], scale: 1, pt: undefined, }, { id: 'GU-MP', object: 'Guam and Northern Mariana Islands', type: 'insular area', fips: ['66', '69'], projection: d3.geoEquirectangular().rotate([-145, -16.8]), translate: [-0.433, 0.011], extent: [[-0.4655, -0.037], [-0.390, 0.083]], scale: 1, pt: undefined, }, ]41:T5e5,// TODO: Do this with formula, and DRY on the coordinates // TODO: Add properties to enable filtering // TODO: When converted to package, merge with main topojson as additional object insetBorders = { const transform = bbToViewBox(usMapProjection([])); return { type: 'Topology', objects: { outlines: { type: 'GeometryCollection', geometries: [ { type: 'LineString', id: 'GU-MP', arcs: [0, -2], }, { type: 'LineString', id: 'AS', arcs: [1, 2, -4], }, { type: 'LineString', id: 'AK', arcs: [3, 4, 5], }, { type: 'LineString', id: 'HI', arcs: [-6, 5, 6], }, { type: 'LineString', id: 'PR-VI', arcs: [7], }, ], }, }, arcs: [ [[-0.4655, -0.037], [-0.39, -0.037], [-0.39, 0.083]].map(transform), [[-0.4655, 0.083], [-0.39, 0.083]].map(transform), [[-0.39, 0.083], [-0.39, 0.123]].map(transform), [[-0.4655, 0.123], [-0.39, 0.123]].map(transform), [[-0.39, 0.123], [-0.239, 0.123], [-0.239, 0.169]].map(transform), [[-0.239, 0.169], [-0.239, 0.262]].map(transform), [[-0.239, 0.169], [-0.127, 0.169], [-0.127, 0.262]].map(transform), [[0.310, 0.262], [0.310, 0.214], [0.385, 0.214], [0.385, 0.262]].map(transform), ], }; }42:T7df,/** * JS Implementation of MurmurHash3 (r136) (as of May 20, 2011) * * @author Gary Court * @see http://github.com/garycourt/murmurhash-js * @author Austin Appleby * @see http://sites.google.com/site/murmurhash/ * * @param {string} key ASCII only * @param {number} seed Positive integer only * @return {number} 32-bit positive integer hash */ function murmurhash3_32_gc(key, seed) { var remainder, bytes, h1, h1b, c1, c1b, c2, c2b, k1, i; remainder = key.length & 3; // key.length % 4 bytes = key.length - remainder; h1 = seed; c1 = 0xcc9e2d51; c2 = 0x1b873593; i = 0; while (i < bytes) { k1 = ((key.charCodeAt(i) & 0xff)) | ((key.charCodeAt(++i) & 0xff) << 8) | ((key.charCodeAt(++i) & 0xff) << 16) | ((key.charCodeAt(++i) & 0xff) << 24); ++i; k1 = ((((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16))) & 0xffffffff; k1 = (k1 << 15) | (k1 >>> 17); k1 = ((((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16))) & 0xffffffff; h1 ^= k1; h1 = (h1 << 13) | (h1 >>> 19); h1b = ((((h1 & 0xffff) * 5) + ((((h1 >>> 16) * 5) & 0xffff) << 16))) & 0xffffffff; h1 = (((h1b & 0xffff) + 0x6b64) + ((((h1b >>> 16) + 0xe654) & 0xffff) << 16)); } k1 = 0; switch (remainder) { case 3: k1 ^= (key.charCodeAt(i + 2) & 0xff) << 16; case 2: k1 ^= (key.charCodeAt(i + 1) & 0xff) << 8; case 1: k1 ^= (key.charCodeAt(i) & 0xff); k1 = (((k1 & 0xffff) * c1) + ((((k1 >>> 16) * c1) & 0xffff) << 16)) & 0xffffffff; k1 = (k1 << 15) | (k1 >>> 17); k1 = (((k1 & 0xffff) * c2) + ((((k1 >>> 16) * c2) & 0xffff) << 16)) & 0xffffffff; h1 ^= k1; } h1 ^= key.length; h1 ^= h1 >>> 16; h1 = (((h1 & 0xffff) * 0x85ebca6b) + ((((h1 >>> 16) * 0x85ebca6b) & 0xffff) << 16)) & 0xffffffff; h1 ^= h1 >>> 13; h1 = ((((h1 & 0xffff) * 0xc2b2ae35) + ((((h1 >>> 16) * 0xc2b2ae35) & 0xffff) << 16))) & 0xffffffff; h1 ^= h1 >>> 16; return h1 >>> 0; }43:T558,appendixBacklogSection = md` ## Appendix: Feature Backlog Build with a composable layer-based approach. - ✔ Basic layers for objects and border mesh at each level - ✔ Variable sizing - ✔ Projecting and inverting arbitrary points (then at any zoom/pan) - ✔ Zoom and pan (including scroll-to-zoom) - ✔ Zoom to feature bounding box - ✔ Zoom controls layer - ✔ Bindable with EventTarget/value/viewof - ✔ Control font size and stroke width on zoom (stroke done, do font size with labels) - ✔ Position stream behavior (current coordinate position on event) - ✔ Feature stream behavior (current feature id/data on event) - ✔ Data join with \`stateMetadata\` - ✔ Configurable projection with ability to render all insular areas (not just PR) - ✔ Outline layer for the inset boundaries in the projection - Enable merging of supplementary data into the feature - Pre-projected topojson including the state metadata and all insular areas (require to load data separately so user can choose state or county level) - Arbitrary scale function to allow scaling of font size, radius, width/height, etc. - Basic state labels (centroid positioned with any text) - Custom stlyes on the zoom's range element - Custom positioned state labels - State capitals layer - Major cities layer - Appear on zoom behavior (applies to any layer) *Mark as ✔ when done.* `44:[{"id":"c0fb09167b9461c87ed11ac92772ef278e190cf29424a5bb7025dea6836b4f93c50a891815ce3cdb4bcdb8153577ca51fdbbd439a6a18fa914eef4e3a3a3e6fc","href":"https://static.observableusercontent.com/files/c0fb09167b9461c87ed11ac92772ef278e190cf29424a5bb7025dea6836b4f93c50a891815ce3cdb4bcdb8153577ca51fdbbd439a6a18fa914eef4e3a3a3e6fc","name":"cdc-diabetes-obesity.csv","type":"text/csv","lastModified":1591558941919.869,"size":49043}] 31:{"id":"46d048ce53a26e0a","slug":"us-map","title":"US Map","thumbnail":"f1f7e272fe99b7d3366ec6db7af582ff817d520fe400749e8cd5f2c7ecc031e0","access_level":"public","create_time":"$D2020-05-13T15:23:26.630Z","update_time":"$D2020-12-08T05:48:14.396Z","view_time":null,"first_public_time":"$D2020-06-08T00:44:13.974Z","fork":false,"stars":20,"starred":false,"owner":{"type":"team","id":"ac1efc54e02edbcb","login":"bratter","name":"Brendan Ratter","avatar_url":"https://avatars-next.observableusercontent.com/72254c56b9894f2113524282297d982abcaaa6b50b1fb4d9e19658e6572e58d6","tier":"starter_2024"},"version":4569,"publish_version":4569,"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":28,"collection":null,"type":"notebook","body":{"title":"US Map","cells":[{"id":0,"value":"md`# US Map`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"md`\nUS Map tooling based on [@d3/u-s-map](https://observablehq.com/@d3/u-s-map) built with more \"heavyweight\" yet composable features for 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). Feature wish list also shown in the [backlog](#appendixBacklogSection) section.\n\nThe example map below demonstrates many of the features available, you can play with them using the control form underneath or by tweaking the code. Also shows projecting arbitrary points onto the map with LA and Chicago noted with dots.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3693,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3520,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4112,"value":"md`\nThe next example demonstrates two additonal features: (a) binding extra data into the features for use in choropleths, and (b) \"small multiples\" with the option for synchronized or independent zoom behavior.\n\nThis example uses post-selection to merge the extra data into the geojson feature using data from [@d3/bivariate-choropleth](https://observablehq.com/@d3/bivariate-choropleth).\n\nEventually a mechanism will be provided to easily merge data before creating the features, making the somewhat complex data merge step redundant.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4116,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4313,"value":"viewof choroState = form((() => {\n const baseClass = 'controlForm';\n const hash = mhash(`${baseClass}${new Date()}`);\n const hashClass = `${baseClass}_${hash}`;\n \n return html``})())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4193,"value":"// These scales are not a great visualization, but show how separate scales can be attached to separate maps\nscales = {\n const v = [...diabetesObesity.values()];\n return [\n d3.scaleSequential().domain(d3.extent(v, d => d[0])).interpolator(d3.interpolateBlues),\n d3.scaleSequential().domain(d3.extent(v, d => d[1])).interpolator(d3.interpolatePurples),\n ];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4153,"value":"diabetesObesity = Object.assign(new Map(d3.csvParse(await FileAttachment(\"cdc-diabetes-obesity.csv\").text(), ({county, diabetes, obesity}) => [county, [+diabetes, +obesity]])), {title: [\"Diabetes\", \"Obesity\"]})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2365,"value":"md`\n## Setup\n\n\\`usMap()\\` is a configurable HoF that sets up the wrapping element and data for a standard pre-projected US map.\n\nThe outer function takes one *filter* argument. Filter is a callback function applied to state and country objects in the pre-projected topojson that only preserves the features that pass the filter. Several premade filters are available (see [usMapFilters](#usMapFilters)) but custom ones can be used. The outer function then sets up the filtered topojson, the custom projection, and the custom geoPath for use elsewhere.\n\nThe returned inner function is invoked with a selection (which must be a selection of svg elements), then adds the viewBox, and turns the selection's nodes into bindable event targets, and returns a created inner group that should be used to wrap any features.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3054,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3208,"value":"// Filter callback runs on a topojson geometry object, so has type and arcs members (not useful), and id which is a FIPS code, and the properties (which are different for states and counties). Nation is not filtered by object just based on clipping in the projection.\nusMapFilters = ({\n all: d => true,\n states: d => +d.id.slice(0, 2) < 60,\n lower48: d => {\n const state = d.id.slice(0, 2);\n return +state < 60 && !['02', '15'].includes(state);\n },\n excludes: fips => d => !fips.includes(d.id),\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2374,"value":"md`\nThe \\`zoomble()\\` mixin takes an instance of a map container configurable function and makes it zoomable by adding \\`d3.zoom()\\` behaviors. The svg selection passed to the container becomes the zoom host, and the group returned by mapContainer (that can also be selected using \\`svg.select('g.usmap')\\`) recieves the transform.\n\nTherefore all elements inside the group get zoomed while anything appended to the svg directly remains as a static overlay.\n\nZoomable should be called as follows:\n\n~~~js\nconst map = zoomable(usMap());\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"$38","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"zoomableDefaults = ({\n duration: 250,\n ease: d3.easeCubic,\n extent: [[0, 0], usMapViewBox],\n scaleExtent: [1, 10],\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2346,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$3a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":118,"value":"nation = map => features(\n topojson.feature(map.topojson(), map.topojson().objects.nation).features,\n map.path(),\n 'nation',\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":85,"value":"states = map => features(\n topojson.feature(map.topojson(), map.topojson().objects.states).features,\n map.path(),\n 'state',\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":335,"value":"counties = map => features(\n topojson.feature(map.topojson(), map.topojson().objects.counties).features,\n map.path(),\n 'county',\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3863,"value":"outlines = map => {\n const feature = features([topojson.mesh(insetBorders, bordersFeature(map))], d3.geoPath(), 'outline');\n \n function outlines(selection) {\n return feature(selection).attr('pointer-events', 'none');\n }\n \n Object.assign(outlines, feature);\n \n outlines.width(0.5).fillScale().range(['none']);\n outlines.strokeScale().range(['#777777']);\n \n return outlines;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2269,"value":"// Scale the stroke with k on any feature/layer that has width() getter/setter\n// To avoid having the zoom event overwritten by subsequent calls, you should pass a unique name as the third argument \n// TODO: Is this API the best? Can we eliminate the zoomable from the outer function?\n// TODO: Could generalize by taking a getter/setter and a propoerty name as arguments to scale any property\nscaleStroke = (zoomable, feature, name) => Object.assign(selection => {\n const w = function () { return feature.width() / d3.zoomTransform(this).k };\n const f = feature(selection).attr('stroke-width', w);\n\n // Check that zoomable.on is a function so this does not error if the map is not zoomable\n if (typeof zoomable.on === 'function') {\n zoomable.on(`zoom.usmap-scaleStroke${name && `-${name}`}`, () => {\n f.each(function () { d3.select(this).attr('stroke-width', w) });\n });\n }\n\n return f;\n}, feature)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2128,"value":"behaviorsSection = md`\n## Behaviors\n\nFunctions to add various interactive behaviors to the main map or individual layers. Individual behaviors are higher order functions that take the container instance and a target element and return a function that optionally takes data as an argument. The inner function executes the behavior logic (most often a a zoom transform) based on the target element with data from the optional passed data and settings from the zoomable instance. \n\n\\`makeBehavior()\\` HoF provides the ability to create a behavior to easily add to a node or set of nodes. It's primarily used in the \\`mapContainer\\`, but can also be used standalone. The inner function creates and attaches an event handler when called on a selection, which will usually be done using \\`selection.call()\\`.\n\n\\`makeZoomHandler()\\` HoF converts a behavior (that can be called programatically) to an event handler function by stopping propagation and calling the behavior with the target set to the event's target.\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1077,"value":"// TODO: Should this have the ability to set a default value if it calls renderValue? O should this just be up to the caller?\n// Makes a behavior for easy additon to a set of nodes\nmakeBehavior = (zoomable, behavior, stopPropagation = false, type = null) => selection => selection.on(\n type || `click.${behavior.name || behavior.toString()}`,\n makeZoomHandler(zoomable, behavior, stopPropagation),\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"makeZoomHandler = (zoomable, fn, stopPropagation = false) => (...args) => {\n if (stopPropagation) d3.event.stopPropagation();\n fn(zoomable, d3.event.target)(...args);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2140,"value":"md`\nSeveral behavior functions are provided, most of which will only work if the container has the zoomable mixin:\n\n1. \\`positionStream\\`: Streams the mouse position in map coordinates based on the event used to attach.\n1. \\`featureStream\\`: Streams the id and properties of the curent feature based on the event used to attach.\n1. \\`zoomReset\\`: Resets the transform to the identity transform.\n1. \\`zoomToFeature\\`: Sets the transform to center and zoom to the geojson feature passed as data.\n1. \\`zoomtoLevel\\`: Sets the scale on the transform to the passed data value.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2154,"value":"positionStream = (container, target) => () => {\n const host = target.closest('svg.usMap');\n const mouse = d3.mouse(host.querySelector('g.usMap'));\n \n host.renderValue({ position: container.projection().invert(mouse) });\n host.dispatchEvent(new CustomEvent('input'));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2404,"value":"// TODO: Should this have an unstream also to remove if attached to mouseout?\n// TODO: In a general implementation, this should probably be added as a custom event to the 'on' handler\nfeatureStream = (container, target) => () => {\n const host = target.closest('svg.usMap');\n const d = d3.select(target).datum();\n \n host.renderValue({ feature: { id: d.id, properties: { ...d.properties } } });\n host.dispatchEvent(new CustomEvent('input'));\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"// TODO: how to cancel? this is in the reset above, but shouldn't be... \n// selection.on('click.zoomReset', null);\nzoomReset = (zoomable, target) => () => {\n const host = target.closest('svg.usMap');\n const [w, h] = usMapViewBox;\n \n getTransition(zoomable, host).call(\n zoomable.transform,\n d3.zoomIdentity,\n d3.zoomTransform(host).invert([w / 2, h / 2]),\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":624,"value":"// TODO: Constrain the translation to the translate extent of the zoomable\nzoomToFeature = (zoomable, target) => () => {\n const host = target.closest('svg.usMap');\n const [zoomMin, zoomMax] = zoomable.scaleExtent();\n const [[x0, y0], [x1, y1]] = zoomable.path().bounds(d3.select(target).datum());\n const [w, h] = usMapViewBox;\n \n getTransition(zoomable, host).call(\n zoomable.transform,\n d3.zoomIdentity\n .translate(w / 2, h / 2)\n .scale(Math.min(zoomMax, 0.9 / Math.max((x1 - x0) / w, (y1 - y0) / h)))\n .translate(-(x0 + x1) / 2, -(y0 + y1) / 2),\n d3.mouse(host),\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":667,"value":"// TODO: Center on the current position during zoom\nzoomToLevel = (zoomable, target) => level => {\n const host = target.closest('svg.usMap');\n const extent = zoomable.scaleExtent()\n const constrainedLevel = Math.max(Math.min(level, Math.max(extent[1])), extent[0])\n \n // Do nothing if the current zoom level is the same as the new zoom level\n if (d3.zoomTransform(host).k === constrainedLevel) return;\n \n getTransition(zoomable, host).call(zoomable.scaleTo, constrainedLevel);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2132,"value":"md`\nHelper function to return a transition if it exists on the \\`zoomable\\`, or a selection otherwise.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":697,"value":"getTransition = (zoomable, host) => Number.isFinite(zoomable.duration())\n ? d3.select(host).transition().duration(zoomable.duration()).ease(zoomable.ease())\n : d3.select(host)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1849,"value":"$3b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1970,"value":"md`\n#### Example\nThe \\`zoomLayer\\` is shown in the main example above, a standalone \\`zoomControls\\` instance is below. You can see its value here:\n\n~~~js\nvalue = ${zcExample.toFixed(2)}\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1954,"value":"viewof zcExample = zoomControls({ vertical: false })","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2009,"value":"// TODO: Size and position (incl. slider vanishing below a certain height and not scaling with viewport)\nzoomLayer = (zoomable, container) => {\n const controls = zoomControls();\n const ztl = zoomToLevel(zoomable, container);\n const [,, x] = container.getAttribute('viewBox').split(',');\n const w = 50;\n const fo = svg`\n

${controls}

\n `;\n \n // Block event propagation when inside the foreign object\n ['click', 'dblclick', 'mousedown'].forEach(type => fo.addEventListener(type, e => e.stopPropagation()));\n \n // Adjust the transform on the zoomable and listen for transform changes\n zoomable.on('zoom.controls', () => controls.renderValue(d3.event.transform.k));\n controls.addEventListener('input', () => ztl(controls.value));\n \n return fo;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"$3c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1919,"value":"simpleMeshLayersSection = md`\n## Simple Mesh Layers\n\nNation, State and County layers that produce a single merged path for all features in the collection. These layers are for flat representation, not interactivity. All are provided with default stroke options that can be modified. The \\`nationMesh\\` can also be filled if required. \n\n~~~js\n// TODO: Document method signatures (incl. attributes and border controls)\n~~~\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":510,"value":"// TODO: Is the parameter ordering the best? Have the attrs in variable position and needs padding if not setting the others\n// TODO: Make a simple d3-free wrapper to allow easy injection of these layers\n{\n const margin = 10,\n width = 300,\n parent = d3.create('svg').attr('viewBox', '0 0 930 210'),\n container = usMap().size({ width }),\n // Increase stroke-width for easier visibility when shrunk\n maps = [\n nationMesh(container, { 'stroke-width': 2 }),\n stateMesh(container, true, { 'stroke-width': 1.5 }),\n countyMesh(container, true, true, { 'stroke-width': 2 }),\n ]\n \n parent\n .selectAll('g')\n .data(maps)\n .join('g')\n .attr('transform', (d, i) => `translate(${margin + width * i}, 0)`)\n .append('svg')\n .each(function (d, i) { d3.select(this).call(container).append(d) })\n \n return parent.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":209,"value":"nationMesh = (map, attrs = {}) => () => {\n const defaultAttrs = {\n className: 'nation mesh',\n fill: 'none',\n stroke: '#202020',\n 'stroke-width': 1,\n 'pointer-events': 'none',\n }\n \n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":170,"value":"stateMesh = (map, includeNation = false, attrs = {}) => () => {\n const defaultAttrs = {\n className: 'state mesh',\n fill: 'none',\n stroke: '#202020',\n 'stroke-width': 0.5,\n 'pointer-events': 'none',\n }\n \n return svg` a !== b))\n )}\">\"`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":195,"value":"countyMesh = (map, includeNation = false, includeState = false, attrs = {}) => () => {\n const meshCondition = (a, b) =>\n (includeNation || a !== b)\n && (includeState || (a.id / 1000 | 0) === (b.id / 1000 | 0))\n \n const defaultAttrs = {\n className: 'county mesh',\n fill: 'none',\n stroke: '#aaaaaa',\n 'stroke-width': 0.5,\n 'pointer-events': 'none',\n }\n \n return svg``\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2429,"value":"md`\n## Projection\n\nBuilding a custom (and customizeable) projection to optionally incorporate insular areas into the standard Albers projection. The \\`usMapProjection()\\` function can be invoked directly with an array of state FIPS codes (as strings), but will most likely just be called from the \\`map\\` container as \\`map.projection()\\`. The FIPS code array governs what areas are rendered on the map.\n\nThe usMapViewbox constant with the dimension [width, height] of the projection's required viewbox.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3855,"value":"bordersFeature = map => {\n const objs = map.projection().insets().map(d => d.id);\n \n return {\n ...insetBorders.objects.outlines,\n geometries: insetBorders.objects.outlines.geometries.filter(d => objs.includes(d.id))\n };\n }","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3057,"value":"// Constant dimensions for the projection's viewbox (16:9 aspect ratio)\nusMapViewBox = [1024, 576]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3488,"value":"md`\nThe remaining methods and constants are intermediate functions used to generate the projection and will not be used directly.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2538,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"usMapScale = 1100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"epsilon = 1e-6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2470,"value":"function multiplex(streams) {\n return {\n point(x, y) { for (const s of streams) s.point(x, y); },\n sphere() { for (const s of streams) s.sphere(); },\n lineStart() { for (const s of streams) s.lineStart(); },\n lineEnd() { for (const s of streams) s.lineEnd(); },\n polygonStart() { for (const s of streams) s.polygonStart(); },\n polygonEnd() { for (const s of streams) s.polygonEnd(); }\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3283,"value":"topojsonFilter = filter => ({\n ...usData,\n objects: {\n ...usData.objects,\n states: {\n ...usData.objects.states,\n geometries: usData.objects.states.geometries.filter(filter),\n },\n counties: {\n ...usData.objects.counties,\n geometries: usData.objects.counties.geometries.filter(filter),\n },\n }\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3243,"value":"getInsetStates = filteredStates => filteredStates.reduce((acc, id) => {\n if (id === '02' || id === '15' || +id >= 60) acc.push(id);\n return acc;\n}, []) ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3255,"value":"makeInsetList = insetStates => projectionData\n .filter(d => insetStates.some(v => d.fips.includes(v)))\n .map(d => ({ ...d }));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2434,"value":"md`\nTo build the projected dataset, start with raw, unprojected US topojson for experimenting with projections and State metadata import for joining to the state objects. Eventually a pre-projected version will be made available independently and loaded with the usMap, so will not need to be built on the fly.\n\nThe best way to make these projections is probably to fork us-atlas and build from scratch, rather than trying to project the unprojected topojson.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2432,"value":"usRaw = d3.json(\"https://cdn.jsdelivr.net/npm/us-atlas@3/counties-10m.json\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2437,"value":"import { stateMetadata } from '@bratter/us-state-metadata'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2441,"value":"usData = {\n const meta = new Map(stateMetadata.map(d => [d.fips, d]));\n const states = usRaw.objects.states.geometries.map(d => ({ ...d, properties: { ...meta.get(d.id) } }));\n const counties = usRaw.objects.counties.geometries.map(d => {\n const state = meta.get(d.id.slice(0,2));\n return {\n ...d,\n properties: {\n name: d.properties.name,\n state: state.code,\n label: `${d.properties.name}, ${state.code}`,\n fips: d.id,\n }\n };\n });\n \n return { ...usRaw, objects: {\n ...usRaw.objects,\n states: { type: 'GeometryCollection', geometries: states },\n counties: { type: 'GeometryCollection', geometries: counties }, \n } };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3742,"value":"bbToViewBox = proj => ([x, y]) => {\n const k = proj.scale(), [dx, dy] = proj.translate();\n return [x * k + dx, y * k + dy];\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3744,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1858,"value":"md`\n## Appendix: Imports and Utilities\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1865,"value":"// Utility function to merge two sets of attributes passed as an object or any form of Key: value iterator.\n// Separately manages and merges classes into a list.\nmergeAttr = (defaultAttrs = {}, attrs = {}) => {\n const map = new Map(\n defaultAttrs[Symbol.iterator] ? Array.from(defaultAttrs) : Object.entries(defaultAttrs)\n );\n const classItemNames = ['class', 'className', 'classList'];\n const classList = classItemNames.reduce((acc, cur) => acc.concat(valueArray(map.get(cur))), []);\n \n (attrs[Symbol.iterator] ? Array.from(attrs) : Object.entries(attrs))\n .forEach(([k, v]) => {\n if (classItemNames.includes(k)) return classList.push(...valueArray(v));\n map.set(k, v);\n });\n \n const str = [...map].reduce((str, [k, v]) => {\n if (classItemNames.includes(k)) return str;\n return `${str} ${k}=\"${v}\"`;\n }, '');\n \n return `${classList.length ? `class=\"${classList.join(' ')}\"` : ''}${str}`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1875,"value":"valueArray = (val) => val === undefined || val === null ? [] \n : Array.isArray(val) ? val \n : (typeof val === 'string') ? val.split(' ')\n : [];","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1232,"value":"// TODO: Document this\nmhash = str => murmurhash3_32_gc(`${str}${new Date()}${Math.random()}`, 'usmap').toString(32)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"import { assignAllMethods } from '@bratter/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3508,"value":"import { View, bindContainer, boundForm, form } from '@bratter/form-input'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2386,"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":"$W44","stdlib":"1","titling":"auto"}} 32:"$31:body"