34:["$","title",null,{"children":"Voronoi Treemap of Trees (+ orthographic world map) | kafunk | Observable"}] 3c:T1626,### Some Context As a lover of words, nature, and data visualization, I embarked on this endeavor wanting to satisfy a longterm itch to make a [treemap](https://observablehq.com/@d3/treemap) of trees. The [voronoi](https://www.jasondavies.com/voronoi-treemap/) approach was appealing to me because the non-rectangular, morphologically cellular structure resonates with the organic subject matter at hand. My affinity for citizen science and the employment of web-based technology as a driver of knowledge and community led me to use [iNaturalist](https://www.inaturalist.org/)'s API as a data source. My love of maps inspired me to pair the voronoi treemap with a geographic map and set of user-manageable options that allow visitors to limit the visualized data to a location meaningful to them while also illuminating the individually-observed trees where they exist in the world, literally rooted in physical space. #### Reaching toward a definition In order to structure the iNaturalist query that drives this notebook, I needed to provide a list of specific taxonomic IDs that would effectively filter my results to include only observations of trees. Initially, I naively imagined that a quick Google search would lead me to a short list of [taxonomic](https://en.wikipedia.org/wiki/Taxonomic_rank) classes, orders, and *maybe* families representing the 'tree' branch of life and collectively surmising a comprehensive grouping of tree and only tree species. The reality was much more surprising, challenging, and complex. As it turns out, trees are taxonomically tricky. Wikipedia [states it plainly](https://en.wikipedia.org/wiki/Tree): "[t]rees are not a monophyletic taxonomic group but consist of a wide variety of plant species that have independently evolved a trunk and branches as a way to tower above other plants to compete for sunlight." From what I can gather, the most specific taxonomic grouping shared by all trees is the phylum of [Tracheophyta](https://en.wikipedia.org/wiki/Vascular_plant), or vascular plants -- a category that includes just about every plant excepting algaes, mosses, liverworts, and hornworts. Although most trees are [angiosperms](https://en.wikipedia.org/wiki/Flowering_plant) or [gymnosperms](https://en.wikipedia.org/wiki/Gymnosperm) (with the exception of [tree ferns](https://en.wikipedia.org/wiki/Tree_fern)! what), these categories remained far too generous to meaningfully narrow down my iNaturalist filter, as they encompass *all* living, seed-producing plants including many shrubs, [lianas](https://en.wikipedia.org/wiki/Liana), [cycads](https://en.wikipedia.org/wiki/Cycad), etc. That is, ["[o]n the evolutionary tree of plants, trees are regularly interspersed with things that are absolutely, 100% not trees."](https://eukaryotewritesblog.com/2021/05/02/theres-no-such-thing-as-a-tree/) Not only are trees hard to pin down taxonomically, they are hard to define in the first place. Again [per Wikipedia](https://en.wikipedia.org/wiki/Tree): "Although "tree" is a term of common parlance, there is no universally recognised precise definition of what a tree is, either botanically or in common language. In its broadest sense, a tree is any plant with the general form of an elongated stem, or trunk, which supports the photosynthetic leaves or branches at some distance above the ground." There is apparently ambiguity around what *"some distance above the ground"* means and no strictly accepted minimum height a plant must reach distinguish it as a tree. There is also debate around whether otherwise tree-like plants must have woody trunks that thicken in diameter through regular secondary growth (the kind that sometimes but not always form annual tree rings) in order to qualify as true trees -- a narrower definition that excludes many commonly-considered trees such as the Joshua tree, all palm trees, banana trees, and more. Given this fundamental inconclusiveness, it is no surprise that iNaturalist does not offer any simple flag that can be used to filter for trees at the exclusion their non-tree taxonomic siblings. In the end, I decided to philosophically embrace the fact that a tree is simply not what I thought it was. A tree is not a cohesive categorical thing with definitive physical characteristics, much less ones of common evolutionary origin. Rather, [a tree is an evolutionary strategy](https://eukaryotewritesblog.com/2021/05/02/theres-no-such-thing-as-a-tree/), a way of being that plant life has repeatedly, independently happened upon across vast time and space in its drive to grow, survive, and make more of itself. It's actually a pretty awesome realization, and I have been looking at these bold, reaching forms that speckle my neighborhood with new appreciation on recent morning walks. For the purposes of this notebook, I somewhat arbitrarily moved forward by using Wikipedia's [List of tree genera](https://en.wikipedia.org/wiki/List_of_tree_genera) article as a generic, generally acceptable source of truth -- while also making a point to qualify this choice with the above context and caveats. Specifically, I cobbled together a list of taxon IDs by cross-referencing the iNaturalist API taxa metadata at `s3://inaturalist-open-data/taxa.csv.gz` against the tree genera listed within the aforementioned article. Depending on your definition of a tree, this list is no doubt imperfect -- likely overgenerous in places and incomplete in others -- but then again, it doesn't seem that a perfect list is even possible. (See the `taxonIdsString` constant further down in this notebook for the final list that is used as a common filter within each API query.) ---3d:T19a0,treemap = { const maxDepth = observation_hierarchy.height const defaultLabelOpacity = (d) => d.depth == 1 && d.value > 2 ? 1 : 0; const treemapContainer = d3.select( html`

${treemapStyles}

