How We Used D3 to Build Visualizations of 200 Literary Classics

In our previous post, we explained the design process behind creating our new Chart Boards, which are data visualizations of the themes and plot points in each of the books we cover on LitCharts. In this post we’ll describe the technical approach that makes the design work, including how we used D3 and jQuery to make our visualizations interactive, responsive, and scalable across our collection of 200 guides to great books.

Our first big decision was what shape to use. We started with various iterations on a mostly vertical design, all of which could be built with mostly vanilla HTML, CSS, and JavaScript. When ultimately we decided to use a more complex radial design, D3 immediately came to mind, not just because it’s the go-to solution for complex and beautiful web-based data visualizations, but also because we figured out that it was used in the example below from The Guardian, which had become a strong influence on our approach:

A Visualization from The Guardian that Influenced Our Decision to Use D3
A Visualization from The Guardian that Influenced Our Decision to Use D3

How We Created Data Visualizations of 200 Books (and Counting)

We’re excited to announce that we just launched the first (of what we hope will be many) data visualizations based on our analysis of the books, plays, and novels we cover. In this post I’m going to share the details behind our interest in creating data visualizations and the design decisions, including screenshots of the design as it evolved, which led us to build this particular visualization.

Why Do Visualizations?

First off, data visualizations of books, when done well, are awesome. For instance, check out the work of Stefanie Posavec or any of the visualizations mentioned in this eBook Friendly blog post.

The Chart Board design for The Catcher in the Rye.
Visualization of themes of novels nominated for the Man Booker Prize (by Johanna Kamradt and Christian Tate)

So there’s an aspect of George Mallory’s “because it’s there” in our desire to make book visualizations: for the pure fun and challenge of it. (Which is also part of why we run LitCharts as a small and completely independent company: so we get to make “because it’s there” choices if we encounter things that are, indeed, there.)

At the same time, though data visualizations of books were not something we were thinking about doing when we created LitCharts, when the possibility occurred to us it felt like a big of course—doing visualizations arose naturally from LitCharts’s DNA. After all, we originally built LitCharts to break down and explain literature in ways that are more structured, more intuitive, and more visual than anything found in other literature guides (including SparkNotes, of which we were the original editors). That desire drove the structure, layout, and design of our guides, from the choice to do side-by-side summary and analysis, to our color-coding and tracking of themes across our summaries and quotes.