World of D3.js – 2: JavaScript and UNICEF Project

These are slow re-counts of my semester so far taking Data Visualization with D3.

During the summer, I tried to do some independent studying with JavaScript reading up books such as JavaScript for Cats, Eloquent JavaScript, and Jon Duckett’s JavaScript and JQuery: Interactive Front-End Web Development. I should have done more than reading and coded more to understand the language better.

Week 1: I was still in Asia and did not get back in time for the first week of classes. I read the assignments and met with my professor during her office hours. I learned about our semester project, we would be working with UNICEF data to create visuals on D3.

Some of the examples my teacher gave us: JanWillem Tulp’s storytelling interactive shows many different data visualizations:

At first, I found the visualizations to be cool and amazing. I looked forward to even creating something remotely like them. Now, I still think they are amazing, but I also feel intimidated. After 12 weeks of this course, I realize just how difficult it is to create these wonderful visualizations. Despite my worries, I know that I am learning a lot from the back-end of creating these visuals.


World of D3.js – 1: Stumbling into it

Woah… how did I end up learning d3.js? This semester I signed up for the Advanced Data Visualization Special Topics course, with little knowledge of what I was getting myself into. My infographics professor had highly recommended the new course with the visiting professor. Like always when I am about to make a tough decision, I come back to this one thought, “Will I regret NOT doing it?”

She is a visiting professor and I am a senior next year, I may not get a chance to take a course like this again. Looking back, I made a very wise decision. As I learn about d3, I realize how new the tool actually is.  Most of the resources we find on the D3 library comes from the creator Mike Bostock himself. I get a chance to learn something that not a whole lot of people get a chance to learn (today)!

No matter where I am going in my career or my life after college, I will never pass up a chance to learn something that I find interesting. 🙂 However, I really wish I can get better at this soon. Even though the semester is almost over, I still don’t think I have a strong grasp at what I am doing. I guess I have to try harder.

Perhaps a Budding Data Storyteller: Part 5 – Processing Videos 2

I am numbering the titles in order to keep track of my thoughts.

I have continued to watch tutorials videos of Interactive Data Visualization with Processing with Barton Poulson on Since I took an introduction to programming course for C++ last semester, I am pretty familiar with the repetition concepts such as for loops and while loops. As for as I know, I do not think there are do … while loops in Processing.

Unlike my course in C++, I am learning about using interactive commands such as mouse-tracking, with coordinates (mouseX, mouseY), mousePressed(), and keyPressed. The interactive elements reminds me of the examples in the Javascript & jQuery: interactive front-end web development book by Jon Duckett that I have been reading this summer. I am only half-way through the book though.

Ex06_03_colorful grid

I didn’t really get creative this time. Mostly, I followed the tutorials verbatim. With processing, I can make the squares on the image above, continuously cycle through different colors in my palette.

Perhaps a Budding Data Storyteller: Part 4 – Processing

Recently, on my journey to learn more about data visualization, I stumbled upon Processing. I found the course “Interactive Data Visualization with Processing” with Barton Poulson on The course seems pretty promising, and I am looking forward to using Processing to create some neat graphics.

Processing is an open-source software and it is also a programming language. Unlike the other languages that I am familiar with, C++ and Python, it focuses on implementing code with visuals.

I am not sure how to embed the files to this post, but here are screenshots of what I have come up with after going through the examples so far.

1000 lines
1000 random lines, 5 different colors, created in Processing.
Smiley Face created with basic drawing functions in Processing

Lines: I looped 1000 different colored lines together with random start and end points. The y-values are the same, so that the lines stay within the window. The colors, except for the white lines, were arbitrarily chosen.

Smiley Face: I mostly wanted to play around and create shapes with the code. I used the ellipse function to create the head and the eyes, and I used the arc function to create the mouth. I also learned how to make the head float across the window.

So far, I find Processing to be a really fun visual tool. Processing is an open-source software and you can download it here:

Perhaps a Budding Data Storyteller: Part 2 – the Functional Art

Alberto Cairo is one of the biggest reasons why I became interested in data visualization. At first, I did not know that Data Visualization could be a career possibility. I first checked out his book the Functional Art from the library in my hometown. I was simply intrigued by the title. The Functional Art: An introduction to information graphics and data visualization.

I was surprised to find a book dedicated solely to infographics. I am not particularly fond of marketing infographics that focus too much on contrasting colors and busy pictures. Although I am an artist and I love comics, I also like numbers and analyzing data. The book focused on the design aspects of graphs. Cairo emphasized the importance of simplicity and telling a story with the data.

Data storytelling sounded intriguing. I realized that Cairo taught at my University. I thought about it. Infographics at the Communication School does not have much at all to do with what I was studying and I have already taken plenty of elective courses. However, on the other hand, would I regret not taking a course with Cairo?

Perhaps, A Budding Data Storyteller: part 1 – Why Data?

Data visualization, infographics, data science, data analyst, data storytelling, data journalism. Data, Data, Data, Data, Data, Data.

Well, what about it?

Data is more prevalent now than ever. Every transaction is processed and stored, every blog post is tracked, every click on the internet is another piece of data. As data continues to accumulate, I become more wary of its presence. It worries me how much someone can know about me, but at the same time, I can learn so much about everyone else and the world through data. Data, is neither a friend or an enemy. It exists and it would not be going away as this society becomes more digitally-connected than ever.