31:T49b,md` It is a cold December day here in Texas as I write this notebook, cold by South Texas standards anyway :) Not much is growing on our lawn at the moment, but it will soon be Spring and the kids will spend many hours exploring out in the yard and picking the wild flowers that grow among the grass(we haven't used herbicides and have grown quite fond of the colorful weed garden that grows where the lawn used to be). I just wish I knew what to say when they ask, "What's this purple one called!?"

Thankfully, the [USDA plants database](https://plants.sc.egov.usda.gov/java/) maintains an enormous collection of plant information. You can [search for plants](https://plants.sc.egov.usda.gov/adv_search.html) by name, location, or even characteristics. But, if you are like me and don't know what you are looking for, it helps to start with a picture :) This notebook reads info from the database and displays a gallery of wildflowers for a selected Texas county. Each picture links back to its USDA Plants Database entry which contains detailed information about the wildflower.

This year, I'll be better prepared: "That one? That's a Late Purple Aster :)"`32:T408,viewof mapSelection = { const width = 300, height = 300; const svg = d3.select(DOM.svg(width, height)); var node = svg.node(); node.value = "Fort Bend"; var projection = d3.geoMercator().fitSize([width, height], countiesTx); var path = d3.geoPath().projection(projection); const group = svg .append('g') .style("position", "absolute") .style("z-index", 3); group .selectAll('path') .data(countiesTx.features) .enter() .append('path') .attr('d', path) .style("fill", "white") .style('stroke', 'gray') .on("click", function(d, i) { node.value = i.properties.CNTY_NM; node.dispatchEvent(new CustomEvent("input")); }) .on("mouseover", function() { d3.selectAll("path") .style("stroke", "gray") .style("stroke-width", 1); d3.select(this) .style("stroke", "black") .style("stroke-width", 2) .raise(); }) .append("title") .text(d => `${d.properties.CNTY_NM}`); return node; }33:[{"id":"eacc9ab1fcdd6e4dc5ec6ac594aebb0e9413a26319b4b13cb0c1e0a84efdf891e4e5934313cc42da5ee9c25462f1da8a2149ea161f2bea1d8aebf1212a573b29","href":"https://static.observableusercontent.com/files/eacc9ab1fcdd6e4dc5ec6ac594aebb0e9413a26319b4b13cb0c1e0a84efdf891e4e5934313cc42da5ee9c25462f1da8a2149ea161f2bea1d8aebf1212a573b29","name":"tx_wildflowers.txt","type":"text/plain","lastModified":1608767022771.521,"size":66814}] 2f:{"title":"Wildflowers of Texas","cells":[{"id":0,"value":"md`# Wildflowers of Texas`","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":551,"value":"md` Select your Tx county to see what might be growing in your backyard`","pinned":false,"hidden":false,"mode":"ojs"},{"id":105,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":542,"value":"html`

Wildflowers that grow in ${mapSelection} county [Source: USDA Plants Database]

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1141,"value":"previews(sift.map(d => d.value))","pinned":false,"hidden":false,"mode":"ojs"},{"id":671,"value":"md`This gallery view is borrowed from https://observablehq.com/@d3/gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1246,"value":"sift = countyFlowersWithImages.filter(d => d.status === \"fulfilled\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":997,"value":"mutable countyFlowersWithImages = Promise.allSettled(\n countyFlowersWithImageUrls.map(loadImage)\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":1238,"value":"retries = {\n var attempt1 = attempt(countyFlowersWithImages);\n mutable countyFlowersWithImages = attempt1;\n var attempt2 = attempt(attempt1);\n mutable countyFlowersWithImages = attempt1;\n var attempt3 = attempt(attempt2);\n mutable countyFlowersWithImages = attempt1;\n return attempt3;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1069,"value":"function tryAgain(arr) {\n console.log(\"trying again\");\n //if arr.filter(d => d.status === \"rejected\").length ==0) return arr;\n \n return Promise.allSettled(\n arr.map((d, i) => {\n if (d.status === \"fulfilled\") return d.value;\n if (d.status === \"rejected\") {\n //console.log(i);\n return loadImage(countyFlowersWithImageUrls[i]);\n }\n })\n ).then(array => {\n return array;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1103,"value":"function attempt(arr) {\n if (arr.filter(d => d.status === \"rejected\").length == 0) return arr;\n else return Promises.delay(1000, tryAgain(arr));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":467,"value":"wildflowers = FileAttachment(\"tx_wildflowers.txt\").csv() //Downloaded from https://plants.sc.egov.usda.gov/adv_search.html for all Texas counties, growth habit = Forb/Herb, flower conspicuous = yes","pinned":false,"hidden":false,"mode":"ojs"},{"id":606,"value":"wildflowersObj = renameFields(wildflowers)","pinned":false,"hidden":false,"mode":"ojs"},{"id":611,"value":"countiesWithFlowers = assignToCounties(countiesTx, wildflowersObj)","pinned":false,"hidden":false,"mode":"ojs"},{"id":640,"value":"countyFlowersWithImageUrls = {\n var arr = getFlowersForCounty(mapSelection, countiesWithFlowers);\n return Promise.all(arr.map(d => d.flowerImage)).then(() => arr);\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":195,"value":"function renameFields(arr) {\n return arr\n .filter(d => d.County !== \"\")\n .map(d => {\n const d2 = {\n symbol: d.Symbol,\n scientificName: d['Scientific Name'],\n commonName: d['Common Name'],\n county: d.County.split(\"(\")[1]\n .split(\")\")[0]\n .split(\", \"),\n moreInfo:\n \"https://plants.sc.egov.usda.gov/home/plantProfile?symbol=\" + d.Symbol\n };\n return d2;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":274,"value":"function assignToCounties(counties, flowers) {\n const countiesWithPlants = counties.features.map(feature => {\n feature.properties[\"flowers\"] = flowers.filter(\n d =>\n d.county.includes(feature.properties.CNTY_NM) == true ||\n d.county.includes(feature.properties.CNTY_NM.replace(/ /g, \"\")) == true\n );\n return feature;\n });\n\n //Randomly pick a flower for each county and find it's imageURL, add to properties\n /*countiesWithPlants.map(feature => {\n getFlowerImage(feature).then(flowerPic => {\n feature.properties[\"flowerImage\"] = flowerPic;\n });\n return feature;\n });*/\n\n return countiesWithPlants;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":376,"value":"function getFlowersForCounty(county, counties) {\n const countyWithFlowers = counties.filter(\n d => d.properties.CNTY_NM === county\n );\n\n countyWithFlowers[0].properties.flowers.map(flower => {\n //Check if an imageURL for this flower has already been fetched, else fetch\n const ind = wildflowersObj.findIndex(d => d.symbol === flower.symbol);\n if (\"flowerImage\" in wildflowersObj[ind]) {\n flower[\"flowerImage\"] = wildflowersObj[ind].flowerImage;\n //console.log(\"yes\");\n return flower;\n } else {\n getFlowerImage2(flower)\n .then(flowerPic => {\n //console.log(\"no\");\n flower[\"flowerImage\"] = flowerPic;\n wildflowersObj[ind][\"flowerImage\"] = flowerPic;\n })\n .then(() => flower);\n }\n //return flower;\n });\n\n return countyWithFlowers[0].properties.flowers;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"function previews(flowers) {\n return html`

${flowers.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":840,"value":"function loadImage(flower) {\n var img = new Image();\n img.src = flower.flowerImage;\n\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, flower]));\n img.onerror = reject;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":426,"value":"function preview([image, flower]) {\n return html`\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${event =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

${\n flower.commonName\n }

\n`;\n //});\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1374,"value":"function getFlowerImage2(flower) {\n return fetch(\n \"https://plantsservices.sc.egov.usda.gov/api/PlantProfile?symbol=\" +\n flower.symbol\n )\n .then(response => response.json())\n .then(\n d =>\n \"https://plants.sc.egov.usda.gov/ImageLibrary/standard/\" +\n d.ProfileImageFilename\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"function getFlowerImage(flower) {\n return axios({\n method: \"get\",\n url: \"https://aroycorsanywhere.herokuapp.com/\" + flower.moreInfo\n })\n .then(flowerHTML => {\n const $$ = cheerio.load(flowerHTML.data);\n const flowerImage =\n \"https://plants.sc.egov.usda.gov\" +\n $$(\"#tabGeneral\")[0].children[1].next.next.children[3].children[1]\n .children[0].children[1].children[1].children[1].children[1].attribs\n .src;\n return flowerImage;\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":103,"value":"countiesTx = d3.json(\n \"https://opendata.arcgis.com/datasets/9b2eb7d232584572ad53bad41c76b04d_0.geojson\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"cheerio = require('https://bundle.run/cheerio@1.0.0-rc.2')","pinned":false,"hidden":false,"mode":"ojs"},{"id":436,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}