` ); const svg = treemapContainer.append("svg") .attr("id", "treemap") .attr("viewBox", [0, 0, width + margin.left + margin.right, height + margin.top + margin.bottom]); // define svg groups const voronoi = svg.append("g").attr("transform", `translate(${(margin.left + margin.right) / 2},${(margin.top + margin.bottom) / 2})`); const cat_labels = svg.append("g").attr("transform", `translate(${(margin.left + margin.right) / 2},${(margin.top + margin.bottom) / 2})`); const value_labels = svg.append("g").attr("transform", `translate(${(margin.left + margin.right) / 2},${(margin.top + margin.bottom) / 2})`); // initialize voronoi treemap // let seed = new Math.seedrandom(20); let voronoiTreeMap = d3.voronoiTreemap() // .prng(seed) .clip(ellipse); voronoiTreeMap(observation_hierarchy); colorHierarchy(observation_hierarchy); // sort and massage data before rendering let allNodes = observation_hierarchy.descendants() .sort((a, b) => b.depth - a.depth) .map((d, i) => Object.assign({}, d, {id: d.data.id || i})); voronoi.selectAll('path') .data(allNodes, d => d.id) .enter().append('path') .attr("id", d => `voronoi-cell-${d.id}`) .attr('d', d => "M" + d.polygon.join("L") + "Z") .attr('class', d => `voronoi-cell voronoi-cell-${d.depth} ${d.depth < maxDepth ? asClassName(d.data.key) : ''} ${d.depth > 1 ? asClassName(d.parent.data.key) : ''} ${d.depth > 2 ? asClassName(d.parent.parent.data.key) : ''}`) .property('cell-rank', d => `${asClassName(d.data.key || d.parent.data.key)}`) .attr('fill', d => d.parent?.color || d.color) // initial .attr("stroke", d => d.depth == 0 ? "purple" : "#F5F5F2") .attr("stroke-opacity", d => d.depth == 0 ? 1 : 0.9) .attr("stroke-width", d => d.depth == 0 ? 5 : 0) // initial .property("orig-stroke-width", d => d.depth == 0 ? 5 : (maxDepth * 3 + 1) - d.depth * 3) .style('fill-opacity', d => d.depth == maxDepth ? 0.8 : 0) .property("orig-fill-opacity", d => d.depth == maxDepth ? 0.8 : 0) .attr('pointer-events', d => d.depth === maxDepth - 1 ? 'all' : 'none') .on('mouseenter', function (event, d) { const cell = d3.select(this) const cellRank = cell.property("cell-rank") // add visual affordance to hovered cell (will only ever be cells of depth 1 as long as pointer-events are limited to same) cell.attr("stroke-opacity", 1) cell.attr("stroke-width", cell.property("orig-stroke-width") * 2.5) // add visual affordances to hovered cell children? const children = d3.selectAll(`.voronoi-cell.${cellRank}.voronoi-cell-${maxDepth}`) children.style('fill-opacity', 1) // highlight associated observations on geomap const assocObservations = d3.selectAll(`.observation.${cellRank}`) assocObservations .attr("fill", "tomato") .attr("opacity", 1) // temp hide parent cell labels to avoid overlap cat_labels.select(`.cat_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', 0) value_labels.select(`.value_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', 0) // bring labels into full opacity cat_labels.select(`.cat_label-${d.id}`).attr('opacity', 1) value_labels.select(`.value_label-${d.id}`).attr('opacity', 1) }) .on('mouseleave', function (event, d) { const cell = d3.select(this) const cellRank = cell.property("cell-rank") // reset visual affordances on cell cell.attr("stroke-opacity", 0.9) cell.attr("stroke-width", cell.property("orig-stroke-width")) // reset visual affordances on cell children? const children = d3.selectAll(`.voronoi-cell.${cellRank}.voronoi-cell-${maxDepth}`) children.style('fill-opacity', 0.8) // reset associated observations on geomap const assocObservations = d3.selectAll(`.observation.${cellRank}`) assocObservations .attr("fill", function() { return d3.select(this).property("orig-fill") }) .attr("opacity",0.8) // reset labels cat_labels.select(`.cat_label-${d.id}`).attr('opacity', defaultLabelOpacity) value_labels.select(`.value_label-${d.id}`).attr('opacity', defaultLabelOpacity) // restore parent cell labels cat_labels.select(`.cat_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', defaultLabelOpacity) value_labels.select(`.value_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', defaultLabelOpacity) }) .transition().duration(3000) .attr("stroke-width", d => d.depth == 0 ? 5 : (maxDepth * 3 + 1) - d.depth * 3) .attr('fill', d => d.color); cat_labels.selectAll('text') .data(allNodes.filter(d => d.depth > 0 ), d => d.id) .enter().append('text') .attr('class', d => `cat_label-${d.id} cat_label-${asClassName(d.data.key || d.parent.data.key)}-${d.depth}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y + 6]+")") .text(d => d.data.key || d.parent.data.key) .attr('cursor', 'default') .attr('pointer-events', 'none') .attr('fill', 'black') .attr('opacity', defaultLabelOpacity) .style('font-size', d => d.depth == 1 ? '32px' : '24px') .style('font-family', 'Montserrat') .style('font-weight', 'bold') value_labels.selectAll('text') .data(allNodes.filter(d => d.depth > 0 ), d => d.id) .enter().append('text') .attr('class', d => `value_label-${d.id} value_label-${asClassName(d.data.key || d.parent.data.key)}-${d.depth}`) .attr('text-anchor', 'middle') .attr("transform", d => "translate("+[d.polygon.site.x, d.polygon.site.y + (d.depth == 1 ? 40 : 30)]+")") .text(d => d.value) .attr('cursor', 'default') .attr('pointer-events', 'none') .attr('fill', 'black') .attr('opacity', defaultLabelOpacity) .style('font-size', d => d.depth == 1 ? '24px' : '18px') .style('font-family', 'Montserrat') .style('font-weight', 'bold') return treemapContainer.node(); }3e:T31f0,geomap = { const initialLngLat = [-60, 45] const initialRotate = [-initialLngLat[0], -initialLngLat[1], 0] const projection = d3.geoOrthographic() .rotate(initialRotate) .fitWidth(width, sphere) .precision(0.1) const path = d3.geoPath().projection(projection) const dummyProjection = d3.geoOrthographic() .rotate(initialRotate) .fitWidth(width, sphere) .precision(0.1) const dummyPath = d3.geoPath().projection(dummyProjection) const initialScale = projection.scale() const maxScale = initialScale * maxScaleFactor const sphereStrokeWidth = 2; const widthAdjust = margin.left + margin.right + (sphereStrokeWidth * 2); const heightAdjust = margin.top + margin.bottom + (sphereStrokeWidth * 2); const obsR = d3.scaleLinear() .domain([initialScale,maxScale]) .range([3,12]) const poiD = d3.scaleLinear() .domain([initialScale,maxScale]) .range([25,50]) // 0.5 * radius + 40? const poiOffsetFactor = d3.scaleLinear() .domain([initialScale,maxScale]) .range([-0.5, 0]) // 0.5 * radius + 40? let zoomedPolygonId; // define basic map containers const mapContainer = d3.select( html`

${mapStyles} ${tooltipTemplate}

