31:Tb78,master = { let year = select_year_wrp; const reads = d3.sort( selectedData.progress, (a, b) => d3.ascending(a.title, b.title) || d3.ascending(a.date, b.date) ); const booksFinished = reads.filter((d) => d.event === "finished"); console.log(controls.sizes.w, booksFinished, selectedData.progress); const thisData_summary = selectedData.summary; const dates = []; const angle = d3 .scaleTime() .domain(thisData_summary.dateExtent) .range([2 * Math.PI, 0]); function getPos(d, type) { const r = d.page; const a = angle(d.date) + Math.PI / 2; return type === "x" ? r * Math.cos(a) : r * Math.sin(a); } for (let i = 1; i <= 12; i++) { const month = i < 10 ? `0${i}` : i; const date = new Date(`${year}-${month}-01`); const d = { date, page: thisData_summary.maxPages, text: toolkit_notebook.month_format(date) }; d.x = getPos(d, "x"); d.y = getPos(d, "y"); dates.push(d); } return Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginLeft: toolkit_notebook.get_rel_size_h(30), marginRight: toolkit_notebook.get_rel_size_h(30), marginTop: 0 + Math.abs(controls.sizes.h - controls.sizes.w) / 2, marginBottom: toolkit_notebook.get_rel_size_h(60) + Math.abs(controls.sizes.h - controls.sizes.w) / 2, style: { backgroundColor: colors.bkg }, x: { ticks: "none", labelArrow: "none", label: "" }, y: { ticks: "none", labelArrow: "none", label: "" }, r: { domain: [1, 2], range: [10, toolkit_notebook.get_rel_size_w(4)] }, color: toolkit_notebook.plot.color_rating, marks: [ // axis Plot.link(dates, { x1: 0, y2: 0, x: "x", y: "y", opacity: 0.2, stroke: colors.text, strokeDasharray: 2 }), Plot.text(dates, { x: "x", y: "y", fill: colors.axis_y_axis, text: "text" }), // lines Plot.link(booksFinished, { x: 0, y: 0, x2: (d) => getPos(d, "x"), y2: (d) => getPos(d, "y"), z: "title", strokeWidth: toolkit_notebook.get_rel_size_w(10), stroke: "my_rating", mixBlendMode: "screen", curve: "cardinal" }), Plot.dot( booksFinished.filter((d) => d.shelves.includes("left-a-mark")), { x: (d) => getPos(d, "x"), y: (d) => getPos(d, "y"), r: (d) => 2, stroke: "white", mixBlendMode: "screen", symbol: "asterisk" } ), Plot.text( dates.filter((d) => d.text === "07"), { ...config.h1, dx: -toolkit_notebook.get_rel_size_w(0), dy: toolkit_notebook.get_rel_size_h(40), text: (d) => `Goodreads Wrapped ${year}`, x: "x", y: "y", fill: "white" } ) ] }); }32:T495,Books have always been my companions and my mentors: I travelled different worlds long before I could fly on my own. I learnt about love, grief, hate or hope before I even fully experienced them. A few years ago, though, I noticed that I no longer had time for one of my favourite hobbies. Social media crept into all those moments when, in the past, I would be reading. I decided to fight it. In 2024, I challenged myself to read 12 books, one per month. I ended up reading 15. So in 2025, I decided to keep the challenge and aim for 15 books again. I read ${selectedData.summary.totalBooks}. This notebook is a summary of the books that accompanied me this year: sad and happy stories, light books that felt more like entertainment, and deep ones that left marks on me. When I started the challenge, I also gave myself two rules: * I would not judge myself for what I was reading. Not everything can be high literature. Sometimes we want something light to escape reality, and that's okay. * I would try not to read the synopsis of the books. Let authors surprise or shock me. Some of my favourite readings wouldn't have been the same if I had known what was coming.33:Tc6c,what_did_i_read = { let year = select_year_wrp; const thisData = selectedData.data.sort((a, b) => a.my_rating - b.my_rating); const thisData_summary = selectedData.summary; const chart = Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(75), marginBottom: toolkit_notebook.get_rel_size_h(150), marginLeft: toolkit_notebook.get_rel_size_w(30), marginRight: toolkit_notebook.get_rel_size_w(30), style: { backgroundColor: colors.bkg }, y: { ticks: "none", tickFormat: (d) => "", label: "", labelArrow: "none" }, x: { tickSize: toolkit_notebook.get_rel_size_h(16), label: "", labelArrow: "none" }, color: toolkit_notebook.plot.color_rating, marks: [ Plot.rectY( thisData, Plot.stackX({ x: "num_pages", y2: "num_pages", // y2 to avoid stacking by y title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${d.num_pages} pages` ].join("\n\n"), insetLeft: 0.7, insetRight: 0.7, strokeWidth: toolkit_notebook.get_rel_size_w(1), fill: "my_rating", tip: true }) ), Plot.dot( thisData, Plot.stackX({ x: "num_pages", y: 0, dy: toolkit_notebook.get_rel_size_h(8), r: toolkit_notebook.get_rel_size_w(3), stroke: "my_rating", strokeWidth: toolkit_notebook.get_rel_size_w(1.5), symbol: "asterisk", opacity: (d) => (d.shelves2.includes("left-a-mark") ? 1 : 0) }) ), // legend Plot.text(["Rating"], { ...config.legends, x: 0, dx: 0 }), Plot.dot([1, 2, 3, 4, 5], { ...config.legends, x: (d, i) => thisData_summary.totalPages * 0.09 + d * thisData_summary.totalPages * 0.1, stroke: colors.dotStroke, strokeWidth: toolkit_notebook.get_rel_size_w(0.5), fill: (d) => d }), Plot.dot([6], { ...config.legends, x: (d, i) => thisData_summary.totalPages * 0.09 + d * thisData_summary.totalPages * 0.1, stroke: (d) => 5, strokeWidth: toolkit_notebook.get_rel_size_w(1.5), symbol: "asterisk" }), Plot.ruleY([0], { ...config.ruleY }), Plot.text([1, 2, 3, 4, 5, 6], { ...config.legends, x: (d, i) => thisData_summary.totalPages * 0.09 + d * thisData_summary.totalPages * 0.1, text: (d) => (d === 6 ? "Left a mark!" : d), dx: toolkit_notebook.get_rel_size_w(6) }), Plot.text([thisData_summary], { ...config.h1, text: (d) => `I read ${d.totalBooks} books in ${year}`, x: thisData_summary.totalPages / 2 }), Plot.text([thisData_summary], { ...config.h2, text: (d) => `That's ${d.totalPages.toLocaleString()} pages!`, x: thisData_summary.totalPages / 2 }) ] }); return chart; }34:Td8c,which_languages = { let year = select_year_wrp; const thisData = selectedData.data.sort( (a, b) => a.languages[0] - b.languages[0] ); const thisData_summary = selectedData.summary; thisData_summary.dataByBook = thisData_summary.dataByBook.sort((a, b) => d3.descending(a[1], b[1]) ); thisData_summary.dataByLanguage = thisData_summary.dataByLanguage.sort( (a, b) => d3.descending(a[1], b[1]) ); const word = thisData_summary.dataByBook[0][0] === thisData_summary.dataByLanguage[0][0] ? "And" : "But"; const chart = Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(75), marginBottom: toolkit_notebook.get_rel_size_h(150), marginLeft: toolkit_notebook.get_rel_size_w(30), marginRight: toolkit_notebook.get_rel_size_w(30), style: { backgroundColor: colors.bkg }, y: { ticks: [, thisData.length - 1], tickFormat: (d) => "", label: "", labelArrow: "none" }, x: { tickSize: controls.sizes.h * 0.05, label: "", labelArrow: "none" }, color: toolkit_notebook.plot.color_language, marks: [ Plot.rectY( thisData, Plot.stackX({ x: "num_pages", y2: "num_pages", // y2 to avoid stacking by y insetLeft: 0.7, insetRight: 0.7, strokeWidth: toolkit_notebook.get_rel_size_w(1), fill: (d) => d.languages[0], title: (d) => [d.title, d.author, d.languages[0], `${d.num_pages} pages`].join( "\n\n" ), tip: true }) ), Plot.dot( thisData, Plot.stackX({ x: "num_pages", y2: "num_pages", y: 0, dy: toolkit_notebook.get_rel_size_h(8), r: toolkit_notebook.get_rel_size_w(3), stroke: (d) => d.languages[0], strokeWidth: toolkit_notebook.get_rel_size_w(1.5), symbol: "asterisk", opacity: (d) => (d.shelves2.includes("left-a-mark") ? 1 : 0) }) ), Plot.dot(["English", "Spanish"], { ...config.legends, x: (d, i) => thisData_summary.totalPages * 0.2 + i * thisData_summary.totalPages * 0.3, stroke: "rgba(0, 0, 0, 1)", strokeWidth: toolkit_notebook.get_rel_size_w(0.5), fill: (d) => d }), Plot.ruleY([0], { ...config.ruleY }), Plot.text(["English", "Spanish"], { ...config.legends, x: (d, i) => thisData_summary.totalPages * 0.2 + i * thisData_summary.totalPages * 0.3, dx: controls.sizes.w * 0.025, text: (d) => (d === 6 ? "Left a mark!" : d) }), Plot.text(["Language"], { ...config.legends, x: 0, dx: -controls.sizes.w * 0.04 }), Plot.text([thisData_summary], { ...config.h1, text: (d) => `${Math.round( (100 * d.dataByBook[0][1]) / d.totalBooks )}% of them were in ${d.dataByBook[0][0]}`, x: thisData_summary.totalPages / 2 }), Plot.text([thisData_summary], { ...config.h2, text: (d) => `${word} ${Math.round( (100 * d.dataByLanguage[0][1]) / d.totalPages )}% of the pages were in ${d.dataByLanguage[0][0]}`, x: thisData_summary.totalPages / 2 }) ] }); return chart; }35:T141a,how_fast = { const reads = selectedData.progress .filter((d) => form_reading_rhythm.rating.includes(d.my_rating)) .sort((a, b) => a.my_rating - b.my_rating); const booksFinished = reads.filter((d) => d.event === "finished"); const thisData_summary = selectedData.summary; const longestRead = thisData_summary.longestRead; const sorting = "reading_days"; const longestBook = booksFinished.filter( (d) => d.reading_days === longestRead.days_real ); const marginL = 95; const marginR = 30; return Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(80), marginBottom: toolkit_notebook.get_rel_size_h(150), marginLeft: toolkit_notebook.get_rel_size_w(marginL), marginRight: toolkit_notebook.get_rel_size_w(marginR), style: { backgroundColor: colors.bkg }, color: toolkit_notebook.plot.color_rating, y: { label: "", labelArrow: "none", domain: [0, longestRead.pages_round], tickFormat: (d) => (d === longestRead.pages_round ? `${d} pages` : d) }, r: { domain: [1, 2, 3], range: [ toolkit_notebook.get_rel_size_w(3), toolkit_notebook.get_rel_size_w(6), toolkit_notebook.get_rel_size_w(3) ] }, x: { tickSize: toolkit_notebook.get_rel_size_h(8), label: "", labelArrow: "none", domain: [0, longestRead.days_round], ticks: 5, tickFormat: (d) => (d === 0 ? "Start" : d) }, marks: [ Plot.text(["days"], { text: (d) => d, x: longestRead.days_round, y: 0, dy: toolkit_notebook.get_rel_size_h(28) }), // legend Plot.text(["Rating"], { ...config.legends, x: 0, dx: -toolkit_notebook.get_rel_size_w(72), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32) }), Plot.dot([1, 2, 3, 4, 5], { ...config.legends, x: (d) => (d - 1) * longestRead.days_round * 0.12, dx: -toolkit_notebook.get_rel_size_w(25), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), stroke: colors.dotStroke, strokeWidth: toolkit_notebook.get_rel_size_w(0.5), fill: (d) => d }), Plot.dot([6], { ...config.legends, x: (d) => (d - 1) * longestRead.days_round * 0.12, dx: -toolkit_notebook.get_rel_size_w(25), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), stroke: (d) => 5, strokeWidth: toolkit_notebook.get_rel_size_w(1.5), symbol: "asterisk" }), Plot.text([1, 2, 3, 4, 5, 6], { ...config.legends, x: (d) => (d - 1) * longestRead.days_round * 0.12, dx: -toolkit_notebook.get_rel_size_w(19), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), text: (d) => (d === 6 ? "Left a mark!" : d) }), Plot.text([thisData_summary], { ...config.h1, dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), text: (d) => `I read them in ~${Math.round(d.avg_reading_rhythm)} days (avg.)`, x: longestRead.days_round / 2, dy: toolkit_notebook.get_rel_size_h(147) }), Plot.text([longestBook[0]], { ...config.h2, text: (d) => { const title = longestBook.length > 0 ? d.title.substring(0, 30) + (d.title.length > 30 ? "..." : "") : ""; return longestBook.length > 0 ? `${title} took the longest!` : ""; }, dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), x: longestRead.days_round / 2, dy: toolkit_notebook.get_rel_size_h(179) }), Plot.gridX({ strokeDasharray: "2" }), Plot.gridY({ strokeDasharray: "2" }), Plot.lineY( reads.sort((a, b) => a.my_rating - b.my_rating), { x: sorting, y: "page", z: "title", strokeWidth: toolkit_notebook.get_rel_size_w(1.5), opacity: 1, stroke: "my_rating", mixBlendMode: "screen" } ), Plot.ruleY([0], { ...config.ruleY }), Plot.dot(booksFinished, { x: sorting, y: "page", strokeWidth: toolkit_notebook.get_rel_size_w(1), fill: "my_rating", r: (d) => (!d.shelves.includes("left-a-mark") ? 1 : 2), stroke: colors.bkg }), Plot.dot( booksFinished.filter((d) => d.shelves.includes("left-a-mark")), { x: sorting, y: "page", opacity: 1, r: (d) => 3, stroke: colors.bkg, symbol: "asterisk" } ), Plot.tip( booksFinished, Plot.pointer({ x: sorting, y: "page", title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${d.reading_days} days of reading` ].join("\n\n") }) ) ] }); }36:T191b,relation_speed_rating = { const thisData = selectedData.data.filter((d) => d.my_rating >= 0); const thisData_summary = selectedData.summary; const fastestPages = Math.ceil(selectedData.summary.max_readPages_perDay / 100) * 100; const avgPagesPerDay = d3.median(thisData, (d) => { let days = toolkit_notebook.get_days( d.date_started_parsed, d.date_finished_parsed ); days = days === 0 ? 1 : days; const rythm = Math.round(d.num_pages / days); return rythm; }); const sorting = form_pages_per_day.sort === "By rating" ? "my_rating" : "date_finished_parsed"; const marginL = 95; const marginR = 30; const w = controls.sizes.w - marginL - marginR; return Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(80), marginBottom: toolkit_notebook.get_rel_size_h(150), marginLeft: toolkit_notebook.get_rel_size_w(marginL), marginRight: toolkit_notebook.get_rel_size_w(marginR), style: { backgroundColor: colors.bkg }, color: toolkit_notebook.plot.color_rating, r: { domain: [1, 2, 3], range: [ toolkit_notebook.get_rel_size_w(3), toolkit_notebook.get_rel_size_w(7), toolkit_notebook.get_rel_size_w(3) ] }, y: { label: "", labelArrow: "none", ticks: 5, tickFormat: (d) => (d === fastestPages ? `${d} pages` : d), domain: [0, fastestPages] }, fx: { label: "", tickValues: form_pages_per_day.sort === "By rating" ? [1, 2, 3, 4, 5] : [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], tickFormat: (d) => form_pages_per_day.sort === "By rating" ? d : +d % 2 == 0 ? d : "" }, marks: [ Plot.ruleY([0], { ...config.ruleY }), Plot.dot( thisData, Plot.dodgeX("middle", { fill: "my_rating", stroke: colors.bkg, fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : toolkit_notebook.month_format(d.date_finished_parsed), r: (d) => (d.shelves2.includes("left-a-mark") ? 2 : 1), y: (d) => d.num_pages / toolkit_notebook.get_days( d.date_started_parsed, d.date_finished_parsed ), tip: true, title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${Math.round( d.num_pages / toolkit_notebook.get_days( d.date_started_parsed, d.date_finished_parsed ) )} pages per day` ].join("\n\n") }) ), Plot.dot( [ { x: "01", my_rating: 1 }, { x: "02", my_rating: 2 }, { x: "03", my_rating: 3 }, { x: "04", my_rating: 4 }, { x: "05", my_rating: 5 }, { x: "06", my_rating: 1 }, { x: "07", my_rating: 2 }, { x: "08", my_rating: 3 }, { x: "09", my_rating: 4 }, { x: "10", my_rating: 1 }, { x: "11", my_rating: 2 }, { x: "12", my_rating: 3 } ], Plot.dodgeX("middle", { fill: colors.bkg, opacity: 0, stroke: colors.bkg, fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : d.x, r: 1, y: 0, tip: false }) ), Plot.gridY({ strokeDasharray: "2", stroke: colors.text }), Plot.text( thisData, Plot.dodgeX("middle", { text: (d) => { const shelves = d.shelves.split("; "); return shelves.includes("left-a-mark") ? "✱" : ""; }, filter: (d) => { const shelves = d.shelves.split("; "); return shelves.includes("left-a-mark"); }, fill: colors.bkg, className: "left-a-mark", fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : toolkit_notebook.month_format(d.date_finished_parsed), r: (d) => (d.shelves2.includes("left-a-mark") ? 2 : 1), y: (d) => d.num_pages / toolkit_notebook.get_days( d.date_started_parsed, d.date_finished_parsed ), dy: toolkit_notebook.get_rel_size_h(0.2) }) ), Plot.text( [{ my_rating: 1 }], Plot.dodgeX("middle", { y: fastestPages, fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : `01`, dx: form_pages_per_day.sort === "By rating" ? -toolkit_notebook.get_rel_size_w(80) : -toolkit_notebook.get_rel_size_w(73), dy: -toolkit_notebook.get_rel_size_h(25), textAnchor: "start", text: (d) => form_pages_per_day.sort === "By rating" ? "Reading rhythm by books' ratings (pages/day)" : "Monthly reading rhythm (pages/day)" }) ), Plot.text( [{ my_rating: 3 }], Plot.dodgeX("middle", { ...config.h1, y: 0, fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : `06`, dx: form_pages_per_day.sort === "By rating" ? toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5) : toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5) + (w / 12) * 0.5, dy: toolkit_notebook.get_rel_size_h(75), text: (d) => `I read ${avgPagesPerDay} pages* per day` }) ), Plot.text( [{ my_rating: 3 }], Plot.dodgeX("middle", { ...config.h2, y: 0, fx: (d) => form_pages_per_day.sort === "By rating" ? d.my_rating : `06`, dx: form_pages_per_day.sort === "By rating" ? toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5) : toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5) + (w / 12) * 0.5, dy: toolkit_notebook.get_rel_size_h(105), text: (d) => `*Median on days I read` }) ) ] }); }37:T1504,how_fast_by_date = { const reads = selectedData.progress // .filter((d) => form_reading_rhythm.rating.includes(d.my_rating)) .sort((a, b) => a.my_rating - b.my_rating); const booksFinished = reads.filter((d) => d.event === "finished"); const thisData_summary = selectedData.summary; const longestRead = thisData_summary.longestRead; const sorting = "date"; const longestBook = booksFinished.filter( (d) => d.reading_days === longestRead.days_real ); const seasonForReading = thisData_summary.booksBySeason[0]; const marginL = 95; const marginR = 30; return Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(80), marginBottom: toolkit_notebook.get_rel_size_h(150), marginLeft: toolkit_notebook.get_rel_size_w(marginL), marginRight: toolkit_notebook.get_rel_size_w(marginR), style: { backgroundColor: colors.bkg }, color: toolkit_notebook.plot.color_rating, y: { label: "", labelArrow: "none", domain: [0, longestRead.pages_round], tickFormat: (d) => (d === longestRead.pages_round ? `${d} pages` : d) }, x: { tickSize: toolkit_notebook.get_rel_size_h(8), label: "", labelArrow: "none", domain: thisData_summary.dateExtent, ticks: 4 }, r: { domain: [1, 2, 3], range: [ toolkit_notebook.get_rel_size_w(3), toolkit_notebook.get_rel_size_w(6), toolkit_notebook.get_rel_size_w(3) ] }, marks: [ Plot.text(["days"], { text: (d) => d, x: longestRead.days_round, y: 0, dy: toolkit_notebook.get_rel_size_h(28) }), // legend Plot.text(["Rating"], { ...config.legends, x: thisData_summary.dateExtent[0], dx: -toolkit_notebook.get_rel_size_w(65), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32) }), Plot.dot([1, 2, 3, 4, 5], { ...config.legends, x: (d, i) => new Date( thisData_summary.dateExtent[0].getTime() + i * 43 * 3600000 * 24 ), dx: -toolkit_notebook.get_rel_size_w(15), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), stroke: colors.dotStroke, strokeWidth: toolkit_notebook.get_rel_size_w(0.5), fill: (d) => d }), Plot.dot([6], { ...config.legends, x: (d, i) => new Date( thisData_summary.dateExtent[0].getTime() + 5 * 43 * 3600000 * 24 ), dx: -toolkit_notebook.get_rel_size_w(15), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), stroke: (d) => 5, strokeWidth: toolkit_notebook.get_rel_size_w(1.5), symbol: "asterisk" }), Plot.text([1, 2, 3, 4, 5, 6], { ...config.legends, x: (d, i) => new Date( thisData_summary.dateExtent[0].getTime() + i * 43 * 3600000 * 24 ), dx: -toolkit_notebook.get_rel_size_w(9), y: longestRead.pages_round, dy: -toolkit_notebook.get_rel_size_h(32), text: (d) => (d === 6 ? "Left a mark!" : d) }), Plot.text([thisData_summary], { ...config.h1, dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), text: (d) => `I loved reading in ${seasonForReading[0]}`, x: toolkit_notebook.middate(thisData_summary.dateExtent), dy: toolkit_notebook.get_rel_size_h(147) }), Plot.text(longestBook, { ...config.h2, text: (d) => `I read ${Math.round( (100 * seasonForReading[1].length) / booksFinished.length )}% of the pages just in ${seasonForReading[0]}!`, dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), x: toolkit_notebook.middate(thisData_summary.dateExtent), dy: toolkit_notebook.get_rel_size_h(177) }), Plot.gridX({ strokeDasharray: "2", stroke: colors.text }), Plot.gridY({ strokeDasharray: "2", stroke: colors.text }), Plot.lineY( reads.sort((a, b) => a.my_rating - b.my_rating), { x: sorting, y: "page", z: "title", strokeWidth: toolkit_notebook.get_rel_size_w(1.5), opacity: 1, stroke: "my_rating", mixBlendMode: "screen" } ), Plot.dot(booksFinished, { x: sorting, y: "page", strokeWidth: toolkit_notebook.get_rel_size_w(1), fill: "my_rating", r: (d) => (!d.shelves.includes("left-a-mark") ? 1 : 2), stroke: colors.bkg }), Plot.dot( booksFinished.filter((d) => d.shelves.includes("left-a-mark")), { x: sorting, y: "page", opacity: 1, r: (d) => 3, stroke: colors.bkg, symbol: "asterisk" } ), Plot.ruleY([0], { ...config.ruleY }), Plot.tip( booksFinished, Plot.pointer({ x: sorting, y: "page", title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${d.reading_days} days of reading` ].join("\n\n") }) ) ] }); }38:Tb8e,which_genres = { const thisData_summary = selectedData.summary; const mapGenres = thisData_summary.dataByGenre .sort((a, b) => b[1] - a[1]) .map((d) => d[0]) .filter((d, i) => i < 10); const thisData = thisData_summary.dataByGenreRating .filter((d) => mapGenres.includes(d.genre)) .sort((a, b) => { const a_genre = thisData_summary.dataByGenre.filter( (d) => d[0] === a.genre ); const b_genre = thisData_summary.dataByGenre.filter( (d) => d[0] === b.genre ); return b_genre[1] - a_genre[1]; }); const marginL = 140; const marginR = 30; return Plot.plot({ width: controls.sizes.w, height: controls.sizes.h, marginTop: toolkit_notebook.get_rel_size_h(65), marginBottom: toolkit_notebook.get_rel_size_h(140), marginLeft: toolkit_notebook.get_rel_size_w(marginL), marginRight: toolkit_notebook.get_rel_size_w(marginR), style: { backgroundColor: colors.bkg }, color: toolkit_notebook.plot.color_rating, y: { label: "", labelArrow: "none", grid: true }, r: { range: [ toolkit_notebook.get_rel_size_w(1), toolkit_notebook.get_rel_size_w(8) ] }, x: { label: "", ticks: 5, tickValues: [1, 2, 3, 4, 5], tickFormat: "", labelArrow: "none" }, fy: { grid: true, label: "", labelArrow: "none" }, marks: [ Plot.dot( thisData, Plot.dodgeY("middle", { fill: "my_rating", stroke: colors.bkg, fy: "genre", r: (d) => d[1], x: "my_rating", tip: true, title: (d) => [d.genre, `Books: ${d[1]}`, `Rating: ${d.my_rating}`].join("\n\n") }) ), Plot.text( [{ genre: mapGenres[0], my_rating: 1 }], Plot.dodgeY("middle", { x: "my_rating", fy: "genre", dx: -toolkit_notebook.get_rel_size_w(110), dy: -toolkit_notebook.get_rel_size_h(95), textAnchor: "start", text: (d) => "Top 10 genres, by number of books and rating" }) ), Plot.text( [{ my_rating: 3, genre: mapGenres[mapGenres.length - 1] }], Plot.dodgeY("middle", { ...config.h1, x: "my_rating", fy: "genre", dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), dy: toolkit_notebook.get_rel_size_h(91), text: (d) => `I read mostly ${mapGenres[0]}` }) ), Plot.text( [{ my_rating: 3, genre: mapGenres[mapGenres.length - 1] }], Plot.dodgeY("middle", { ...config.h2, x: "my_rating", fy: "genre", dx: toolkit_notebook.get_rel_size_w(marginR * 0.5 - marginL * 0.5), dy: toolkit_notebook.get_rel_size_h(123), text: (d) => `Also ${mapGenres[1]}, and ${mapGenres[2]}` }) ) ] }); }39:T40d,review_tabs = (function () { let reviews = selectedData.data.filter((d) => d.review !== "NA"); reviews = reviews.filter((d) => { let selection = form_reviews.rating.includes(d.my_rating); selection = form_reviews.rating.includes("Left a mark!") && d.shelves.includes("left-a-mark") ? true : selection; return selection; }); const this_html = []; reviews.forEach((d) => { const authorinfo = d.author.split(", "); const author = authorinfo[1] === "Kang" ? `${authorinfo[0]} ${authorinfo[1]}` : `${authorinfo[1]} ${authorinfo[0]}`; this_html.push( details( d.title, md`**${d.title}, by ${author}**
Rating: ${d.my_rating}${ d.shelves.includes("left-a-mark") ? " Left a mark!" : "" }
Language: ${d.languages[0]}

${ d.review }

[Review](${d.view})` ) ); }); const these_tabs = tabbed(htl.html`

${this_html}

`); return these_tabs; })()3a:Tc50,all_year_books = { // let year = select_year_wrp2; let color = wrap2_choices.color_by === "Language" ? toolkit_notebook.plot.color_language : toolkit_notebook.plot.color_rating; let sorting = wrap2_choices.sort_data === "Rating" ? "my_rating" : wrap2_choices.sort_data === "Date" ? "date_finished_parsed" : wrap2_choices.sort_data === "Pages" ? "num_pages" : wrap2_choices.sort_data === "Language" ? "languages" : wrap2_choices.sort_data; // filter by date let thisData = selectedData.full_library.filter( (d) => +toolkit_notebook.year_format(d.date_started_parsed) >= wrap2_choices.start && +toolkit_notebook.year_format(d.date_finished_parsed) <= wrap2_choices.end ); // filter by genre thisData = wrap2_choices.genres === "All" ? thisData : thisData.filter((d) => d.genres2.includes(wrap2_choices.genres)); if (wrap2_choices.sort_data === "Language") { // sort thisData = thisData.sort((a, b) => a.languages[0].localeCompare(b.languages[0]) ); } else if (wrap2_choices.sort_data === "Rating") { thisData = thisData.sort((a, b) => { const ar = a.my_rating ?? -Infinity; const br = b.my_rating ?? -Infinity; return ar - br; }); } else { thisData = thisData.sort((a, b) => a[sorting] - b[sorting]); } d3.select("#books-selected-all").html(thisData.length); const totalPages = d3 .select("#pages-selected-all") .html(d3.sum(thisData, (d) => d.num_pages)); const thisData_summary = selectedData.summary; const chart = Plot.plot({ width: controls.sizes.w2, height: controls.sizes.h2, margin: 70, style: { backgroundColor: colors.bkg }, y: { ticks: "none", tickFormat: (d) => "", label: "", labelArrow: "none" }, x: { tickSize: 16, label: "", labelArrow: "none" }, color: { ...color, legend: true }, marks: [ Plot.rectY( thisData, Plot.stackX({ z: () => 1, x: "num_pages", y2: "num_pages", // y2 to avoid stacking by y title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${d.num_pages} pages` ].join("\n\n"), insetLeft: 0.7, insetRight: 0.7, strokeWidth: 1, fill: (d) => wrap2_choices.color_by === "Language" ? d.languages[0] : d.my_rating, tip: true }) ), Plot.dot( thisData, Plot.stackX({ x: "num_pages", z: () => 1, y: 0, dy: 8, r: 3, stroke: (d) => wrap2_choices.color_by === "Language" ? d.languages[0] : d.my_rating, strokeWidth: 1.5, symbol: "asterisk", opacity: (d) => { const shelves = d.shelves.split("; "); return shelves.includes("left-a-mark") ? 1 : 0; } }) ) ] }); return chart; }3b:Te1f,all_year_rhythms = { let color = wrap3_choices.color_by === "Language" ? toolkit_notebook.plot.color_language : toolkit_notebook.plot.color_rating; let sorting = wrap3_choices.sort_data === "Reading rhythm" ? "reading_days" : wrap3_choices.sort_data === "Date" ? "date_finished_parsed" : "fakeDate"; let reads = selectedData.full_library_progress .filter( (d) => +toolkit_notebook.year_format(d.date_started_parsed) >= wrap3_choices.start && +toolkit_notebook.year_format(d.date_finished_parsed) <= wrap3_choices.end ) .sort((a, b) => a.my_rating - b.my_rating); // filter by genre reads = wrap3_choices.genres === "All" ? reads : reads.filter((d) => d.genres.includes(wrap3_choices.genres)); const booksFinished = reads.filter((d) => d.event === "finished"); const maxY = d3.max(selectedData.full_library_progress, (d) => d.page); const domain = d3.extent(booksFinished, (d) => d.fakeDate); const x = sorting === "reading_days" ? { label: "Reading rhythm (in days)", ticks: 6 } : sorting === "date_finished_parsed" ? { label: "Date", ticks: 6, domain: [ new Date(`1 January ${wrap3_choices.start}`), new Date(`1 January ${wrap3_choices.end + 1}`) ] } : { label: "Reading rhythm (in days)", ticks: 6, domain: [new Date("2024-01-01"), domain[1]], tickFormat: (d) => sorting === "fakeDate" ? `${d3.utcFormat("%B")(d)} ${ toolkit_notebook.year_format(d) === "2025" ? "2" : "1" }` : d3.utcFormat("%B")(d) }; return Plot.plot({ width: controls.sizes.w2, height: controls.sizes.h2, margin: 70, style: { backgroundColor: colors.bkg }, color: { ...color, legend: true }, x: { ...x }, y: { label: "Number of pages", ticks: 6, domain: [0, Math.ceil(maxY / 100) * 100] }, r: { domain: [1, 2, 3], range: [4, 8, 4] }, marks: [ Plot.gridX({ strokeDasharray: "2" }), Plot.gridY({ strokeDasharray: "2" }), Plot.lineY( reads.sort((a, b) => a.my_rating - b.my_rating), { x: sorting, y: "page", z: "title", strokeWidth: 1.5, opacity: 1, stroke: (d) => wrap3_choices.color_by === "Language" ? d.languages[0] : d.my_rating, mixBlendMode: "screen" } ), Plot.ruleY([0], { ...config.ruleY }), Plot.dot(booksFinished, { x: sorting, y: "page", strokeWidth: 1, fill: (d) => wrap3_choices.color_by === "Language" ? d.languages[0] : d.my_rating, r: (d) => (!d.shelves.includes("left-a-mark") ? 1 : 2), stroke: colors.bkg }), Plot.dot( booksFinished.filter((d) => d.shelves.includes("left-a-mark")), { x: sorting, y: "page", opacity: 1, r: (d) => 3, stroke: colors.bkg, symbol: "asterisk" } ), Plot.tip( booksFinished, Plot.pointer({ x: sorting, y: "page", title: (d) => [ d.title, d.author, `Rating: ${d.my_rating}`, `${d.reading_days} days of reading` ].join("\n\n") }) ) ] }); }3c:T61d,library_meta = (function () { const array = []; library.forEach((d) => { const this_progress = JSON.parse(d.progress_json).filter( (e) => !["shelved", "shelved-as"].includes(e.event) && e.date !== null ); for (var i = 0; i < this_progress.length; i++) { const percent = this_progress[i].event === "started" && this_progress[i].percent === null ? 0 : this_progress[i].event === "finished" && this_progress[i].percent === null ? 100 : this_progress[i].percent; const page = Math.round((d.num_pages * percent) / 100); const reading_days = i === 0 ? 0 : toolkit_notebook.get_days( new Date(this_progress[i].date), new Date(this_progress[0].date) ); array.push({ title: d.title, author: d.author, book_url: d.book_url, my_rating: d.my_rating, date_finished_parsed: d.date_finished_parsed, date_started_parsed: d.date_started_parsed, total_pages: d.num_pages, shelves: d.shelves .replace("read; ", "") .replace("read", "") .split("; "), languages: d.language.split("; "), genres: d.genres.split("; "), total_pages: d.num_pages, date: new Date(this_progress[i].date), reading_days: reading_days, event: this_progress[i].event, percent: percent, page: page }); } }); return array.sort((a, b) => a.date - b.date); })()3d:Tebb,selectedData = (function () { let thisData = library; const all_dataWithProgress = library_meta; thisData.forEach((d) => { d.languages = d.language.split("; "); d.genres2 = d.genres.split("; "); d.shelves2 = d.shelves.split("; "); d.my_rating = Number.isFinite(d.my_rating) ? d.my_rating : -1; }); thisData = thisData.sort((a, b) => { const first = a.languages[0].localeCompare(b.languages[0]); return first !== 0 ? first : a.num_pages - b.num_pages; }); const thisGenres = all_genres.filter( (d) => toolkit_notebook.year_format(d.date_finished_parsed) === select_year_wrp && d.my_rating >= 0 ); const dataWithProgress = all_dataWithProgress.filter( (d) => toolkit_notebook.year_format(new Date(d.date)) === select_year_wrp ); const booksFinished = dataWithProgress .sort((a, b) => a.my_rating - b.my_rating) .filter((d) => d.event === "finished"); const selectedData = thisData.filter( (d) => toolkit_notebook.year_format(d.date_finished_parsed) === select_year_wrp ); const longestRead_days_real = d3.max(booksFinished, (d) => d.reading_days); const longestRead_days_round = Math.ceil(longestRead_days_real / 10) * 10; const longestRead_pages_real = d3.max(booksFinished, (d) => d.page); const longestRead_pages_round = Math.ceil(longestRead_pages_real / 100) * 100; const avgReadingRhythm = d3.mean(booksFinished, (d) => d.reading_days); const dateExtent = [ new Date(`1 Jan ${select_year_wrp}`), new Date(`1 Jan ${+select_year_wrp + 1}`) ]; const maxReadPagesPerDay = d3.max(selectedData, (d) => { let days = toolkit_notebook.get_days( d.date_started_parsed, d.date_finished_parsed ); const rhythm = Math.round(d.num_pages / days); return rhythm; }); const dataByGenre = d3 .rollups( thisGenres, (v) => v.length, (d) => d.genre ) .sort((a, b) => b[1] - a[1]); const dataByGenreRating = d3.rollups( thisGenres, (v) => v.length, (d) => `${d.genre} - ${d.my_rating}` ); dataByGenreRating.forEach((d) => { const info = d[0].split(" - "); d.genre = info[0]; d.my_rating = +info[1]; }); const summary = { dateExtent: dateExtent, totalBooks: selectedData.length, totalPages: d3.sum(selectedData, (d) => d.num_pages), maxPages: d3.max(selectedData, (d) => d.num_pages), dataByGenre: dataByGenre, dataByGenreRating: dataByGenreRating, dataByLanguage: d3.rollups( selectedData, (v) => d3.sum(v, (d) => d.num_pages), (d) => d.languages[0] ), dataByBook: d3.rollups( selectedData, (v) => v.length, (d) => d.languages[0] ), booksBySeason: d3.groups(booksFinished, (d) => toolkit_notebook.getSeason(d.date) ), longestRead: { days_real: longestRead_days_real, days_round: longestRead_days_round, pages_real: longestRead_pages_real, pages_round: longestRead_pages_round }, avg_reading_rhythm: avgReadingRhythm, max_readPages_perDay: maxReadPagesPerDay }; all_dataWithProgress.forEach((d) => { const day = d3.utcFormat("%d")(d.date); const month = d3.utcFormat("%m")(d.date); const year = // toolkit_notebook.year_format(d.date_finished_parsed) > // toolkit_notebook.year_format(d.date_started_parsed) && +toolkit_notebook.year_format(d.date) > +toolkit_notebook.year_format(d.date_started_parsed) ? 2025 : 2024; d.fakeDate = new Date(`${year}-${month}-${day}`); }); return { data: selectedData, progress: dataWithProgress, genres: thisGenres, summary: summary, full_library: thisData, full_library_progress: all_dataWithProgress }; })()3e:T465,toolkit_notebook = ({ ...toolkit, year_range: d3.extent(library, (d) => d.date_started_parsed), get_rel_size_w: function (d) { return Math.round(1000 * (d / 300) * controls.sizes.w) / 1000; }, get_rel_size_h: function (d) { return Math.round(1000 * (d / 375) * controls.sizes.h) / 1000; }, get_rel_size_w_type: function (d) { const n = Math.round(1000 * (d / 300) * controls.sizes.w) / 1000; return n > 20 ? 20 : n; }, get_rel_size_h: function (d) { return Math.round(1000 * (d / 375) * controls.sizes.h) / 1000; }, scaleR: d3 .scaleSqrt() .domain([1, 5]) .range([0.006 * controls.sizes.w, 0.02 * controls.sizes.w]) .clamp(true), plot: { color_rating: { range: [ "#666", "#666", "#910044", "#E3009B", "#FAD220", "#00BD81", "#7AEBFF" ], domain: ["Unknown", -1, 1, 2, 3, 4, 5], legend: false, // reverse: true, label: "My rating" }, color_language: { range: ["#E3009B", "#7AEBFF"], domain: ["Spanish", "English"], label: "Languages" } } })3f:T830,40:T675,// import { tabbed } from "@mootari/tabs" function tabbed(view, options = {}) { const { defaultLabel = "Settings", selected = 0, scope = DOM.uid("tabbed").id, theme: _theme = theme } = options; const tabs = html`

`; const style = html`