25:["$","title",null,{"children":"US Map edited | Isaac Kisker's Workspace | Observable"}] 49:Taaa,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]); const slay = svg .append("g") .selectAll("circle") .data(bikes) .enter() .append("circle") .attr("class", "stop") .attr("cx", (d) => map.projection([d.start_lng, d.start_lat])[0]) .attr("cy", (d) => map.projection([d.start_lng, d.start_lat])[1]) .attr("r", 5) .style("fill", "blue"); // Set the initial data node.renderValue({ position: map.projection().invert([0, 0]), feature: { id: null, properties: null }, }); return svg.node(); }4a: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' }

` }4b:T8f2,viewof state = form((() => { const baseClass = 'controlForm'; const hash = mhash(`${baseClass}${new Date()}`); const hashClass = `${baseClass}_${hash}`; return html``})())4c: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; }4d: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; }4e:T801,// 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))); g //.selectAll("circle") .data(bikes) .enter() //.append("circle") .attr("class", "stop") .attr("cx", (d) => map.featureprojection([d.start_lng, d.start_lat])[0]) .attr("cy", (d) => map.projection([d.start_lng, d.start_lat])[1]) .attr("r", 5) .style("fill", "blue"); 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; } 4f: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; }50: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; }51: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; }52: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)); }53: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, }, ]54: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), ], }; }55: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; }56: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.* `57:[{"id":"8e0535cb30ce5d88853605aa4f40d06d81de1a19ae3688b5b055303732f1d5b6d9342c1200f28d8401ef4904a428764ae6cd417124bb287c57616fb4751e7788","href":"https://static.observableusercontent.com/files/8e0535cb30ce5d88853605aa4f40d06d81de1a19ae3688b5b055303732f1d5b6d9342c1200f28d8401ef4904a428764ae6cd417124bb287c57616fb4751e7788","name":"JC-202309-citibike-tripdata.csv","type":"text/csv","lastModified":1698688935148.237,"size":19693695}] 29:{"id":"dcfd641876114e0d","slug":null,"title":"US Map edited","thumbnail":"e9a67101509214fa4bac0d9c738c77bab717dfce5acd72b36a70c2a57b0f1558","access_level":"public","create_time":"$D2023-10-29T18:40:13.754Z","update_time":"$D2023-11-03T20:05:15.547Z","view_time":null,"first_public_time":"$D2023-10-29T18:40:13.754Z","has_unpublished_edits":null,"fork":{"id":"46d048ce53a26e0a","slug":"us-map","title":"US Map","owner":{"id":"ac1efc54e02edbcb","login":"bratter","name":"Brendan Ratter"}},"stars":0,"starred":false,"owner":{"type":"team","id":"33bc90254553ee44","login":"isaac-kisker-ws","name":"Isaac Kisker's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/af476018cc679b0480e4b3c1d3ee024757439918432322179e725594d2c8a880","tier":"starter_2024","bio":"","following":false},"version":4600,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9e502139a4e7c755","login":"isaac-kisker","name":"Isaac Kisker","avatar_url":"https://avatars-next.observableusercontent.com/a72eff3e79b4661c1f4802e2e0e484aed1cf0b2fde42067c8c0eac4e8109a832","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"9e502139a4e7c755","login":"isaac-kisker","name":"Isaac Kisker","avatar_url":"https://avatars-next.observableusercontent.com/a72eff3e79b4661c1f4802e2e0e484aed1cf0b2fde42067c8c0eac4e8109a832","tier":null,"role":"editor"},{"type":"team","id":"33bc90254553ee44","login":"isaac-kisker-ws","name":"Isaac Kisker's Workspace","avatar_url":"https://avatars-next.observableusercontent.com/af476018cc679b0480e4b3c1d3ee024757439918432322179e725594d2c8a880","tier":"starter_2024","role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"US Map edited","cells":[{"id":0,"value":"md`# US Map edited`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4588,"value":"bikes = FileAttachment(\"JC-202309-citibike-tripdata.csv\").csv() ","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":47,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3693,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3520,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3054,"value":"$4c","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":820,"value":"$4d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":357,"value":"$4e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1706,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1571,"value":"$50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1640,"value":"$51","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2477,"value":"$52","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2538,"value":"$53","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3060,"value":"usMapScale = 1100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2474,"value":"epsilon = 1e-6","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3744,"value":"$54","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"$55","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":974,"value":"import { assignAllMethods } from '@bratter/data-utilities'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":80,"value":"topojson = require(\"topojson-client@3\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"$56","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W57","stdlib":"1"}} 24:null