` ); const tooltipContainer = mapContainer.select("#tooltip"); const svg = mapContainer.append("svg") .attr("id", "geomap") .attr("viewBox", [0, 0, width + widthAdjust, height + heightAdjust]) .on("click", reset); // define svg groups const g = svg.append("g") .attr("id", "zoomable") .attr("transform", `translate(${widthAdjust / 2}, ${heightAdjust / 2})`) const baseLayers = g.append("g").attr("id", "baselayers") const featureLayers = g.append("g").attr("id", "featurelayers") const observations = featureLayers.append("g").attr("id", "observations") // draw base layers in order of desired rendering, from bottom => top baseLayers.append("path") .datum(sphere) .attr("id", "sphere-fill") .attr("stroke", "none") .attr("fill", "teal") .attr("fill-opacity", 0.6) .attr("d", path) baseLayers.append("path") .datum(graticule) .attr("id", "graticule") .attr("stroke", "yellowgreen") .attr("fill", "none") .attr("stroke-opacity",1) .attr("stroke-width",3) .attr("stroke-linejoin", "round") .attr("d", path) baseLayers.append("path") .datum(land50m) .attr("id", "land50m") .attr("stroke", "magenta") .attr("fill", "lightgrey") .attr("opacity", 0.9) .attr("stroke-opacity",0.9) .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("d", path) baseLayers.append("path") .datum(countries50mMeshInner) .attr("id", "country-borders-inner") .attr("d", path) .attr("opacity", 1) .attr("fill", "none") .attr("stroke", "hotpink") .attr("stroke-opacity", 0.9) .attr("stroke-linejoin", "round") .attr("stroke-width", 3) baseLayers.append("path") .datum(sphere) .attr("id", "sphere-stroke") .attr("stroke", "purple") .attr("fill", "none") .attr("stroke-width", sphereStrokeWidth) .attr("stroke-linejoin", "round") .attr("stroke-opacity", 1) .attr("d", path) baseLayers.selectAll("path.state") .data(usStates.features.filter(conterminousOnly), d => d.id) .enter().append("path") .attr("class", "state") .attr("d", path) .attr("fill", "whitesmoke") // "#E8E8E8") .attr("stroke", "lightcoral") .attr("stroke-linejoin", "round") .attr("stroke-width", 2) .attr("stroke-dasharray", "0.4 0.1 0.4 0.2") // store above group of paths for later use const adminPaths = baseLayers.selectAll("path") // draw represented POI and corresponding radius const poiIcon = featureLayers.append("use") .attr("xlink:href", "#star-icon") .attr("width", poiD(initialScale)) .attr("height", poiD(initialScale)) .attr("x", poiD(initialScale) * poiOffsetFactor(initialScale)) .attr("y", poiD(initialScale) * poiOffsetFactor(initialScale)) .attr('transform', `translate(${projection(lngLat)})`) .attr("fill", "purple") .attr("stroke", "black") .attr("stroke-width", 36) .attr("stroke-linejoin", "round") .attr("opacity", 1) const poiRadius = featureLayers.append("path") .datum(radiusPolygon) .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 2) .attr("stroke-linejoin", "round") .attr("d", path) // draw observations const observationPoints = observations.selectAll("circle.observation") .data(activeData, d => d.id) .enter().append("circle") .attr("id", d => `observation-${d.id}`) .attr("class", d => `observation ${asClassName(d[groupByRank])} ${asClassName(d.species)}`) .property('observation-rank', d => `${asClassName(d[groupByRank])}`) .property('observation-species', d => `${asClassName(d.species)}`) .attr("r", obsR(initialScale)) .attr("cx", d => projection(d.geojson.coordinates)[0]) .attr("cy", d => projection(d.geojson.coordinates)[1]) .attr("fill", d => colorMap.get(d[groupByRank])) .attr("stroke", "black") .attr("stroke-opacity", 0.8) .attr("stroke-width", "0.01px") .attr("opacity", 0.8) .property("orig-opacity", 0.8) .property("orig-fill", d => colorMap.get(d[groupByRank])) .property("orig-stroke", "black") .property("orig-stroke-opacity", 0.8) .property("species", d => d.species || d.name) .property("genus", d => d.genus) .property("family", d => d.family) .property("order", d => d.order) .property("class", d => d.class) .property("phylum", d => d.phylum) .on("mouseover.highlight-assoc", function(event, d) { // highlight single cell const assocCell = d3.select(`#voronoi-cell-${d.id}`) assocCell .attr("fill","tomato") .style('fill-opacity', 1) .attr("stroke", "magenta") .attr("stroke-opacity", 1) .attr("stroke-width", function() { const selection = d3.select(this); return selection.property("orig-stroke-width") * 2.5; }) // highlight cell group? // const observation = d3.select(this) // const observationSpecies = observation.property("observation-species") // const assocCells = d3.selectAll(`.voronoi-cell.${observationSpecies}.voronoi-cell-${maxDepth}`) // assocCells // .attr("stroke-opacity", 1) // .attr("stroke-width", function() { // const selection = d3.select(this); // return selection.property("orig-stroke-width") * 2.5; // }) // .style('fill-opacity', 1) }) .on('mouseleave.highlight-assoc', function (event, d) { // reset single cell const assocCell = d3.select(`#voronoi-cell-${d.id}`) assocCell .attr("fill", d => d.color) .style('fill-opacity', function() { const selection = d3.select(this); return selection.property("orig-fill-opacity") }) .attr("stroke", "#F5F5F2") .attr("stroke-opacity", 0.9) .attr("stroke-width", function() { const selection = d3.select(this); return selection.property("orig-stroke-width"); }) // reset cell group? // const observation = d3.select(this) // const observationSpecies = observation.property("observation-species") // const assocCells = d3.selectAll(`.voronoi-cell.${observationSpecies}.voronoi-cell-${maxDepth}`) // assocCells // .attr("stroke-opacity", 0.9) // .attr("stroke-width", function() { // const selection = d3.select(this); // return selection.property("orig-stroke-width") // }) // .style('fill-opacity', function() { // const selection = d3.select(this); // return selection.property("orig-fill-opacity") // }) }) .call(tooltip, tooltipContainer, mapContainer) svg.call(zoomAndDrag(projection, { initialScale }) .on("zoom.rerender", rerender)) // zoom to initial radius zoomToPolygon(radiusPolygon, 2000); // 500); function reset() { // actual behavior of reset depends on currently zoomed polygon if (zoomedPolygonId == "land") { zoomToPolygon(radiusPolygon, 2000) // 500) } else { zoomToPolygon(land50m) } } function zoomToPolygon(polygon, duration = 2000) { // with some help from https://stackoverflow.com/questions/45595422/d3-world-map-with-country-click-and-zoom-almost-working-not-quite/45604307#45604307 // store polygon id for reset management purposes zoomedPolygonId = polygon?.properties?.id; // store the current rotation and scale: const currentRotate = projection.rotate(); const currentScale = projection.scale(); // get centroid of target polygon (if radiusPolygon was passed, this will be very similar to current lngLat) const p = polygon.properties.id == "poi-radius" ? lngLat : polygon.properties.id == "land" ? initialLngLat : d3.geoCentroid(polygon); // calculate the target bounding box via dummyPath after ensuring dummyProjection in line with current scale and then updating the dummyProjection rotation dummyProjection.scale(currentScale) dummyProjection.rotate([-p[0], -p[1], 0]); dummyPath.projection(dummyProjection); const [[x0, y0], [x1, y1]] = dummyPath.bounds(polygon); // calculate the target scale required for provided polygon bounds const targetScale = Math.max(initialScale, Math.min(maxScale, currentScale * (1 / Math.max((x1 - x0) / width, (y1 - y0) / height)))) // store precise targetRotate as value as sometimes adjusted from those used to initially set projection const targetRotate = dummyProjection.rotate(); // update the rendered map using transitions const animate = function(selection) { // define interpolations of the rotate/scale values of orthographic projection const s = currentScale !== targetScale ? d3.interpolate(currentScale, targetScale) : () => currentScale; // const r0 = currentRotate[0] !== targetRotate[0] ? d3.interpolate(currentRotate[0], targetRotate[0]) : () => currentRotate[0]; // const r1 = currentRotate[1] !== targetRotate[1] ? d3.interpolate(currentRotate[1], targetRotate[1]) : () => currentRotate[1]; // const r2 = currentRotate[2] !== targetRotate[2] ? d3.interpolate(currentRotate[2], targetRotate[2]) : () => currentRotate[2]; // const r012 = (t) => [r0(t), r1(t), r2(t)] const vr = Versor.interpolateAngles(currentRotate, targetRotate); d3 .transition().duration(duration) .tween("render", () => t => { // determine new scale and rotation const newScale = s(t); // update scale and rotation projection .scale(newScale) .rotate(vr(t)) // ensure path fn using latest projection? path.projection(projection); // rerender const pi = poiD(newScale); const pof = poiOffsetFactor(newScale); const or = obsR(newScale); rerender({ pi, pof, or }) }) .on("end", function() { // ensure we arrived at final target values projection .scale(targetScale) .rotate(targetRotate); // ensure path fn using latest projection? path.projection(projection); // execute one final rerender const pi = poiD(targetScale); const pof = poiOffsetFactor(targetScale); const or = obsR(targetScale); rerender({ pi, pof, or }) // force set zoom property to latest identity so that subsequent zoom actions are in sync selection.property("__zoom", d3.zoomIdentity.scale(projection.scale())) }) } svg.call(animate) } function rerender({ pi = poiD(projection.scale()), pof = poiOffsetFactor(projection.scale()), or = obsR(projection.scale()) } = {}) { adminPaths.attr("d", path) poiRadius.attr("d", path) poiIcon .attr('transform', `translate(${projection(lngLat)})`) .attr("width", pi) .attr("height", pi) .attr("x", pi * pof) .attr("y", pi * pof) observationPoints .attr("cx", d => projection(d.geojson.coordinates)[0]) .attr("cy", d => projection(d.geojson.coordinates)[1]) .attr("r", or) } return mapContainer.node(); }3f:T409,spinnerStyles = htl.html``40:T63d,slim = (resultsArr) => { // filter within actual radius of provided point let filtered = resultsArr.filter(d => { return booleanPointInPolygon(d.geojson); }) let slimmed = filtered.map(d => { let ancestorGroup = (d.identifications.filter(i => i.current && !i.spam && !i.disagreement) || [])[0].taxon.ancestors; return { id: d.id, geojson: d.geojson, taxon: d.taxon, user: d.user.login, observed_on: d.observed_on, // observed_on_details: d.observed_on_details, uri: d.uri, obscured: d.obscured, description: d.description, place: d.place_guess, defaultPhoto: d.taxon.default_photo, // location: d.location, // photos: d.photos, // taxonIds: d.ident_taxon_ids, // ancestorIds: d.taxon.ancestors_ids, // preferCommon: d.taxon.preferred_common_name, name: d.taxon.name, rank: d.taxon.rank, species: d.taxon.preferred_common_name || d.species_guess, kingdom: ancestorGroup.filter(a => a.rank == "kingdom")[0]?.name, phylum: ancestorGroup.filter(a => a.rank == "phylum")[0]?.name, subphylum: ancestorGroup.filter(a => a.rank == "subphylum")[0]?.name, class: ancestorGroup.filter(a => a.rank == "class")[0]?.name, order: ancestorGroup.filter(a => a.rank == "order")[0]?.name, family: ancestorGroup.filter(a => a.rank == "family")[0]?.name, genus: ancestorGroup.filter(a => a.rank == "genus")[0]?.name // subclass, suborder, subfamily, subgenus, section, subsection, subspecies, variety } }) return slimmed; }41:T7e4,// from https://observablehq.com/@d3/world-tour class Versor { static fromAngles([l, p, g]) { l *= Math.PI / 360; p *= Math.PI / 360; g *= Math.PI / 360; const sl = Math.sin(l), cl = Math.cos(l); const sp = Math.sin(p), cp = Math.cos(p); const sg = Math.sin(g), cg = Math.cos(g); return [ cl * cp * cg + sl * sp * sg, sl * cp * cg - cl * sp * sg, cl * sp * cg + sl * cp * sg, cl * cp * sg - sl * sp * cg ]; } static toAngles([a, b, c, d]) { return [ Math.atan2(2 * (a * b + c * d), 1 - 2 * (b * b + c * c)) * 180 / Math.PI, Math.asin(Math.max(-1, Math.min(1, 2 * (a * c - d * b)))) * 180 / Math.PI, Math.atan2(2 * (a * d + b * c), 1 - 2 * (c * c + d * d)) * 180 / Math.PI ]; } static interpolateAngles(a, b) { const i = Versor.interpolate(Versor.fromAngles(a), Versor.fromAngles(b)); return t => Versor.toAngles(i(t)); } static interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]) { a2 -= a1, b2 -= b1, c2 -= c1, d2 -= d1; const x = new Array(4); return t => { const l = Math.hypot(x[0] = a1 + a2 * t, x[1] = b1 + b2 * t, x[2] = c1 + c2 * t, x[3] = d1 + d2 * t); x[0] /= l, x[1] /= l, x[2] /= l, x[3] /= l; return x; }; } static interpolate([a1, b1, c1, d1], [a2, b2, c2, d2]) { let dot = a1 * a2 + b1 * b2 + c1 * c2 + d1 * d2; if (dot < 0) a2 = -a2, b2 = -b2, c2 = -c2, d2 = -d2, dot = -dot; if (dot > 0.9995) return Versor.interpolateLinear([a1, b1, c1, d1], [a2, b2, c2, d2]); const theta0 = Math.acos(Math.max(-1, Math.min(1, dot))); const x = new Array(4); const l = Math.hypot(a2 -= a1 * dot, b2 -= b1 * dot, c2 -= c1 * dot, d2 -= d1 * dot); a2 /= l, b2 /= l, c2 /= l, d2 /= l; return t => { const theta = theta0 * t; const s = Math.sin(theta); const c = Math.cos(theta); x[0] = a1 * c + a2 * s; x[1] = b1 * c + b2 * s; x[2] = c1 * c + c2 * s; x[3] = d1 * c + d2 * s; return x; }; } }42:T774,function zoomAndDrag(projection, { initialScale = projection.scale(), scaleExtent = [initialScale, initialScale * maxScaleFactor] }) { let v0, q0, r0, a0, tl; const zoomFn = d3.zoom() .scaleExtent(scaleExtent) .on("start", zoomStarted) .on("zoom", zoomed) function point(event, that) { const t = d3.pointers(event, that); if (t.length !== tl) { tl = t.length; if (tl > 1) a0 = Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]); zoomStarted.call(that, event); } return tl > 1 ? [ d3.mean(t, p => p[0]), d3.mean(t, p => p[1]), Math.atan2(t[1][1] - t[0][1], t[1][0] - t[0][0]) ] : t[0]; } function zoomStarted(event) { v0 = versor.cartesian(projection.invert(point(event, this))); q0 = versor((r0 = projection.rotate())); } function zoomed(event) { // update scale projection.scale(event.transform.k); // determine rotation const pt = point(event, this); const v1 = versor.cartesian(projection.rotate(r0).invert(pt)); const delta = versor.delta(v0, v1); let q1 = versor.multiply(q0, delta); // For multitouch, compose with a rotation around the axis. if (pt[2]) { const d = (pt[2] - a0) / 2; const s = -Math.sin(d); const c = Math.sign(Math.cos(d)); q1 = versor.multiply([Math.sqrt(1 - s * s), 0, 0, c * s], q1); } // update rotation projection.rotate(versor.rotation(q1)); // In vicinity of the antipode (unstable) of q0, restart. if (delta[0] < 0.7) zoomStarted.call(this, event); } return Object.assign(selection => selection .property("__zoom", d3.zoomIdentity.scale(projection.scale())) .call(zoomFn), { on(type, ...options) { return options.length ? (zoomFn.on(type, ...options), this) : zoomFn.on(type); } }); }43:T651,tooltip = (selectionGroup, tooltipContainer, tooltipParent) => { selectionGroup.each(function () { d3.select(this) .on("mouseover.tooltip", handleMouseover) .on("mousemove.tooltip", handleMousemove) .on("mouseleave.tooltip", handleMouseleave); }); function handleMouseover(event, d) { const el = d3.select(this); setTooltipContents(d, tooltipContainer); setTooltipStyle(el) showTooltip(); } function handleMousemove(event) { // update the tooltip's position const [mouseX, mouseY] = d3.pointer(event, tooltipParent.node()); setPosition(mouseX, mouseY); } function handleMouseleave() { hideTooltip(); resetTooltipStyle(d3.select(this)); } function showTooltip() { tooltipContainer.style("display", "block"); } function hideTooltip() { tooltipContainer.style("display", "none"); } function setPosition(mouseX, mouseY) { const { width: parentWidth, height: parentHeight } = tooltipParent.node().getBoundingClientRect() tooltipContainer .style("right", `${parentWidth - mouseX + MOUSE_POS_OFFSET}px`) .style("bottom", `${parentHeight - mouseY + MOUSE_POS_OFFSET}px`) // .style("top", mouseY < parentHeight / 2 ? `${mouseY + MOUSE_POS_OFFSET}px` : "initial") // .style("right", mouseX > parentWidth / 2 ? `${parentWidth - mouseX + MOUSE_POS_OFFSET}px` : "initial") // .style("bottom", mouseY > parentHeight / 2 ? `${parentHeight - mouseY + MOUSE_POS_OFFSET}px` : "initial") // .style("left", mouseX < parentWidth / 2 ? `${mouseX + MOUSE_POS_OFFSET}px` : "initial"); } }44:T4c3,tooltipStyles = htl.html``45:T44d,// a likely imperfect list of iNaturalist taxon IDs that corresponds to genera, subgenera, and one subfamily (Bambusoideae) included on https://en.wikipedia.org/wiki/List_of_tree_genera taxonIdsString = "47193,47373,47452,47555,47566,47574,47727,47787,48253,48257,48498,48582,48868,48875,49156,49187,49203,49292,49327,49383,49661,49664,49667,50192,50861,50900,50999,51047,51079,51148,51811,51815,52386,52689,53350,53352,53373,53453,53549,53580,53718,53725,53726,53854,53939,53956,54262,54297,54451,54495,54500,54760,54765,54769,54774,54788,54796,54804,54806,54856,54858,55571,56089,56091,57145,57280,58322,58736,59531,60338,62819,62820,62848,62867,63573,64324,64341,64343,64355,64444,68226,68314,68692,68717,69152,69757,69821,69974,70270,71148,72055,72197,72248,72295,72301,72325,81507,81922,82096,83080,83109,83434,85276,85284,119794,121719,122303,122769,122989,124826,125929,126141,128513,128749,129056,129059,129782,129792,129808,129816,132631,133371,133429,145606,155712,155941,156609,156827,157579,157730,185147,185452,201656,319141,332552,338585,464250,575578,790732,861029,874725,886531,995157"46:[{"id":"f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","href":"https://static.observableusercontent.com/files/f75ca3dc7c0b65cf225cea300e01e5e3cb5abf4ad75592936a2b6c79b797e933a208355d31d5b160f5b1db2a7de61fa402fe279d036a052211cd09462f524cad","name":"land-110m.json","type":"application/json","lastModified":1681909763938.124,"size":55207},{"id":"0f975c08647813ed6e5617d9890d2d61507ad818414aea61e3cde62347cf99140e7862ead80d1e22883e8cc2fe464fb457f277f26bbc21c5554d60ffe8475947","href":"https://static.observableusercontent.com/files/0f975c08647813ed6e5617d9890d2d61507ad818414aea61e3cde62347cf99140e7862ead80d1e22883e8cc2fe464fb457f277f26bbc21c5554d60ffe8475947","name":"countries-10m.json","type":"application/json","lastModified":1681909763938.124,"size":3661071},{"id":"254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","href":"https://static.observableusercontent.com/files/254a99fef9cfdc739794cf276a25ffce226b9d17d64789497bbed4935f1fda7d621149894d3a06e546f0e5c53beda2580db0166433ff2fac65397af1aa3627ea","name":"countries-50m.json","type":"application/json","lastModified":1681909763938.124,"size":756420},{"id":"7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","href":"https://static.observableusercontent.com/files/7b6ff41e373e01d7b5b95773e297d40625bd9ccc1936a023a066a7edd8da5eaadec4ab7a565303539e41e001f2e6730f3ee1e259fae4f19dc59e8d6b2f2ec22b","name":"land-50m.json","type":"application/json","lastModified":1681909763938.124,"size":545534},{"id":"4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","href":"https://static.observableusercontent.com/files/4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","name":"states-10m.json","type":"application/json","lastModified":1681909763938.124,"size":114554},{"id":"9ad9e793fd2eeb4cc2f0f4df4e8d6ca7d974cafd80f2d8cb464da6d4ac9fddecc3ae3d90683916df98ebf5de89bd0a99da36ac893926814fbadd502e64e18e38","href":"https://static.observableusercontent.com/files/9ad9e793fd2eeb4cc2f0f4df4e8d6ca7d974cafd80f2d8cb464da6d4ac9fddecc3ae3d90683916df98ebf5de89bd0a99da36ac893926814fbadd502e64e18e38","name":"inatObservations.json","type":"application/json","lastModified":1681909763938.124,"size":115025},{"id":"60fd79d46556a35a31d09b26ef307534c56c78f1ec499f5e0076d711eafdb9b01e04da764a2f2d75292c06b2650382a1748154cdea717b861039d105d6d9c94e","href":"https://static.observableusercontent.com/files/60fd79d46556a35a31d09b26ef307534c56c78f1ec499f5e0076d711eafdb9b01e04da764a2f2d75292c06b2650382a1748154cdea717b861039d105d6d9c94e","name":"land-10m.json","type":"application/json","lastModified":1681949798846.973,"size":3086715},{"id":"32f92246f0490114158267471f0e695594ab10f132018cf71bd01d60fdc3dcd6d5ddc26fcd9c791c060a92dfd38b7978fcf9e6b78cb13315fd5900c76cf3c36c","href":"https://static.observableusercontent.com/files/32f92246f0490114158267471f0e695594ab10f132018cf71bd01d60fdc3dcd6d5ddc26fcd9c791c060a92dfd38b7978fcf9e6b78cb13315fd5900c76cf3c36c","name":"inatObservations-static.json","type":"application/json","lastModified":1681999850223.079,"size":164885},{"id":"9e22de546eb3d2e33f49a1e164ed82d5de75e77a45753e2a752c4b165f6528e0135a3be09b480d45138c27b4f090f9d9081c6216d650b1a2859e37881f9823b6","href":"https://static.observableusercontent.com/files/9e22de546eb3d2e33f49a1e164ed82d5de75e77a45753e2a752c4b165f6528e0135a3be09b480d45138c27b4f090f9d9081c6216d650b1a2859e37881f9823b6","name":"iNaturalist-050723.json","type":"application/json","lastModified":1683597176679.455,"size":418419}] 38:{"id":"ae044e45e37b08c1","slug":"voronoi-treemap-of-trees-orthographic-world","title":"Voronoi Treemap of Trees (+ orthographic world map)","thumbnail":"579e4d2a7e548d43972bc066b3505ba9cf4681c751beb5690b1c853eaadea7b6","access_level":"public","create_time":"$D2023-04-19T13:09:23.938Z","update_time":"$D2023-05-09T01:53:13.039Z","view_time":null,"first_public_time":"$D2023-04-19T13:09:23.938Z","has_unpublished_edits":null,"fork":{"id":"20fefe369f73003e","slug":"voronoi-treemap-of-trees","title":"Voronoi Treemap of Trees ( + US map)","owner":{"id":"9c29be2429f33586","login":"kafunk","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"9c29be2429f33586","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":3633,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"1c1726b1498103f8","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"1c1726b1498103f8","login":"kafunk","name":"","avatar_url":"https://avatars-next.observableusercontent.com/420726f803788cb777d3a55cff5a0459070bd0d0552c89682608f8da122b0fbd","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Voronoi Treemap of Trees (+ orthographic world map)","cells":[{"id":4,"value":"# Voronoi Treemap of Trees (+ orthographic world map)\n## Geo-located iNaturalist tree observations from the recent past\n\n---\n\n#### Observable notebook references\nhttps://observablehq.com/@will-r-chase/voronoi-treemap,\nhttps://observablehq.com/@d3/versor-dragging,\nhttps://observablehq.com/@d3/versor-zooming,\nhttps://observablehq.com/@clhenrick/tooltip-d3-convention,\nhttps://observablehq.com/@ellemenno/geolocation-by-browser,\nhttps://observablehq.com/@d3/world-tour\n\n#### Still TODO\n`•` improve treemap tooltips\n\n---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2611,"value":"$3c","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1037,"value":"### User options\n*Note:* The radius and timeframe options offered for user-input are limited to avoid overstressing the iNaturalist API or risking infringement of their [rate and data limits](https://www.inaturalist.org/pages/developers). The option to use static data was similarly helpful in avoiding excessive API calls while building and debugging this notebook. Note that toggling on this option will disable most of the subsequent inputs.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":427,"value":"// providing option to temporarily use static data while debugging stuff to avoid excessive API calls\nviewof useStatic = Inputs.radio([true, false], {label: \"Use static data?\", value: false})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"viewof useCurrentLatLng = Inputs.button(\"Use my current location\", {\n value: false,\n reduce: () => getUserLngLat(),\n disabled: useStatic\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":273,"value":"viewof lng = Inputs.number({label: \"Longitude\", min: -180, max: 180, value: lngLat[0], placeholder: defaultLngLat[0], disabled: useStatic})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":277,"value":"viewof lat = Inputs.number({label: \"Latitude\", min: -90, max: 90, value: lngLat[1], placeholder: defaultLngLat[1], disabled: useStatic})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof radius = Inputs.range([0.5, 5], {step: 0.5, value: 1, label: \"Search radius in degrees\", disabled: useStatic})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"viewof days = Inputs.radio([1, 3, 7, 14], {label: \"Past days\", value: 7, disabled: useStatic})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":268,"value":"viewof groupByRank = Inputs.select([\"genus\", \"family\", \"order\", \"class\", \"subphylum\", \"phylum\"], {label: \"Treemap grouping\", value: \"genus\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1950,"value":"---","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1040,"value":"### Voronoi Treemap + Geographical Map","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1964,"value":"sideBySide = {\n const sideBySideContainer = d3.select(\n html`

