Project 1 Week 1/4: Starting D3

GOAL: Set up my project and identify resources.

For my first project, I want to build a D3 visualization! I’m going to set a goal visualization to model after, then learn how to do it. Last semester I scraped the The Adventure Zone fan wiki to build a data set of every line in the first arc of the podcast.

Today, I’m going to try to:

  • Look up example visualizations
  • Find resources to help me learn
  • Outline my project goals for the following 3 weeks
  • [if time] Start working on the visualization

STEP 1 + 2: Look up example visualizations and find resources

(This turned into finding resources and deciding what I want to visualize.)

I browsed around and found some good resources! A large part of my inspiration for working on this is The Pudding, so I started by searching their website along with the websites of Nadieh Bremer and Shirley Wu. The Pudding has their editorial process publicly available, which I’ll refer to when I get started building. Shirley Wu’s Hamilton visualization is what made me aware of D3 in the first place, and I knew she had a blog post documenting her process, so I’ll also be referring to that as I go along.

I’m having trouble finding a visualization that is close to something I’d like to build for my project. I’m not really sure what I want to visualize, so I decided to clean my data a little and brainstorm. I found that I have the following usable fields:

  • Campaign
  • Episode #
  • Text
  • Host
  • Primary Line Type (NPC, Justin, Announcer, multiple people, secondary text, etc.)
  • Major NPC (Not NPC, and then characters like Lucretia, Angus, etc.)
  • Length (# of characters)
  • MagnusRush (contains “Magnus rushes in”)
  • Song (contains “song”)

I’m still not sure what I want to visualize, but I have a better understanding of my available data.

As part of finding visualization resources, I should probably get ready to use D3. I realized that I didn’t have an IDE for Javascript, so I downloaded Visual Studio Code because this website listed it.

STEP 3: Outline my project goals

Now that my first day is almost over, I’m going to outline what I plan to do for the next 3 weeks.

  1. Continue learning my IDE and start using basic level Javascript resources to learn the general syntax
  2. Start learning the D3 library tools and familiarize myself with its functions
  3. Try to build a very simple visualization from my TAZ data

My immediate next step plans are to start watching YouTube tutorials about how to navigate VSC and start writing some simple JS code.

Leave a comment