2d:null 2e:["$","title",null,{"children":"Spine Generator v2 | Shana Matthews | Observable"}] 33:Tc1c,books = { const bookWidth = 50; const minHeight = 250; const maxHeight = 300; const bookPadding = 3; const fadeColor = "#43464A"; const svgWidth = NUMBOOKS * bookWidth + bookPadding * 2; const usableWidth = NUMBOOKS * bookWidth; const svgHeight = maxHeight + bookPadding * 2; const usableHeight = maxHeight; const svg = d3 .create("svg") .attr("width", svgWidth) .attr("height", svgHeight) // .attr("font-family", "serif") // want to play with this .attr("font-size", "10"); const bookWidthRange = d3.extent(BOOKDATA, (d) => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([1, 10]); const bookHeightScale = d3.randomUniform(minHeight, maxHeight); const booksData = _.map(BOOKDATA, (d, i) => { const title = d.Title; const id = i; const thickness = bookWidthScale(d.NumPages); const titleLength = d.Title.length; //bookTitleScale(d.Title.length); const height = bookHeightScale(); const coverColor = d.CoverColor; const accentColor = d.AccentColor; return { id, title, thickness, titleLength, height, coverColor, accentColor }; }); 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 books = svg.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) => d.data.coverColor); gradients .append("stop") .attr("offset", "93%") .attr("stop-color", (d) => d.data.coverColor); 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) - d.data.titleLength * 1.7 ) // pretty weird approximation of correct .attr("y", function (d) { return -(xScale(d.startAngle) + xScale(d.endAngle)) / 2; }) .attr("fill", (d) => d.data.accentColor) .attr("transform", (d) => `rotate(90)`) .attr("font-family", FONT); return svg.node(); }34:T40d,cutDownData = Promise.all(smaller.map(function(d) { const dateYear = d["Date Read"]?.split('/')[0]; const dateMonth = d["Date Read"]?.split('/')[1] - 1; // months are zero-indexed const dateDay = d["Date Read"]?.split('/')[2]; const isbn = Number(d["ISBN13"].replace(/\D/g,'')); const imageUrl = "http://covers.openlibrary.org/b/isbn/"+ isbn + "-L.jpg"; var colorPalette = { Vibrant: "asdffa", DarkMuted: "fdsadsf" } var toret = Vibrant.from(imageUrl).getPalette() .then( function(palette) { colorPalette = palette; console.log(colorPalette); return { Title: d["Title"], Url: imageUrl, CoverColor: colorPalette.Vibrant.getHex(), AccentColor: colorPalette.DarkMuted.getHex(), NumPages: d["Number of Pages"], DateRead: new Date(dateYear, dateMonth, dateDay), Status: d["Exclusive Shelf"] }; }, function(err) { console.log(err); return null; }); return toret; }));35:[{"id":"09be986ac48f23e97e046355f3bec9c280ea26d50eb5f3b5634976a1836cd79893f0e413e1e9261c0d738e53959dd920641c0dacbcdfd18d86e1918b2a9456b8","href":"https://static.observableusercontent.com/files/09be986ac48f23e97e046355f3bec9c280ea26d50eb5f3b5634976a1836cd79893f0e413e1e9261c0d738e53959dd920641c0dacbcdfd18d86e1918b2a9456b8","name":"goodreads_library_export.csv","type":"text/csv","lastModified":1620241767654.025,"size":182874}] 31:{"id":"4f01c43ac531ce2a","slug":"spine-generator-v2","title":"Spine Generator v2","thumbnail":"3e8972e817be1625e1108eed7d020886af7392843db42be39168eaf6ddf4cd22","access_level":"public","create_time":"$D2021-05-05T19:06:15.626Z","update_time":"$D2021-08-19T18:36:49.352Z","view_time":null,"first_public_time":"$D2021-05-20T21:31:48.013Z","has_unpublished_edits":null,"fork":{"id":"75359e578d9f3f5c","slug":"spine-generator-old-and-broken-thanks-to-goodreads","title":"Spine Generator (old and broken thanks to goodreads)","owner":{"id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews"}},"stars":0,"starred":false,"owner":{"type":"team","id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":"starter_2024"},"version":1270,"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":3,"collection":{"id":"50b2cb6cd0df3666","slug":"spine-generator","title":"Spine generator","owner":{"id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews"}},"type":"notebook","body":{"title":"Spine Generator v2","cells":[{"id":0,"value":"md`# Spine Generator v2`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$33","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1126,"value":"// point bound\nviewof NUMBOOKS = slider({\n min: 0,\n max: 18,\n step: 1,\n value: 8, // initial value\n title: \"Number of books to display\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1144,"value":"viewof FONT = Inputs.select(fonts, {\n value: \"serif\",\n label: \"Default book font\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1252,"value":"fonts = [\"serif\", \"sans-serif\", \"cursive\", \"fantasy\", \"monospace\"]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1151,"value":"### todo\n- Fix title spacing\n- Flip some titles horizontally?\n- Figure out how to do random fonts\n- OR do fonts by genre!!\n- Get better title colors","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":772,"value":"md`Since Goodreads shut down their api and deactivated api keys with no warning (🖕🖕🖕 Amazon), I've had to rework how I get my data for my books spines graphic.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":769,"value":"origData = FileAttachment(\"goodreads_library_export.csv\").csv({typed: true});","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":917,"value":"md`### cut down the data to just the columns we want`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":942,"value":"md`and grab the cover art from the [Open Library covers API](https://openlibrary.org/dev/docs/api/covers), using that to get a color palette from the [vibrant library](https://github.com/Vibrant-Colors/node-vibrant).`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1049,"value":"smaller = origData.slice(0,100);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1092,"value":"filteredCutDownData = cutDownData.filter(d => d !== null)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":869,"value":"currentlyReading = filteredCutDownData.filter(d => d.Status === \"currently-reading\").slice(0, NUMBOOKS);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":871,"value":"recentlyRead = filteredCutDownData.filter(d => d.Status ===\"read\").slice(0, NUMBOOKS);","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":889,"value":"BOOKDATA = recentlyRead;","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1163,"value":"Table(BOOKDATA);","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":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":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":992,"value":"md`### testing different colors from the palette`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":914,"value":"Vibrant.from('http://covers.openlibrary.org/b/isbn/9780142000656-L.jpg').getPalette();","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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":155,"value":"// import lodash\n_ = require('lodash')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":909,"value":"Vibrant=require('node-vibrant@3.2.1-alpha.1/dist/vibrant.js')","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":1166,"value":"import { Table } from \"@observablehq/inputs\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 32:"$31:body"