Skip to content

Instantly share code, notes, and snippets.

@tgrecojs
Created January 12, 2016 22:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tgrecojs/19d16477f131ec86d839 to your computer and use it in GitHub Desktop.
Save tgrecojs/19d16477f131ec86d839 to your computer and use it in GitHub Desktop.

2016: The Year of the Data Visualization

As 2015 came to a close, I found myself juggling a number of different tasks, some of which were work related and some of which were not. I approach each day with the hunger to learn more about different web technologies. I like to read about stuff such as new advancements in JavaScript libraries as I think it’s important to keep up to date on that type of stuff. After all, web application development is changing rapidly, so it is important for developers such as myself to ensure they we are not using outdated solitions. Well, at least I think its important.

Anyone who develops JavaScript application will tell you that the current scene of JS is similar to Game of Thrones. It is much friendlier version though. Here, there is no war, but instead supporters of rival frameworks and libraries spend time contribute to projects maintained by their “enemies”. The real similarity comes when you analyze who sits upon the Iron Throne. Both in web development and Westoros, no one is really sure who has true claim to the throne.

Stannis? Danery’s? Polymer? Ember!?

The Rightful Heir to the JavaScript Throne — D3.js

D3-js

While the main culprits (React, Angular, Backbone, etc.) fight their game of thrones, one library sits idle, confident in its abilities to supply those who use it with all of the means to create stunning data visualizations. This library is D3.js; it was developed in 2011 to by Mike Bostock, it is the successor to Protovis, it is really awesome. D3 is in a league of its own, and does not have time for simple games. It is too busy supplying users with life-changing tools.

Are you serious comparing React to D3!? Like, seriously!?

Before I go any further, I want to address the fact that I know that it is an apples to oranges comparison. If you refer back to the sentence above, I made no comment of comparison. Instead, I simply stated that it did not have to worry about any library but itself because it doesn’t. Since being developed in 2011, D3’s purpose has remained the same: allow developers to create stunning data-powered visualizations. Almost five years later, d3 is still the same library for building data-driven documents. (If you weren’t already aware, d3 is an acronym for data-driven documents.) It has withstood the test of modern day JavaScript, and has continued to thrive. Better yet, the advancements in JavaScript has only resulted in even better visualizations, and this is a trend is sure to continue.

Unlike many modern day JavaScript frameworks, D3 has not had to go through any breaking changes; the d3 army has not taken any blows because they does not need to! As I said before, it is in a league of its own. Nonetheless, I still believe that knowledge of D3 should be as highly-regarded as the top frameworks. Again, I understand that I can not expect D3 to be used as much as Angular as they are two completely different things. Instead, I am simply stating that knowledge of the d3 library is not usually stressed to beginners, whereas knowledge of frameworks like Ember and Angular always is. There is nothing wrong with this. When I first began to focus on JavaScript, I went straight for Angular, and focused on only Angular for several months. By no means do I regret that decision, however if I had advice for twenty-one year old me, it would be to study D3 consistently, alongside AngularJS.

If You Love D3 so much, why don’t you marry it? (or at least build your own app!)

Touché. Well, it is in the works! Seriously, it is.

As 2015 came to a close, I was in a bit of a frantic state trying to hand in whatever material I had for the years end. Although I was trying to study D3, I simply could not make the time, but you can be sure that 2016 is the year I master Data Visualization. Personally, I think that data visualizations are incredibly underrated, and I have for some time. It was not long into my tenure as a graphic designer before I became infatuated with infographics. To me, they were simply the best way to analyze and express data. Today, I feel the exact same way about web-based visualizations, and I have been integrating different resources for learning D3 into my daily life as I wish to truly master it. In the coming weeks, I will surely be writing more on my experience with it. This post is sort of my ode to D3 mixed with my preseason D3 press conference. (If you could not tell by now, I have a sense of humor.)

My Hopes, Dreams, Expectations

By 2017, I wish for a Nobel peace prize; 2018 is the year that I plan to sign my book deal. Ha! There is that sense of humor again!

