Week 6 was the start of the “apprenticeship” program aka projects and the start of the job search. To kick it off, we had a 2 day solo hackathon where everyone chose their own project to hack on for 2 days. The goal was to “finish something, finish anything” and the project served as a reality check for what each person was able to accomplish in a 2 day sprint.

Here is the final product, click the image or go to http://collegeroi.emilydee.com/ to interact with the chart.

About the project

My personal goal for this project was to learn more about d3 (a JavaScript library for manipulating data) and make something interactive and interesting that I could deploy. At my last job, I worked with college return on investment data from Payscale which uses self-reported salary information to calculate an overall return on investment based on earnings differential (how much money graduates made compared to the average high school graduate) and cost (tuition). This year, they broke down the data by specific majors and this gave me quite a bit to work with.

Tech stack and challenges

Summary: Originally, I intended to build the project in D3 and Angular so I could utilize double data binding and cool animations. I spent the first 3 hours of the hackathon reading the D3 on Angular book then got to work on D3. I ended up not getting to the Angular portion and supplementing D3 with the C3js charting library.

• Charting libraries: This was the main part of the app, I had to clean data for a CSV file, ingest it using d3.csv, then manipulate it for the visualization. I started off in pure D3 but moved to C3js (a d3 charting library, Rickshaw is another popular option). C3 gave me built in tooltips on hover, axises and more in much less code than I had in D3. I came to regret this decision later when I tried to make additional customizations. C3 is a small project, and while it had great examples, the documentation was incredibly bare. When I tried to do things not included in the examples, I had to dig through the source code and deep into the generated HTML to figure out what exactly C3 was doing. It was also very unclear what I could do with D3 and what C3 had hijacked. Takeaway: C3 is great for simple charts and I highly recommend it if your project is very similar to what is on the example page
• Server: I put up a simple server using node and express, I primarily used this to serve the data CSV file which I extracted data from for the chart. Important note: you can only read a CSV file in D3 if it is served over an HTTP request so make sure to setup the server early.
• Front-end: In the final hours, I beautified the page using Bootstrap. This was a bit heavy for my purposes but worked great given the time limit and simplicity. After the hackathon, I added typeahead to the school search bar as UI sugar so users would know if the chart contains the school they are looking for.
• Deployment: I used Grunt to concat and minify my files, then deployed it using Azure. I wish I had setup my Grunt tasks earlier because it would have made me think more about my file structure earlier on, doing it after the fact meant a bit more of clean up time.

Takeaway

The biggest nugget I got out of this was really understanding the pros and cons of using libraries.

Pro: Quick and easy. In most cases, someone will have already built what you need. Rather than reinventing the wheel, you can quickly plugin their code and get what you need (and typically more)

Con: Loss of flexibility. Very rarely is a library properly documented. Why? The developer that made it is probably incredibly talented and would rather spend his/her time doing another high demand project rather than writing a bunch of examples and notes. If you want to do something that deviates from the common use case, it will be a long road to understanding the source code and how you can manipulate it.

Final words: This sprint format was incredibly productive for me. During the final hour, I did so much clean up and pushed in a lot of features because I knew it was very unlikely that I would get to come back to this project. If you want to get something done, I highly recommend trying this format: give yourself 2 to 4 days and an attainable goal, then do whatever it takes to accomplish it. It will force you to make decisions faster and reevaluate the time spent researching deep rabbit holes. I’m a big fan of deadlines.