Books I’ve Read

Here are some books I’ve read.

theme_obj = FileAttachment("../../themes/improper-prior-observable.json").json()
theme = theme_obj.scheme

// Data
books = transpose(books_t)
pretty_books = transpose(pretty_books_t)
reading_timeline = transpose(reading_timeline_t)

// Helpers
parser = d3.timeParse("%Y-%m-%d")

Summary

Pages Read

// TODO Would be nice to get both formats faceted, but I can't figure out how to
// plot different facets at different scales.

Plot.plot({
  height: reading_timeline.length * 18,
  marginLeft: 120,
  x: {
    axis: "top",
    grid: true,
    domain: [new Date("2021-01-01"), new Date("2023-01-01")],
    label: "Date Finished"
  },
  y: {
    label: "Pages Read"
  },
  marks: [
    Plot.line(reading_timeline.filter(d => d.length_units == "pages"), {
      x: "date_finished",
      y: "total_pages_read_hours_listened",
      stroke: theme[0]
    })
  ]
})

Hours Listened

Plot.plot({
  height: reading_timeline.length * 18,
  marginLeft: 120,
  x: {
    axis: "top",
    grid: true,
    domain: [new Date("2021-01-01"), new Date("2023-01-01")],
    label: "Date Finished"
  },
  y: {
    label: "Hours Listened"
  },
  marks: [
    Plot.line(reading_timeline.filter(d => d.length_units == "hours"), {
      x: "date_finished",
      y: "total_pages_read_hours_listened",
      stroke: theme[0]
    })
  ]
})

Rating Distribution

Plot.plot({
  height: reading_timeline.length * 18,
  marginLeft: 120,
  x: {
    label: "Rating",
    domain: [0, 5]
  },
  y: {
    label: "Count"
  },
  marks: [
    Plot.rectY(reading_timeline, 
               Plot.binX({y: "count"}, 
                         {x: "rating", thresholds: [0, 0.5, 1, 1.5, 
                                                    2, 2.5, 3, 3.5, 
                                                    4, 4.5, 5]})
    )
  ]
})

Full Table

Inputs.table(pretty_books, {
  rows: 30,
  layout: "fixed"
})

About This Page

This page serves two purposes. First, I want somewhere to track the books I’ve read and my incredibly subjective ratings. Second, I want a sandbox where I can play with Javascript tools like D3 and Observable.