25:["$","title",null,{"children":"Mobile Testing -- Voronoi Treemap of Trees ( + US map) | kafunk | Observable"}] 49: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.) ---4a:T19ac,mobileTreemap = { 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(); }4b:T1984,treemap = { 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) // cell.style('fill-opacity', 0.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")) // cell.style('fill-opacity', cell.property("orig-fill-opacity")) // 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', d.depth == 1 ? 1 : 0) value_labels.select(`.value_label-${d.id}`).attr('opacity', d.depth == 1 ? 1 : 0) // restore parent cell labels cat_labels.select(`.cat_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', 1) value_labels.select(`.value_label-${asClassName(d.parent.data.key)}-${d.parent.depth}`).attr('opacity', 1) }) .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', d => d.depth == 1 ? 1 : 0) .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', d => d.depth == 1 ? 1 : 0) .style('font-size', d => d.depth == 1 ? '24px' : '18px') .style('font-family', 'Montserrat') .style('font-weight', 'bold') return treemapContainer.node(); }4c:T1b3a,geomap = { const mapContainer = d3.select( html`

${mapStyles} ${tooltipTemplate}

` ); // visual variables const maxScale = 40; // map-specific fns const zoom = d3.zoom() .scaleExtent([1, maxScale]) .on("zoom", zoomed); const tooltipContainer = mapContainer.select("#tooltip"); const svg = mapContainer.append("svg") .attr("id", "geomap") .attr("viewBox", [0, 0, width, height]) .on("click", reset); // define svg groups const g = svg.append("g").attr("id", "zoomable") const baseLayers = g.append("g").attr("id", "baselayers") const adminBase = baseLayers.append("g").attr("id", "admin-base") 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 adminBase.append("path") .attr("id", "country-borders") .attr("d", path(countriesMesh)) .attr("fill", "whitesmoke") .attr("stroke", "lightcoral") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.3) adminBase.append("path") .attr("id", "state-borders") .attr("d", path(statesMesh)) .attr("fill", "none") .attr("stroke", "teal") .attr("stroke-linejoin", "round") .attr("stroke-width", 0.2) .attr("stroke-dasharray", "0.4 0.1 0.4 0.2") // draw represented POI and corresponding radius featureLayers.append("use") .attr("xlink:href", "#star-icon") .attr("width", 5) .attr("height", 5) .attr("x", -2) .attr("y", -2) .attr('transform', `translate(${projection(lngLat)})`) .attr("fill", "purple") .attr("stroke", "black") .attr("stroke-width", 36) .attr("stroke-linejoin", "round") .attr("opacity", 1) .transition().delay(1500).duration(500) .attr("width", Math.max(1, 0.5 * radius + 0.5)) .attr("height", Math.max(1, 0.5 * radius + 0.5)) .attr("x", 0) .attr("y", 0) featureLayers.append("path") .attr("fill", "none") .attr("stroke", "purple") .attr("stroke-width", 0.2) .attr("stroke-linejoin", "round") .attr("d", path(radiusPolygon)) // draw observations 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", 0) .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) .transition().duration(1500) .attr("r", d => (0.25 * radius + 0.05) * 1.5) .on("end", function() { d3.select(this) .transition().duration(500) .attr("r", (0.25 * radius + 0.05)) }) // zoom to initial radius zoomToPolygon(radiusPolygon); // enable free zoom svg.call(zoom); function reset() { zoomToPolygon(radiusPolygon) // svg.transition().duration(750).call( // zoom.transform, // d3.zoomIdentity, // d3.zoomTransform(svg.node()).invert([width / 2, height / 2]) // ); } function zoomToPolygon(polygon) { const [[x0, y0], [x1, y1]] = path.bounds(polygon); svg.transition().duration(750).call( zoom.transform, d3.zoomIdentity .translate(width / 2, height / 2) .scale(Math.min(maxScale, 0.95 / Math.max((x1 - x0) / width, (y1 - y0) / height))) .translate(-(x0 + x1) / 2, -(y0 + y1) / 2) ); } function zoomed(event) { const {transform} = event; g.attr("transform", transform); g.attr("stroke-width", 1 / transform.k); } return mapContainer.node(); }4d:T409,spinnerStyles = htl.html``4e: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"); } }4f:T4fa,tooltipStyles = htl.html``50: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"51:[{"id":"32f92246f0490114158267471f0e695594ab10f132018cf71bd01d60fdc3dcd6d5ddc26fcd9c791c060a92dfd38b7978fcf9e6b78cb13315fd5900c76cf3c36c","href":"https://static.observableusercontent.com/files/32f92246f0490114158267471f0e695594ab10f132018cf71bd01d60fdc3dcd6d5ddc26fcd9c791c060a92dfd38b7978fcf9e6b78cb13315fd5900c76cf3c36c","name":"inatObservations-static.json","type":"application/json","lastModified":1682094404236.798,"size":164885},{"id":"4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","href":"https://static.observableusercontent.com/files/4918abcd2b8f4440c28b9e3f88330557d07ccfda7a1177633c154fcc137f7303b181b7b32f2e6711b03337ffacda82df428be3bf7401e43729fa94c90228ad33","name":"states-10m.json","type":"application/json","lastModified":1682094404236.798,"size":114554}] 29:{"id":"a0dfb0ccae6420f5","slug":null,"title":"Mobile Testing -- Voronoi Treemap of Trees ( + US map)","thumbnail":"f48a23ef651c8c23b4f12af03ea868789342d51154d8fc4314a76d1c115882af","access_level":"public","create_time":"$D2023-04-21T16:26:44.236Z","update_time":"$D2023-04-21T19:32:32.757Z","view_time":null,"first_public_time":"$D2023-04-21T16:26:44.236Z","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":3257,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Mobile Testing -- Voronoi Treemap of Trees ( + US map)","cells":[{"id":4,"value":"# Mobile Testing -- Voronoi Treemap of Trees ( + US map)\n## Geo-located iNaturalist tree observations from the recent past\n\n#### References\nhttps://observablehq.com/@will-r-chase/voronoi-treemap,\nhttps://observablehq.com/@clhenrick/tooltip-d3-convention,\nhttps://observablehq.com/@ellemenno/geolocation-by-browser\n\n---\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":"$49","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})","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":3216,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3214,"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":"$4b","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":true,"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":"$4c","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":true,"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

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":2032,"value":"titleStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1864,"value":"titleStyles = htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3144,"value":"loadingSpinner ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3142,"value":"loadingSpinner = {\n const spinnerContainer = d3.select(\n html`

\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":3148,"value":"spinnerStyles ↓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3152,"value":"$4d","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":2287,"value":"maxDepth = observation_hierarchy.height","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":3154,"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":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":575,"value":"projection = d3.geoAlbers()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":479,"value":"path = d3.geoPath().projection(projection)","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' }), { 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":"$4e","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":true,"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":"$4f","pinned":true,"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":3179,"value":"inatObservationsStatic = FileAttachment(\"inatObservations-static.json\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":583,"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":538,"value":"countriesMesh = topojson.mesh(states10m, states10m.objects.states, conterminousOuterlinesOnly)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":535,"value":"statesMesh = topojson.mesh(states10m, states10m.objects.states, conterminousInnerlinesOnly)","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":"vWidth = 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":"$50","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":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":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":984,"value":"conterminousOuterlinesOnly = (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":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":3198,"value":"### Notebook Imports","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":3190,"value":"import {tooltipContents,slim} from \"@kafunk/voronoi-treemap-of-trees\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"### Other 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\", 'seedrandom@2.4.3/seedrandom.min.js')","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":"$W51","stdlib":"1"}} 24:null