2b:null 2c:["$","title",null,{"children":"Book poem designer | Brett Cooper | Observable"}] 31:[{"id":"85653b1625d366b5f5c251afcb1b09a4d58e32a01c49bf7f91400ef3914a2de77e30ab694d20b794c98faf9b3235bb0db6a2ba3d24cfd573702b6d44d18a744e","href":"https://static.observableusercontent.com/files/85653b1625d366b5f5c251afcb1b09a4d58e32a01c49bf7f91400ef3914a2de77e30ab694d20b794c98faf9b3235bb0db6a2ba3d24cfd573702b6d44d18a744e","name":"books.csv","type":"text/csv","lastModified":1598581618756.857,"size":3286659}] 2f:{"id":"228ffe25db6b47b2","slug":"book-poem-designer","title":"Book poem designer","thumbnail":"0174d82c413f042474f5ef5dc6fed40eefa97070784be1f5b55b5e34235d53d3","access_level":"public","create_time":"$D2020-08-24T16:29:51.788Z","update_time":"$D2021-02-21T02:54:02.342Z","view_time":null,"first_public_time":"$D2020-08-29T01:40:20.549Z","fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"ca35562412a365ec","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":"starter_2024"},"version":611,"publish_version":611,"role":null,"authored":false,"authors":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null}],"members":[{"type":"individual","id":"71df97e2192b6fce","login":"hellonearthis","name":"Brett Cooper","avatar_url":"https://avatars-next.observableusercontent.com/ee05023c4c2a9d53e29a4f85f35e35430ae16d2c4aa6a6ca791175caf667abc2","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"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","author":"$undefined","summary":"$undefined"},{"id":261,"value":"poem = html`

${title1}

${title2}

${title3}

${title4}

`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":553,"value":"html``","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":444,"value":"md`** Add an event listener to handler which div / title was clicked on. **`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":603,"value":"md`**The book list**`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":37,"value":"te_books = d3.csvParse(await FileAttachment(\"books.csv\").text(), d3.autoType)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":79,"value":"title1 = grab_book()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":81,"value":"title2 = grab_book()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":84,"value":"title3 = grab_book()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":86,"value":"title4 = grab_book()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"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","author":"$undefined","summary":"$undefined"},{"id":34,"value":"d3 = require(\"d3@6\")\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W31","stdlib":"1","titling":"auto"}} 30:"$2f:body"