2e:null 2f:["$","title",null,{"children":"Spine Generator (old and broken thanks to goodreads) | Shana Matthews | Observable"}] 34:Tcb0,{ const bookWidth = 50; const numBooks = 20; const minHeight = 200; 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(data, d => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([1,10]); const bookHeightScale = d3.randomUniform(minHeight, maxHeight); const booksData = _.map(data, (d, i) => { const title = d.Title; const id = i; const imgUrl = d.ImageURL; const thickness = bookWidthScale(d.NumPages); const titleLength = d.Title.length; //bookTitleScale(d.Title.length); const height = bookHeightScale(); const coverColor = d.AccentColor; const accentColor = d.CoverColor; return { id, title, imgUrl, thickness, titleLength, height, coverColor, accentColor } }); 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 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 => d.data.coverColor) .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)`); return svg.node(); }35:T42f,{ const spacing = 100; const bookScale = 3; const numBooks = 5; const svg = DOM.svg(spacing*numBooks*bookScale, 100*bookScale); const bookWidthRange = d3.extent(data, d => d.NumPages); const bookWidthScale = d3.scaleLinear().domain(bookWidthRange).range([30, 100]); const booksData = _.map(data, d => { const title = d.Title; const imgUrl = d.ImageURL const thickness = bookWidthScale(d.NumPages) return { title, imgUrl, thickness } }); var offset = 0; const books = d3.select(svg) .selectAll('g') .data(booksData) .enter() .append('g') .attr( 'transform', (d, i) => `translate(${(i * spacing) + d.thickness}, 0)`); books.append('rect') .attr('width', d => d.thickness) .attr('height', 100 * bookScale) .attr('x', d => -d.thickness) .attr('y', 0); books.append('text').text(d => d.title) .attr('x', 5) .attr('y', d => (d.thickness / 2) + 4) .attr('fill', "white") .attr('transform', d => `rotate(90)`); return svg; }36:[] 32:{"id":"75359e578d9f3f5c","slug":"spine-generator-old-and-broken-thanks-to-goodreads","title":"Spine Generator (old and broken thanks to goodreads)","thumbnail":"52bd896efafd58ed91e650e74a8ebb307655c865463aa509bcda1d7c996ab7ae","access_level":"public","create_time":"$D2020-10-29T18:46:43.550Z","update_time":"$D2021-07-31T03:53:33.969Z","view_time":null,"first_public_time":"$D2021-09-20T18:17:01.573Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews","avatar_url":"https://avatars-next.observableusercontent.com/340ef6744a9ac2c729c6d78fcd6cba4605a6eb050c76e0528bc44eef6752a274","tier":"starter_2024"},"version":772,"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":1,"collection":{"id":"50b2cb6cd0df3666","slug":"spine-generator","title":"Spine generator","owner":{"id":"c2c4bf3817594e7a","login":"shanamatthews","name":"Shana Matthews"}},"type":"notebook","body":{"title":"Spine Generator (old and broken thanks to goodreads)","cells":[{"id":0,"value":"md`# Spine Generator (old and broken thanks to goodreads)`","pinned":false,"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":94,"value":"md`## Get the data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":713,"value":"md`The code to grab my book data from GoodReads and convert it into a usable CSV is here: https://github.com/shanamatthews/spine-generator`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":96,"value":"//d3 method to get csv file\ndata = d3.csv('https://raw.githubusercontent.com/shanamatthews/spine-generator/main/recently-read.csv')","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":706,"value":"md`## Actually make some books from the data!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":384,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":710,"value":"md`## A failed attempt`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":148,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"