Project 1 Week 4/4: How it went

GOAL: Keep on going with the course!

Today I’m continuing to work on my LinkedIn Learning course on JavaScript. I don’t think I’ll get to the end, but I’d like to get as far as possible so I can finish it on my own time later. While some of this course does go over things I already know, it’s much more suited to someone who has at least a little object-oriented programming experience than other sources. LinkedIn Learning is great for my level: not a complete beginner, but needs a little more guidance than someone very experienced.

I’m glad that I finally found an effective learning method for me! And now that I know this, I hope the next two projects will go much more smoothly. The two main takeaways of my learning experience this project was (1) figuring out exactly what you can accomplish in 4 5-hour classes and (2) how to effectively design a self-learning project.

1) What I can accomplish in 4 5-hour classes:

Going into the project, I assumed that I could learn an entire new skill in each 5 hour block. My original plan, looking back, required that I make a major learning accomplishment in each class. My first week plan was to learn JavaScript in a day, learn the major components of D3 in a day, and then build an entire visualization in a day. That does seem a little unreasonable in retrospect. 5 hours is a good chunk of time, but it’s not enough time to learn the basics of an entire programming language, even with prior experience.

Understanding the actual length of an hour has been a common theme in my classes and work recently. I’m currently completing my capstone, and my field supervisor has given me great advice for goal-setting. I tend to be incredibly ambitious in what I can accomplish in a certain amount of time. And while I can often accomplish something close to that goal usually, the end product is not as good as I hope. In an effort to be optimistic, I over-estimate how fast I can accomplish things. On my supervisor’s recommendation, I’ve learned that if I set more attainable goals with optional “stretch goals” I will accomplish my necessary goals and still feel like I’m being optimistic with the stretch goals. Additionally, my work has been of better quality, since I give myself more time.

2) How to effectively design a self-learning project:

In terms of these self-learning projects, I realized that a lot more time than I thought needed to be dedicated to understanding the scope of the project and how the technology works. I started this without a good understanding of how intensive D3 is. While I did find some great advice and resources from experts, it certainly was surprising to realize how little I knew once I tried to start actually building something. In the future, I know to dedicate time to just familiarizing myself with the technology, what I need to know to accomplish what I want to make, and what resources I need to do that.

I also realized that I really need guidance in the beginning stages of learning a skill. The last skill I taught myself was how to scrape data from websites, which I did entirely by having a project goal and just jumping in. I thought I could do something similar with this project, however, the difference between that project and this one was that I already knew Python. Trying to jump into this with no JavaScript experience was too much to take on. So, I know now that for these projects the best and most efficient route is to follow along already designed courses instead of crafting an entire project.

So where did I end up?

I did half a LinkedIn Learning course! But also, I learned about how D3 works, how to better teach myself a skill in 20 hours, what my learning style is dependent on what kind of technology I’m taking on, and how to properly pace my time. I also understand browser consoles and multiple text editors and IDEs a lot better.

I also know now that D3 might not be the best project to take on for Project 2, as I originally intended. Now that I know how much time I’d need to get my skills up to the level needed for D3, I don’t think 20 hours is enough. I would probably use 10 hours to finish my LinkedIn Learning course and finish learning how to build web apps, and then another 10 to refine my skills to the point where I can start using D3 in a productive way.

I think 20 hours might be better suited to gaining familiarity with AWS, especially since that’s most relevant to me in the immediate future. While D3 is something I really want to learn for my career, a lot of job postings currently ask for some AWS product knowledge, so that might be immediately more beneficial while I’m job searching. So as of right now, AWS certification is going to be my second project.

So, all said and done, now I know some JavaScript and how to teach myself a programming language. My three main takeaways for the next projects are:

  1. Set attainable goals for the time period
  2. Use courses if learning a brand new skill, rely on a project if refining/expanding a known skill
  3. LinkedIn Learning is a better resource than others I’ve tried

Project 1 Week 3/4: Finally Learning

GOAL: Just do some JavaScript, for real this time.

I’m feeling much better about my goal to just start with building a very simple web app, and then maybe a viz for the next project!

Now that I have the lay of the land, and have learned a lot more about D3 and its scope, I can charge forward with Shirley Wu’s advice to start small with introductory lessons.

Codecademy felt a little too introductory and tedious, so I found a step by step guide to building a very simple web app.

I immediately ran into trouble with the web app guide, though, since I didn’t understand the first step. So, I went to LinkedIn Learning to get more introductory materials. I found this intro to tools, which I wish I’d seen earlier on. I’m all set up with Visual Studio, but will switch to using a browser now that I know I can. This introductory course is much better than Codecademy.

So, I’ve rerouted once again and now I feel like I have finally found a resource that fits my needs and skill level. I’m going to just go through the LinkedIn Learning course for JavaScript! And I’ll get a certification on my profile out of it, which is nice.

I’ve found that LinkedIn Learning is much better because you get more practical application value upfront, so you feel like you’re actually learning to build something much faster. I can easily skip past sections I already feel comfortable with, like data types.

Essentially, I took the past 2 weeks to figure out the scope of D3.js, how to best teach myself JavaScript, and a variety of ways it works. I also found a D3 course that I think will be best for my next project!

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.