\n ${sideBySideStyles}\n ${titleTemplate}\n

\n ${treemap}\n ${geomap}\n

\n ${loadingSpinner}\n

`\n );\n\n return sideBySideContainer.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2046,"value":"sideBySideStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1974,"value":"sideBySideStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2042,"value":"treemap ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":873,"value":"$3d","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2052,"value":"treemapStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2001,"value":"treemapStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2040,"value":"geomap ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":214,"value":"$3e","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2050,"value":"mapStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1969,"value":"mapStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"titleTemplate ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1862,"value":"titleTemplate = useStatic ? \n html`

\n ${titleStyles}\n

\n iNaturalist Tree(+) Observations from between 2023-04-12 and 2023-04-19 within a ${radius}-degree radius of [${parseFloat(lng.toFixed(2))},${parseFloat(lat.toFixed(2))}], grouped by ${groupByRank}\n

`\n: html`

\n ${titleStyles}\n

\n iNaturalist Tree(+) Observations from the past ${days} Days within a ${radius}-degree radius of [${parseFloat(lng.toFixed(2))},${parseFloat(lat.toFixed(2))}], grouped by ${groupByRank}\n

\n ${spinnerStyles}\n

`\n );\n\n spinnerContainer.style(\"display\", () => (useStatic || dataLoaded) ? \"none\" : \"flex\")\n\n return spinnerContainer.node();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2912,"value":"spinnerStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2868,"value":"$3f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1132,"value":"### Voronoi Treemap Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":883,"value":"grouped_data = {\n let groupedValues = [...d3.group(activeData, d => d[groupByRank], d => d.species)]\n .map(([key, value]) => {\n let mappedValue = Array.isArray(value) ?\n value\n : [...value].map(mapValues).filter(obj => obj.key !== undefined);\n\n return {key, value: mappedValue}\n })\n .filter(obj => obj.key !== undefined)\n\n return {\n key: \"by_rank\",\n value: groupedValues\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2147,"value":"mapValues = ([key, value]) => {\n return {key, value}\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":891,"value":"observation_hierarchy = d3.hierarchy(grouped_data, d => d.value).count()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1878,"value":"handpickedColors = [\"#bea5ab\",\"#9e9d61\",\"#de7d76\",\"#598384\",\"#93775c\",\"#81c184\",\"#bef837\",\"#8dd3dc\",\"#0cdc82\",\"#ec69e9\",\"#e975ad\",\"#f5928b\",\"#fed024\",\"#d9a1b4\",\"#f1ae54\",\"#eeb64d\",\"#6aeec0\",\"#6ddbc5\",\"#6de487\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2532,"value":"brewerColors = chroma.brewer.Set3","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2547,"value":"definedColors = chroma.scale(brewerColors.concat(handpickedColors)).colors(grouped_data.value.length)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"function colorHierarchy(hierarchy) { \n if (hierarchy.depth === 0) {\n hierarchy.color = 'green';\n } else if (hierarchy.depth === 1){\n hierarchy.color = colorMap.get(hierarchy.data.key);\n } else { // depth > 1\n let similarColor = getSimilarColor(chroma.default(hierarchy.parent.color).rgb(), hierarchy.depth)\n hierarchy.color = similarColor;\n }\n if (hierarchy.children) {\n hierarchy.children.forEach(child => colorHierarchy(child))\n } \n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":932,"value":"colorMap = new Map(grouped_data.value.map(({key}, i) => [key, definedColors[i]]))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":956,"value":"ellipse = d3\n .range(100)\n .map(i => [\n (width * (1 + 0.99 * Math.cos((i / 50) * Math.PI))) / 2,\n (height * (1 + 0.99 * Math.sin((i / 50) * Math.PI))) / 2\n ])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1791,"value":"getSimilarColor = ([r,g,b], depth) => {\n let adjustedR = adjusted(r),\n adjustedG = adjusted(g),\n adjustedB = adjusted(b);\n\n let adjustOneOpts = [\n [adjustedR, g, b],\n [r, adjustedG, b],\n [r, g, adjustedB]\n ],\n adjustTwoOpts = [\n [adjustedR, adjustedG, b],\n [r, adjustedG, adjustedB],\n [adjustedR, g, adjustedB]\n ],\n adjustAllThree = [adjustedR, adjustedG, adjustedB];\n \n let options = {\n 1: adjustAllThree, \n 2: adjustTwoOpts[random(2)],\n 3: adjustOneOpts[random(2)]\n }\n\n return chroma.default(options[depth]).hex();\n \n function adjusted(c) {\n // shallower depths vary more drastically, though all should be distinct\n let factor = 1/(depth * 3),\n i = random(factor * 90, factor * 60) // upper,lower\n \n // ensure return value is between 0 and 255\n return Math.max(0,Math.min(255,(c + (Math.random() < 0.5 ? -i : i))))\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1053,"value":"### Tree Data + iNaturalist Fetch Logic","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2819,"value":"*Note:* not all iNaturalist observations include comprehensive taxonomies; one observation may be flagged with a \"genus\" classification but be missing a \"family\" classification, and vice versa. Observations that do not include a value for the currently selected treemap grouping are excluded from the active dataset.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":2846,"value":"mutable dataLoaded = false;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2658,"value":"activeData = {\n return inatObservations.filter(d => d[groupByRank])\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":423,"value":"inatObservations = useStatic ? inatObservationsStatic : fetchApiData();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":59,"value":"endpointBase = `https://api.inaturalist.org/v1/observations?d1=${formatDate(startingDate)}&d2=${formatDate(yesterday)}&nelat=${lat + radius}&nelng=${lng + radius}&swlat=${lat - radius}&swlng=${lng - radius}&quality_grade=research&captive=false&geo=true&reviewed=any&verifiable=any&place_id=any&photos=true&order_by=observed_on&order=desc&taxon_ids=${taxonIdsString}`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":139,"value":"totalPages = fetch(endpointBase + `&per_page=1`).then((response) => {\n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`);\n }\n return response.json();\n })\n .then((json) => {\n return Math.min(pageLimit,Math.ceil(json.total_results/perPage));\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":114,"value":"fetchApiData = () => {\n mutable dataLoaded = false;\n\n let promise = new Promise((resolve) => {\n let allResults = [];\n\n for (let i = 1; i <= totalPages; i++) {\n let url = endpointBase + `&per_page=${perPage}&page=${i}`;\n \n fetch(url).then((response) => {\n if (!response.ok) {\n throw new Error(`HTTP error! Status: ${response.status}`);\n }\n return response.json(); \n }).then((json) => {\n let results = json.results;\n allResults.push(slim(results));\n }).catch((err) => {\n console.log(\"fetch error:\", err, url, i)\n }).finally(() => {\n if (allResults.length == totalPages) {\n resolve(allResults.flat());\n mutable dataLoaded = true;\n }\n });\n }\n });\n\n return promise;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":112,"value":"$40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":43,"value":"today = new Date();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1917,"value":"yesterday = {\n let yesterday = new Date();\n yesterday.setDate(today.getDate() - 1)\n return yesterday;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":37,"value":"startingDate = {\n let startingDate = new Date();\n startingDate.setDate(yesterday.getDate() - days)\n return startingDate;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":41,"value":"formatDate = (date) => {\n // returns YYYY-MM-DD in UTC\n return date.getUTCFullYear() + \"-\" + (date.getUTCMonth() + 1).toLocaleString().padStart(2,'0') + \"-\" + date.getUTCDate().toLocaleString().padStart(2,'0');\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1055,"value":"### Map Helpers","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":331,"value":"lngLat = useCurrentLatLng || defaultLngLat","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2976,"value":"graticule = d3.geoGraticule10()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3058,"value":"maxScaleFactor = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3552,"value":"$41","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3038,"value":"$42","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2974,"value":"sphere = ({type: \"Sphere\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3433,"value":"conterminousOnly = (a) => ![\"Alaska\", \"Hawaii\", \"Puerto Rico\", \"Guam\", \"United States Virgin Islands\", \"American Samoa\", \"Commonwealth of the Northern Mariana Islands\"].includes(a.properties.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2954,"value":"innerlinesOnly = (a, b) => a !== b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"conterminousInnerlinesOnly = (a, b) => a !== b && ![\"Alaska\", \"Hawaii\", \"Puerto Rico\", \"Guam\", \"United States Virgin Islands\", \"American Samoa\", \"Commonwealth of the Northern Mariana Islands\"].includes(a.properties.name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":109,"value":"booleanPointInPolygon = (pt) => turfBooleanPointInPolygon.default(pt,radiusPolygon)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":79,"value":"radiusPolygon = turfRewind.default(turfCircle.default([lng,lat], radius, { units: 'degrees', properties: {id: 'poi-radius' } }), { reverse: true , mutate: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2080,"value":"starIcon SVG symbol ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":741,"value":"starIcon = htl.svg``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"### Tooltips","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":791,"value":"tooltipId = DOM.uid().id","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":776,"value":"$43","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":778,"value":"setTooltipContents = (datum, tooltipContainer) => {\n tooltipContainer.select(\".tooltip-title\")\n .html(`

