Project 1 Week 2/4: Rerouting

GOAL: Just do some JavaScript!

Today I’d like to just play around and experiment with JavaScript. I’m fixing a mistake from last week and downloading an actual IDE (Visual Studio IDE) instead of Visual Studio Code. I installed Node.js and also a Python environment for use later. I did have to clean out my computer to make space for it, which took a considerable amount of time.

I opened my first web application project and had no idea what to do! So I decided to run through some of the Codecademy JavaScript tutorials to get me started. I did a few of them and felt very familiar with the syntax since it is similar to many other languages. I decided to move on to finding tutorials for beginning D3 users.

To do this I once again returned to looking for resources posted by Shirley Wu. I found an interactive introduction but it was a little confusing. I decided to browse her r/dataisbeautiful AMA and look for anyone with similar questions. I found someone in a similar position to me and she said the following:

“Taking the jump into a full on programming language is quite a bit, so I’d say start with the basics such as taking free courses about JavaScript as well as reading introductory books would be a great self start.

D3js has a very steep learning curve, even seasoned JavaScript vets have difficulties at time with learning it I’ve found. You’ll want to get a solid foundation on the web (HTML + CSS + JavaScript) before jumping into it.

When you start learning D3js, don’t focus on learning the big JS frameworks like react or angular; instead get a basic HTML scaffold going, figure out how to query for your dataset, and then dive into doing things with that data via D3js.

Avoid using frameworks that make use of D3js when you’re starting out, as the only way to truly learn a language or JS framework is to dive into it and not abstract a lot of the intricacies.”

This advice corroborates my difficulties getting started. It’s a lot to jump into for someone with little web development experience.

This is why I’m deciding to switch my project to web development first, then D3.js for the next portion!

Maybe starting with the more attainable goal of building a simple JavaScript web app will help.

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.