2d:null 2e:["$","title",null,{"children":"Spine generator OPEN LIBRARY EDITION | Shana Matthews | Observable"}] 33:T1419,books2 = { const shelfWidth = 513; const shift = 8; const usableWidth = 492; const bookWidth = usableWidth / NUMBOOKS; const minHeight = 200; const maxHeight = 240; const shelfTop = 341; const shelfAdjust = maxHeight - shelfTop; const bookPadding = 3; const scale = 1; const fadeColor = "#43464A"; const svgHeight = maxHeight + bookPadding * 2 + 107; // 107 for shelf height const svg = d3 .create("svg") .attr("width", shelfWidth * scale) .attr("height", svgHeight * scale); const bookWidthRange = d3.extent(BOOKDATA, (d) => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([1, 4]); const bookHeightScale = d3.randomUniform(minHeight, maxHeight); const fontSizeScale = d3 .scaleLinear() .domain([10, 30]) .range([20, 6]) .clamp(true); const booksData = _.map(BOOKDATA, (d, i) => { const title = d.Title; const id = i; const thickness = d.NumPages ? bookWidthScale(d.NumPages) : bookWidthScale(d3.mean(bookWidthRange)); const titleLength = d.Title.length; //bookTitleScale(d.Title.length); const height = bookHeightScale(); const coverColor = d.CoverColor; const accentColor = d.AccentColor; const font = FONTS[d3.randomInt(FONTS.length)()]; const fontSize = Math.round(fontSizeScale(d.Title.length)); return { id, title, thickness, titleLength, height, coverColor, accentColor, font, fontSize }; }); var xScale = d3 .scaleLinear() .domain([0, Math.PI * 2]) .range([0, usableWidth]); var pie = d3 .pie() .sortValues(null) .value((d) => d.thickness); var adjustedData = pie(booksData); const booksGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(${shift},0)`); const books = booksGroup .selectAll("g") .data(adjustedData) .enter() .append("g"); const bookRects = books.data(adjustedData); var gradients = books .append("linearGradient") .attr("id", (d) => `${d.data.id}-gradient`) .attr("y1", "0%") .attr("y2", "0%") .attr("x1", "0%") .attr("x2", "100%"); //.attr('gradientUnits', 'userSpaceOnUse') gradients.append("stop").attr("offset", "0%").attr("stop-color", fadeColor); gradients .append("stop") .attr("offset", "7%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients .append("stop") .attr("offset", "93%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients.append("stop").attr("offset", "100%").attr("stop-color", fadeColor); books .append("rect") .style("fill", (d) => `url(#${d.data.id}-gradient)`) // .style("stroke", fadeColor) // .style("stroke-width", bookPadding) .merge(bookRects) .attr("x", function (d) { return xScale(d.startAngle) + bookPadding; }) .attr("width", function (d) { return xScale(d.endAngle) - xScale(d.startAngle); }) .attr("y", (d) => maxHeight - d.data.height) .attr("height", (d) => d.data.height); books .append("text") .text((d) => d.data.title) .attr("x", (d) => d.data.height / 2 + (maxHeight - d.data.height)) .attr("y", function (d) { return -(xScale(d.startAngle) + xScale(d.endAngle)) / 2 + 2; // I'm not sure why this visually needed a 2px left shift, but it did :) }) .attr("text-anchor", "middle") .attr( "fill", (d) => `rgb(${d.data.accentColor.red},${d.data.accentColor.green},${d.data.accentColor.blue})` ) .attr("transform", "rotate(90)") .attr("font-family", (d) => d.data.font) .attr("font-size", (d) => d.data.fontSize); const shelfGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(0,${shelfAdjust})`); shelfGroup .append("path") .attr( "d", "M80,452.219c-2.977,0-5.781-1.668-7.156-4.422l-40-80c-1.977-3.953-0.375-8.758,3.578-10.734c3.945-1.969,8.758-0.375,10.734,3.578L72,410.332v-46.113c0-4.418,3.578-8,8-8s8,3.582,8,8v80c0,3.711-2.555,6.934-6.164,7.785C81.227,452.149,80.609,452.219,80,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M432.219,452.219c-0.609,0-1.227-0.07-1.836-0.215c-3.609-0.852-6.164-4.074-6.164-7.785v-80c0-4.418,3.578-8,8-8s8,3.582,8,8v46.113l24.844-49.691c1.984-3.953,6.781-5.547,10.734-3.578c3.953,1.977,5.555,6.781,3.578,10.734l-40,80C438,450.551,435.195,452.219,432.219,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M504.438,372.219H8c-4.418,0-8-3.582-8-8v-16c0-4.418,3.582-8,8-8h496.438c4.418,0,8,3.582,8,8v16C512.438,368.637,508.856,372.219,504.438,372.219z" ) .attr("fill", "#E6BE8A"); shelfGroup .append("path") .attr( "d", "M0,356.219v8c0,4.418,3.582,8,8,8h496.438c4.418,0,8-3.582,8-8v-8H0z" ) .attr("fill", "#C9A07C"); return svg.node(); }34:T492,bookData = Promise.all( combinedRaw.map((d, i) => { let id_we_use = null; if (!d.work.cover_edition_key) { id_we_use = d.logged_edition.substring(7, 18); } else id_we_use = d.work.cover_edition_key; const coverUrl = "http://covers.openlibrary.org/b/olid/" + id_we_use + "-L.jpg"; const editionUrl = "https://openlibrary.org/books/" + id_we_use + ".json"; d = d.work; return d3.json(editionUrl).then((editionJson) => { return getColors(coverUrl) .then((colors) => { colors = colors.map((d) => { return { red: d._rgb[0], green: d._rgb[1], blue: d._rgb[2] }; }); // if there's no image or we can't get colors for some reason, just skip this book if (colors.length == 0) return null; return { Title: d.title, NumPages: editionJson.number_of_pages, CoverColor: colors[COVERCOLOR], AccentColor: colors[ACCENTCOLOR], CoverUrl: coverUrl }; }) .catch(function (err) { return null; }); }); }) )35:T142d,books = { const shelfWidth = 513; const shift = 8; const usableWidth = 492; const bookWidth = usableWidth / NUMBOOKS; const minHeight = 200; const maxHeight = 240; const shelfTop = 339; const shelfAdjust = maxHeight - shelfTop; const bookPadding = 3; const scale = 1; const fadeColor = "#43464A"; const svgHeight = maxHeight + bookPadding * 2 + 107; // 107 for shelf height const svg = d3 .create("svg") .attr("width", shelfWidth * scale) .attr("height", svgHeight * scale); const bookWidthRange = d3.extent(BOOKDATA, (d) => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([1, 4]); const bookHeightScale = d3.randomUniform(minHeight, maxHeight); const fontSizeScale = d3 .scaleLinear() .domain([10, 30]) .range([20, 6]) .clamp(true); const booksData = _.map(BOOKDATA, (d, i) => { const title = d.Title; const id = i; const thickness = d.NumPages ? bookWidthScale(d.NumPages) : bookWidthScale(d3.mean(bookWidthRange)); const titleLength = d.Title.length; //bookTitleScale(d.Title.length); const height = bookHeightScale(); const coverColor = d.CoverColor; const accentColor = d.AccentColor; const font = FONTS[d3.randomInt(FONTS.length)()]; const fontSize = Math.round(fontSizeScale(d.Title.length)); return { id, title, thickness, titleLength, height, coverColor, accentColor, font, fontSize }; }); console.log(booksData); var xScale = d3 .scaleLinear() .domain([0, Math.PI * 2]) .range([0, usableWidth]); var pie = d3 .pie() .sortValues(null) .value((d) => d.thickness); var adjustedData = pie(booksData); const booksGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(${shift},0)`); const books = booksGroup .selectAll("g") .data(adjustedData) .enter() .append("g"); const bookRects = books.data(adjustedData); var gradients = books .append("linearGradient") .attr("id", (d) => `${d.data.id}-gradient`) .attr("y1", "0%") .attr("y2", "0%") .attr("x1", "0%") .attr("x2", "100%"); //.attr('gradientUnits', 'userSpaceOnUse') gradients.append("stop").attr("offset", "0%").attr("stop-color", fadeColor); gradients .append("stop") .attr("offset", "7%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients .append("stop") .attr("offset", "93%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients.append("stop").attr("offset", "100%").attr("stop-color", fadeColor); books .append("rect") .style("fill", (d) => `url(#${d.data.id}-gradient)`) .style("stroke", fadeColor) .style("stroke-width", bookPadding) .merge(bookRects) .attr("x", function (d) { return xScale(d.startAngle) + bookPadding; }) .attr("width", function (d) { return xScale(d.endAngle) - xScale(d.startAngle); }) .attr("y", (d) => maxHeight - d.data.height) .attr("height", (d) => d.data.height); books .append("text") .text((d) => d.data.title) .attr("x", (d) => d.data.height / 2 + (maxHeight - d.data.height)) .attr("y", function (d) { return -(xScale(d.startAngle) + xScale(d.endAngle)) / 2 + 2; // I'm not sure why this visually needed a 2px left shift, but it did :) }) .attr("text-anchor", "middle") .attr( "fill", (d) => `rgb(${d.data.accentColor.red},${d.data.accentColor.green},${d.data.accentColor.blue})` ) .attr("transform", "rotate(90)") .attr("font-family", (d) => d.data.font) .attr("font-size", (d) => d.data.fontSize); const shelfGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(0,${shelfAdjust})`); shelfGroup .append("path") .attr( "d", "M80,452.219c-2.977,0-5.781-1.668-7.156-4.422l-40-80c-1.977-3.953-0.375-8.758,3.578-10.734c3.945-1.969,8.758-0.375,10.734,3.578L72,410.332v-46.113c0-4.418,3.578-8,8-8s8,3.582,8,8v80c0,3.711-2.555,6.934-6.164,7.785C81.227,452.149,80.609,452.219,80,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M432.219,452.219c-0.609,0-1.227-0.07-1.836-0.215c-3.609-0.852-6.164-4.074-6.164-7.785v-80c0-4.418,3.578-8,8-8s8,3.582,8,8v46.113l24.844-49.691c1.984-3.953,6.781-5.547,10.734-3.578c3.953,1.977,5.555,6.781,3.578,10.734l-40,80C438,450.551,435.195,452.219,432.219,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M504.438,372.219H8c-4.418,0-8-3.582-8-8v-16c0-4.418,3.582-8,8-8h496.438c4.418,0,8,3.582,8,8v16C512.438,368.637,508.856,372.219,504.438,372.219z" ) .attr("fill", "#E6BE8A"); shelfGroup .append("path") .attr( "d", "M0,356.219v8c0,4.418,3.582,8,8,8h496.438c4.418,0,8-3.582,8-8v-8H0z" ) .attr("fill", "#C9A07C"); return svg.node(); }36:T164d,books3 = { const shelfWidth = 513; const shift = 8; const usableWidth = 492; const bookWidth = usableWidth / NUMBOOKS; const minHeight = 200; const maxHeight = 240; const shelfTop = 341; const shelfAdjust = maxHeight - shelfTop; const bookPadding = 3; const scale = 1; const fadeColor = "#43464A"; const svgHeight = maxHeight + bookPadding * 2 + 107; // 107 for shelf height const svg = d3 .create("svg") .attr("width", shelfWidth * scale) .attr("height", svgHeight * scale); const bookWidthRange = d3.extent(BOOKDATA, (d) => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([1, 4]); const bookHeightScale = d3.randomUniform(minHeight, maxHeight); const fontSizeScale = d3 .scaleLinear() .domain([10, 30]) .range([20, 6]) .clamp(true); const booksData = _.map(BOOKDATA, (d, i) => { const title = d.Title; const id = i; const thickness = d.NumPages ? bookWidthScale(d.NumPages) : bookWidthScale(d3.mean(bookWidthRange)); const titleLength = d.Title.length; //bookTitleScale(d.Title.length); const height = bookHeightScale(); const coverColor = d.CoverColor; const accentColor = d.AccentColor; const font = FONTS[d3.randomInt(FONTS.length)()]; const fontSize = Math.round(fontSizeScale(d.Title.length)); return { id, title, thickness, titleLength, height, coverColor, accentColor, font, fontSize }; }); var xScale = d3 .scaleLinear() .domain([0, Math.PI * 2]) .range([0, usableWidth]); var pie = d3 .pie() .sortValues(null) .value((d) => d.thickness); var adjustedData = pie(booksData); const booksGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(${shift},0)`); const books = booksGroup .selectAll("g") .data(adjustedData) .enter() .append("g"); const bookRects = books.data(adjustedData); var gradients = books .append("linearGradient") .attr("id", (d) => `${d.data.id}-gradient`) .attr("y1", "0%") .attr("y2", "0%") .attr("x1", "0%") .attr("x2", "100%"); //.attr('gradientUnits', 'userSpaceOnUse') gradients.append("stop").attr("offset", "0%").attr("stop-color", fadeColor); gradients .append("stop") .attr("offset", "7%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients .append("stop") .attr("offset", "93%") .attr( "stop-color", (d) => `rgb(${d.data.coverColor.red},${d.data.coverColor.green},${d.data.coverColor.blue})` ); gradients.append("stop").attr("offset", "100%").attr("stop-color", fadeColor); let readingDividerWidth = 0; adjustedData.slice(0, DIVIDERNUM).forEach((d) => { readingDividerWidth += xScale(d.startAngle) + bookPadding; }); const groupCharWidth = 21; const groupingScale = (readingDividerWidth / groupCharWidth) * scale; books .append("rect") .style("fill", (d) => `url(#${d.data.id}-gradient)`) // .style("stroke", fadeColor) // .style("stroke-width", bookPadding) .merge(bookRects) .attr("x", function (d) { return xScale(d.startAngle) + bookPadding; }) .attr("width", function (d) { return xScale(d.endAngle) - xScale(d.startAngle); }) .attr("y", (d) => maxHeight - d.data.height) .attr("height", (d) => d.data.height); books .append("text") .text((d) => d.data.title) .attr("x", (d) => d.data.height / 2 + (maxHeight - d.data.height)) .attr("y", function (d) { return -(xScale(d.startAngle) + xScale(d.endAngle)) / 2 + 2; // I'm not sure why this visually needed a 2px left shift, but it did :) }) .attr("text-anchor", "middle") .attr( "fill", (d) => `rgb(${d.data.accentColor.red},${d.data.accentColor.green},${d.data.accentColor.blue})` ) .attr("transform", "rotate(90)") .attr("font-family", (d) => d.data.font) .attr("font-size", (d) => d.data.fontSize); const shelfGroup = svg .append("g") .attr("transform", `scale(${scale}), translate(0,${shelfAdjust})`); shelfGroup .append("path") .attr( "d", "M80,452.219c-2.977,0-5.781-1.668-7.156-4.422l-40-80c-1.977-3.953-0.375-8.758,3.578-10.734c3.945-1.969,8.758-0.375,10.734,3.578L72,410.332v-46.113c0-4.418,3.578-8,8-8s8,3.582,8,8v80c0,3.711-2.555,6.934-6.164,7.785C81.227,452.149,80.609,452.219,80,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M432.219,452.219c-0.609,0-1.227-0.07-1.836-0.215c-3.609-0.852-6.164-4.074-6.164-7.785v-80c0-4.418,3.578-8,8-8s8,3.582,8,8v46.113l24.844-49.691c1.984-3.953,6.781-5.547,10.734-3.578c3.953,1.977,5.555,6.781,3.578,10.734l-40,80C438,450.551,435.195,452.219,432.219,452.219z" ) .attr("fill", "#868491"); shelfGroup .append("path") .attr( "d", "M504.438,372.219H8c-4.418,0-8-3.582-8-8v-16c0-4.418,3.582-8,8-8h496.438c4.418,0,8,3.582,8,8v16C512.438,368.637,508.856,372.219,504.438,372.219z" ) .attr("fill", "#E6BE8A"); shelfGroup .append("path") .attr( "d", "M0,356.219v8c0,4.418,3.582,8,8,8h496.438c4.418,0,8-3.582,8-8v-8H0z" ) .attr("fill", "#C9A07C"); const dividerGroup = svg .append("g") .attr("transform", `translate(${shift},0)`); dividerGroup .append("text") .text("{") .attr("transform", `translate(100,100) rotate(90) scale(${groupingScale})`); // { return svg.node(); }37:[] 31:{"id":"ef336d2653c38c57","slug":"spine-generator-open-library-edition","title":"Spine generator OPEN LIBRARY EDITION","thumbnail":"1aa56e20298bdc1d2393fee4343989abbe941c0542c93cdb072d937a14163ee6","access_level":"public","create_time":"$D2021-08-26T03:22:22.698Z","update_time":"$D2024-10-03T18:48:28.769Z","view_time":null,"first_public_time":"$D2021-08-26T18:47:49.066Z","has_unpublished_edits":null,"fork":{"id":"4f01c43ac531ce2a","slug":"spine-generator-v2","title":"Spine Generator v2","owner":{"id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews"}},"stars":12,"starred":false,"owner":{"type":"team","id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":"starter_2024"},"version":1978,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"543390bedabcfda6","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":null}],"members":[{"type":"individual","id":"543390bedabcfda6","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":{"id":"50b2cb6cd0df3666","slug":"spine-generator","title":"Spine generator","owner":{"id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews"}},"type":"notebook","body":{"title":"Spine generator OPEN LIBRARY EDITION","cells":[{"id":0,"value":"# Spine generator OPEN LIBRARY EDITION","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1739,"value":"An always up-to-date bookshelf with what I'm reading and what I've recently finished, powered by Open Library's APIs.\n\nCheck out the Get the data section for more info 🤓","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1905,"value":"Set your Open Library [reading log to public](https://openlibrary.org/account/privacy) and enter your Open Library username in the field below to have this data viz show YOUR currently reading & recently finished books!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1914,"value":"You can also open the side menu for the actual image cell below and download the bookshelf image as an svg or png if you want to use it as a background!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1890,"value":"viewof username = Inputs.text({\n label: \"Open Library username\",\n placeholder: \"Enter your username\",\n value: \"stinkerelly\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1545,"value":"viewof NUMBOOKS = Inputs.range([6, 18], {\n value: 13,\n step: 1,\n label: \"Number of books to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1695,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1753,"value":"FYI - you could easily fork this and get it working for yourself by:\n1. Getting all your data into Open Library. They have [a tool for importing from Goodreads](https://openlibrary.org/account/import)\n2. Replacing my username with yours in the textbox at the top\n\nMake sure your [\"Reading log\" is set to public](https://openlibrary.org/account/privacy), otherwise you can't get your books via API 😢\n\nENJOY FELLOW BOOK LOVERS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"md`## Get the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1444,"value":"I originally started this project (see collection) using Goodreads APIs, since that's where all my data was, but they're jerks and shut down their API (🖕 Amazon).\n\nWhen I had free time in 2021, I ported all my data to [Open Library](https://openlibrary.org/) and am using it to track what I'm currently reading and just finished rather than Goodreads.\n\nSince Open Library actually has functional APIs, I can now very easily grab that data (as long as I keep my \"shelves\" public) so I can visualize it.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1755,"value":"### urls to grab the book data from Open Library\n\nthis will use your username instead of \"stinkerelly\" if you update the textbox up top\n\nand don't make fun of my username, it is a nickname from my dad, THANKS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1330,"value":"currentlyReadingUrl = \"https://openlibrary.org/people/\" +\n username +\n \"/books/currently-reading.json\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1332,"value":"recentlyFinishedUrl = \"https://openlibrary.org/people/\" +\n username +\n \"/books/already-read.json?limit=18\"\n// recentlyFinishedUrl = \"https://openlibrary.org/people//books/already-read.json?limit=18\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1789,"value":"### data stuff","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1337,"value":"currentlyReadingRaw = d3.json(currentlyReadingUrl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1339,"value":"recentlyFinishedRaw = d3.json(recentlyFinishedUrl)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1845,"value":"DIVIDERNUM = currentlyReadingRaw.reading_log_entries.length","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1341,"value":"combinedRaw = currentlyReadingRaw.reading_log_entries.concat(\n recentlyFinishedRaw.reading_log_entries\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1451,"value":"An example of getting color data from an image from the Open Library covers API:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1422,"value":"getColors(\"http://covers.openlibrary.org/b/olid/OL28471290M-L.jpg\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"Open Library's data model for books looks like this:\n\n- work (a book)\n - edition (a version of a book)\n - edition (a version of a book)\n\nWhen I grab my currently reading and recently finished books, I'm grabbing the works (which makes sense), but works don't have edition-specific data associated with them, like publish date, or number of pages.\n\nFor my purposes, the only edition-specific data I need is the number of pages, but this still means I have to make an extra API call to get the edition. \n\nBelow, I'm also grabbing the edition's cover art from the [Open Library covers API](https://openlibrary.org/dev/docs/api/covers), and then using that to get a color palette from the [get-image-colors library](https://github.com/colorjs/get-image-colors).","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1936,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1940,"value":"bookData","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1399,"value":"BOOKDATA = bookData.filter((d) => d).slice(0, NUMBOOKS)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":111,"value":"md`## Play around with book appearance`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1745,"value":"Another appearance option...","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"// FONTS = [\"serif\", \"sans-serif\", \"cursive\", \"fantasy\", \"monospace\"]\nFONTS = [\n \"Verdana\",\n \"Optima\",\n \"Garamond\",\n \"Didot\",\n \"Copperplate\",\n \"Lucida Bright\"\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":992,"value":"md`### testing different colors from the palette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1478,"value":"These sliders are just for me to experiment what looks best for the book spines.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1430,"value":"viewof ACCENTCOLOR = Inputs.range([0, 5], {\n value: 1,\n step: 1,\n label: \"Accent Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1420,"value":"viewof COVERCOLOR = Inputs.range([0, 5], {\n value: 0,\n step: 1,\n label: \"Cover Color\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1908,"value":"## playing around with a divider for currently reading","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1817,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1808,"value":"### early book shape explorations","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1173,"value":"bookPath = 'M -19,20 L 9,20 L 5,1 L -15,1 Z'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":117,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1169,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":165,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":97,"value":"d3=require('d3');","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1311,"value":"getColors = require(\"https://bundle.run/get-image-colors@4.0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1123,"value":"import { slider } from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"## todos\n- [x] Fix title spacing\n- [ ] Flip some titles horizontally?\n- [x] Figure out how to do random fonts\n- [ ] OR do fonts by genre!! (not possible with Open Library)\n- [x] Get better title colors (kinda)\n- [x] Get better fonts","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W37","stdlib":"1","titling":"auto"}} 32:"$31:body"