${capitalize(datum.species || datum.name)}

`);\n\n tooltipContainer.select(\".tooltip-photo\")\n .html(`

`)\n\n tooltipContainer.select(\".tooltip-attribution\")\n .html(`photograph ${datum.defaultPhoto?.attribution}`)\n\n Object.entries(tooltipContents).forEach(([groupKey, arr]) => {\n let tooltipData = [];\n\n arr.forEach(key => { if (datum[key]) tooltipData.push([key, datum[key]]); });\n\n tooltipContainer.select(`.tooltip-text .${groupKey}`).selectAll(\"p\")\n .data(tooltipData)\n .join(\"p\")\n .html(([key, value]) =>`${key}: ${typeof value === \"object\" ? value.toLocaleString(\"en-US\") : value}`);\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":781,"value":"setTooltipStyle = (selection) => {\n selection\n .attr(\"fill\", \"tomato\")\n .attr(\"stroke\", \"magenta\")\n .attr(\"opacity\", selection.property(\"hover-opacity\") || 0.9)\n .attr(\"stroke-opacity\", 1)\n // .style(\"cursor\", \"pointer\")\n .raise();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":783,"value":"resetTooltipStyle = (selection) => {\n // reset visual affordances on triggering element\n selection\n .attr(\"fill\", selection.property(\"orig-fill\"))\n .attr(\"stroke\", selection.property(\"orig-stroke\") || \"black\")\n .attr(\"opacity\", selection.property(\"orig-opacity\") || 1)\n .attr(\"stroke-opacity\", selection.property(\"orig-stroke-opacity\") || 0)\n // .style(\"cursor\", \"initial\")\n // .lower();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2054,"value":"tooltipTemplate ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":789,"value":"tooltipTemplate = html`

\n ${tooltipStyles}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2056,"value":"tooltipStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":785,"value":"$44","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":817,"value":"// grouped and in order\ntooltipContents = Object.assign({\n group1: [\"subgenus\",\"genus\",\"subfamily\",\"family\",\"subclass\",\"class\",\"suborder\",\"order\",\"subphylum\"],\n group2: [\"user\",\"uri\",\"observed_on\",\"place\",\"description\"]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":995,"value":"### Static Data Files","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3629,"value":"inatObservationsStatic = FileAttachment(\"iNaturalist-050723.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3484,"value":"land10m = FileAttachment(\"land-10m.json\").json().then(world => {\n const gj = topojson.feature(world, world.objects.land).features[0]\n gj.properties.id = \"land\";\n return gj;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3053,"value":"land50m = FileAttachment(\"land-50m.json\").json().then(world => {\n const gj = topojson.feature(world, world.objects.land).features[0]\n gj.properties.id = \"land\";\n return gj;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3480,"value":"countries10m = FileAttachment(\"countries-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3478,"value":"countries10mMeshInner = topojson.mesh(countries10m, countries10m.objects.countries, innerlinesOnly)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2945,"value":"countries50m = FileAttachment(\"countries-50m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3387,"value":"countries50mMeshInner = topojson.mesh(countries50m, countries50m.objects.countries, innerlinesOnly)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3490,"value":"states10m = FileAttachment(\"states-10m.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3430,"value":"usStates = topojson.feature(states10m, states10m.objects.states)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1007,"value":"### Constants","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":472,"value":"width = 980","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"height = width","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2624,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"defaultLngLat = [-88, 42]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":416,"value":"perPage = 25","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"pageLimit = 100","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":962,"value":"margin = ({top: 28, right: 28, bottom: 28, left: 28})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"// padding between the tooltip and mouse cursor\nMOUSE_POS_OFFSET = 8","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"### Helper Fns","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":344,"value":"getUserLngLat = () => {\n const options = {\n timeout: 5000,\n maximumAge: 0,\n };\n\n return new Promise((resolve, reject) => {\n if (navigator.geolocation) {\n navigator.geolocation.getCurrentPosition(\n pos => {\n const crd = pos.coords;\n resolve([crd.longitude, crd.latitude])\n },\n err => {\n reject(Error(err.message))\n },\n options\n );\n } else {\n reject(Error('this browser does not support geolocation.'))\n }\n }).catch(error => console.warn(\"LOCATION FETCH ERROR:\", error))\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":681,"value":"capitalize = (string) => string.charAt(0).toUpperCase() + string.slice(1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2213,"value":"asClassName = (str) => {\n return str ? str.replace(nonsafeCssClassChars, '-') : ''\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2220,"value":"nonsafeCssClassChars = new RegExp(/[!\"#$%&'()*+,./:;<=>?@[\\\\\\]^`{|}~\\s]/, 'g')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1793,"value":"random = (upper,lower = 0) => {\n let randNum = Math.random();\n return (upper) ? lower + Math.round(randNum * (upper - lower)) : randNum;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"### Module Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":73,"value":"turfCircle = import(\"https://cdn.skypack.dev/@turf/circle\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":65,"value":"turfBooleanPointInPolygon = import(\"https://cdn.skypack.dev/@turf/boolean-point-in-polygon\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"turfRewind = import(\"https://cdn.skypack.dev/@turf/rewind\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":927,"value":"chroma = import(\"https://cdn.skypack.dev/chroma-js\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":226,"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":228,"value":"d3 = require(\"d3@7\", \"d3-weighted-voronoi\", \"d3-voronoi-map\", \"d3-voronoi-treemap\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3030,"value":"versor = require(\"versor@0.0.4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1711,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 33:null