30:[{"id":"7b28a423ef209663a0a3c87fc1e6e9624c5faf84cb8dcd1d2c6b9f4fc0f8c4bd2de2dfa548ff4cab37e1eba0af63a5bb39e09be030d9f33cba7c043e5005f995","href":"https://static.observableusercontent.com/files/7b28a423ef209663a0a3c87fc1e6e9624c5faf84cb8dcd1d2c6b9f4fc0f8c4bd2de2dfa548ff4cab37e1eba0af63a5bb39e09be030d9f33cba7c043e5005f995","name":"songlist.html","type":"text/html","lastModified":1619631863752.187,"size":24771}] 2e:{"title":"Bird Songs","cells":[{"id":0,"value":"md`# Bird Songs`","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"md`[A twitter post](https://twitter.com/USGS/status/1386734348414685186) from the USGS on National Audubon Day led me to this treasure of bird information from the [USGS](https://www.mbr-pwrc.usgs.gov/Infocenter/)! I used the information on this page and turned the [list of song links](https://www.mbr-pwrc.usgs.gov/id/songlist.html) from the tweet into a gallery of bird images with the song of each bird attached. You can click on a bird to go to its USGS information page for identification tips or maps.\n\nPlay many bird songs at a time for a beautiful bird symphony! Enjoy!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":271,"value":"md` *Two birds are missing images from their [USGS infocenter page](https://www.mbr-pwrc.usgs.gov/Infocenter/), the Chimney Swift and the Willow Flycatcher*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"previews(birdObjWithImages)","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"md`---`","pinned":false,"hidden":false,"mode":"ojs"},{"id":246,"value":"md`The gallery format is from https://observablehq.com/@d3/gallery`","pinned":false,"hidden":false,"mode":"ojs"},{"id":200,"value":"md`First get a list of birds from the link in the tweet:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":87,"value":"songPage =FileAttachment(\"songlist.html\").text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"$$ = cheerio.load(songPage)","pinned":false,"hidden":false,"mode":"ojs"},{"id":207,"value":"md` Get the ID and links for each bird on the list:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":95,"value":"birdObj = {\n return $(\"#maincontent\")[0]\n .children[27].children.filter(d => d.name == \"a\")\n .map(d => {\n var birdID = d.attribs.href.substring(13, 17);\n return {\n id: birdID,\n name: d.children[0].data.trim(),\n binomialName: d.next.next.children[0].data.trim(),\n songLink: \"https://www.mbr-pwrc.usgs.gov\" + d.attribs.href.trim(),\n imLink:\n \"https://www.mbr-pwrc.usgs.gov/id/framlst/photo_htm/Images/h\" +\n birdID +\n \"pi.gif\",\n bbsMapLink:\n \"https://www.mbr-pwrc.usgs.gov/bbs/ra2015/ra\" + birdID + \".htm\",\n moreInfo:\n \"https://www.mbr-pwrc.usgs.gov/Infocenter/i\" + birdID + \"id.html\"\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":212,"value":"md` Load the images and audio elements for all birds:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":155,"value":"birdObjWithImages = Promise.all(birdObj.map(bird => loadImage(bird)))","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"//sift = birdObjWithImages.filter(d => d.status == \"fulfilled\").map(d => d.value)","pinned":false,"hidden":false,"mode":"ojs"},{"id":223,"value":"md` ### Helper Functions:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"function loadImage(bird) {\n var img = new Image();\n img.src = bird.imLink;\n\n var aud = new Audio();\n aud.src = bird.songLink;\n\n return Promises.delay(\n 200,\n new Promise((resolve, reject) => {\n img.decode().then(() => resolve([img, aud, bird]));\n img.onerror = resolve([img, aud, bird]);\n //img.onerror = reject;\n })\n );\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":60,"value":"function previews(birds) {\n return html`

${birds.map(preview)}

`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":56,"value":"function preview([image, song, bird]) {\n return html`\n\n\n (event.currentTarget.firstElementChild.style.borderColor =\n \"#1b1e23\")} onmouseout=${event =>\n (event.currentTarget.firstElementChild.style.borderColor = \"#e8e8e8\")}>\n

\n\n

\n${\n bird.name\n }\n`;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"html = (await require(\"htl@0.2\")).html","pinned":false,"hidden":false,"mode":"ojs"},{"id":83,"value":"axios = require(\"axios@0.19.0/dist/axios.js\");","pinned":false,"hidden":false,"mode":"ojs"},{"id":84,"value":"cheerio = require('https://bundle.run/cheerio@1.0.0-rc.2')","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}