Although a nobel prize may not be in my future, I am at least confident that I will have created some cool stuff in the coming years. After all, the forecast is filled with D3, so it is hard to not be excited.I have basic experience with D3 so I am not an utter greenhorn. Earlier in the post, it made known that I am yet to build my own D3 application, so I am far from an expert. Nonetheless, I plan to succeed in building some stunning data visualizations that people will hopefully appreciate. There are a few thing that I believe I must to do in order to succeed. For instance, I need to think outside the realm of traditional data design. The viewport is my oyster. I do not need to get caught up with basic scatter-plots and bar charts. This is something that people have a hard time grasping, however it was made apparent to all who attended New York’s D3.js meet-up in November. At this meet-up, Matthew Rodgers spoke to the audience about his work with D3, and he was great. Matt is a top-notch developer with a knack for crushing the Data Visualization game. You can check out his website, poly-graph.co, where you will find his wild data sets of all shapes in sizes. At the D3 meet up, he spoke about this project which analyzed rappers based on their vocabulary.

Listening to Matt’s talk was great. It opened a whole set of new doors for me, so I eventually reached out to him for some basic tips on building my own visualizations. When we did finally meet, I told him about my plans to work with D3, asked him the few questions that I had for him, and after about an hour we went on our way. Now that I am finally beginning to work on this project however, I am excited to hear his feedback.

Thinking outside the …viewport?

There are so many data sets out there that were untouched, just wait to be visualized. Additionally, I plan to implement the notion of exploratory design in my visualizations. This essentially means that I want users to be able to interact, or explore through visualizations, and learn new data points along with way. Moreover, it was an idea that Matt stressed upon when explaining his past work. Simply put, data can tell a story. In turn, data visualizations can guide users through these stories through different correlations in data shown on the screen. Still, data visualizations are much more powerful than words on a page, so it should be interesting to see data being visualized in the future.

Data has the ability to move people. When visualized correctly, a data set can point out some hard truths that may not look as compelling when written as plain text. I am infatuated with data visualization, so of course I am going to say that data visualizations are powerful, however it seems as though I am not the only one. Specifically, the New York times has been hitting home-run after home-run with their visualizations. Even Matt Rodgers made a comment about the NY Times’ use of data visualizations! Well, he was not the only one who found them compelling, as I have found them super effective.

See, the NY Times embeds visualizations into articles. Last November, I came across this post which has been stuck in my mind ever since. For me, it was incredibly interesting to learn that the Islamic state operates on over 100 thousand miles of unpaved roads throughout the middle-east. Terrifying, yet still interesting. Furthermore, being able to see this information shown against a map of the middle-east allowed my to comprehend this data even more, and that’s what good visualizations do!

More Than Just Data

As I said before, data sets have the ability to tell stories, both good and bad, and I feel as though that it is my job as a developer to analyze and work this data. By no means are web developers obligated to analyze data, or analyze anything for that matter; however, I am one of the many developers who has the ability to visualize data in a compelling manner. When I first decided I wanted to work on a data visualization, I wanted to make sure that the data was important. Furthermore, I thought it would be interested to seek out different statistics regarding homicide data in the U.S., and so I started seeking out that data.

I specifically wanted to analyze the past three decades of homicide data. To do this, I would need to obtain the records first. I contacted the Center for Homicide Research to obtain their data sets, however I soon realized that obtaining all of these records was going to be going to be a full-time job. Instead, I needed to think on a smaller scale.

Closing Statement — Upcoming Project

As sad as it is, the city of Chicago stuck out in my head. It is the third largest city in the United States, yet it’s nickname is “Chiraq” due to all of the city’s gun violence. In 2015, over four hundred people were killed by gun violence in Chicago. Now, it doesn’t take a visualization to show the significance of that number, however I am going to ensure that I emphasize the seriousness of this issue. Earlier today, I reached out to the people at heyjackass.com, a website dedicated to visualizing murder data in Chicago. I know what you’re thinking, but no, I am not “stealing their idea”. Instead, I am creating visualizations that are complete unique. The only similarities that my application will share with the website will be the data being analyzed. By taking a look at the website, you will notice that they show a number of different statstics such as:

  • homicides per day
  • Homicides per year (to date)
  • Part of body where victim was killed
  • Neigborhood where victim was killed
  • Deadliest Neihborhoods (year to date)
  • Gender of victim

The visualizations are solid but they are not interactive. Furthermore, I fully intend to create a highly interactive visualization that further shows the atrocities that are happening each day in Chicago.

As time goes on, I will be sure to write a weekly post on my updates with the application. If you have any questions about it in the meantime, feel free to contact me, and I will get back to you ASAP.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment