31:[{"id":"85653b1625d366b5f5c251afcb1b09a4d58e32a01c49bf7f91400ef3914a2de77e30ab694d20b794c98faf9b3235bb0db6a2ba3d24cfd573702b6d44d18a744e","href":"https://static.observableusercontent.com/files/85653b1625d366b5f5c251afcb1b09a4d58e32a01c49bf7f91400ef3914a2de77e30ab694d20b794c98faf9b3235bb0db6a2ba3d24cfd573702b6d44d18a744e","name":"books.csv","type":"text/csv","lastModified":1598581618756.857,"size":3286659}] 2f:{"title":"Book poem designer","cells":[{"id":20,"value":"md`# Book poem designer\n\nPoems are generated using 10,000 book titles from [maciejkula.github books.csv](https://maciejkula.github.io/spotlight/datasets/goodbooks.html)\n\nhttps://www.kaggle.com/lukaanicin/book-covers-dataset Todo: Use book covers to make a 2x2 image.\n\n**Clicking on a title will change it to a different title to help for a poem that you like.**\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"poem = html`

${title1}

${title2}

${title3}

${title4}

`","pinned":true,"hidden":false,"mode":"ojs"},{"id":553,"value":"html``","pinned":true,"hidden":false,"mode":"ojs"},{"id":127,"value":"function next_book() {\n let bn = d3.randomInt(0, 10000)() // select a new book\n let which = this // which div was clicked \n console.log('which id is ',which.id)\n let book = grab_book()\n which.innerHTML = book // would rather do .textContent but using html \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":444,"value":"md`** Add an event listener to handler which div / title was clicked on. **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":388,"value":"watch_books = {\n poem; // add the html into the scope for the querySelector\n document.querySelector('#book1').addEventListener(\"click\", next_book);\n document.querySelector('#book2').addEventListener(\"click\", next_book);\n document.querySelector('#book3').addEventListener(\"click\", next_book);\n document.querySelector('#book4').addEventListener(\"click\", next_book);\n }","pinned":true,"hidden":false,"mode":"ojs"},{"id":603,"value":"md`**The book list**`","pinned":true,"hidden":false,"mode":"ojs"},{"id":37,"value":"te_books = d3.csvParse(await FileAttachment(\"books.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`** ↘ Grab a books *.original_title * and check if the title is null and if so select the *.title* and note who wrote it. 📋 There are ${d3.count(te_books, d => d.original_title)} Books that have no orgional title. **`","pinned":false,"hidden":false,"mode":"ojs"},{"id":490,"value":"function grab_book() {\n let bn = d3.randomInt(0, 10000)()\n let book = `${(te_books[bn].original_title != null) ? te_books[bn].original_title : te_books[bn].title} written by ${te_books[bn].authors}`\n return book \n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":79,"value":"title1 = grab_book()","pinned":true,"hidden":false,"mode":"ojs"},{"id":81,"value":"title2 = grab_book()","pinned":true,"hidden":false,"mode":"ojs"},{"id":84,"value":"title3 = grab_book()","pinned":true,"hidden":false,"mode":"ojs"},{"id":86,"value":"title4 = grab_book()\n","pinned":true,"hidden":false,"mode":"ojs"},{"id":30,"value":"md`# appendix\n\nThis program uses the querySelector to attach an addEventListener to a div element by ID, so that when that element is clicked, it updates the innerHTML with a new book title.\n\nThink of adding a save button that would use http://html2canvas.hertzen.com/ to convert the div into an image like https://observablehq.com/@fil/hello-html2canvas did.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"d3 = require(\"d3@6\")\n","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}