One of the most exciting parts of the CHI Fellowship experience are the weekly challenges. A challenge I really dread is anything involving JavaScript. During my first tenure as a CHI fellow, I assiduously avoided JS. I happily built the HTML code ground up, broke lots of things, before finally having something workable. When I did have to do any JS work, I needed a LOT of help. I don’t remember incorporating JS into any of the challenges during my first tenure as a fellow. But during my current tenure, one of our challenges involved creating a website that used some JS capability. Trying to master JS through a challenge was one of greatest fears come alive. The challenge was to create “an interactive, web-based visualization” of a database of National Parks of New Zealand in a way that we used a JavaScript framework. We could not create a web map and/or use a preexisting visualization service. The key was to create a narrative and use a javascript framework to tell the story.
As part of the challenge, we first created a timeline of when the parks were created. Next we created a pie chart of how UNESCO sites and parks. The third JavaScript visualization that I was in charge of was the world cloud. Our idea was to create a world cloud that used some of the most commonly used words to describe the parks along with their names. Initially, my plan was to find a word cloud code and copy paste our data into it. That seemed like a workable plan. Until I got around looking for said code. I found lots of word cloud code out there. a lot of which I could have used to great results if I knew how to. I realized yet again that my fundamental problem with JavaScript was that I did not necessarily find it legible. Unlike HTML that I could understand with relative ease, JavaScript code, I just didn’t understand. I didn’t understand how it worked. After multiple attempts, I had no word cloud. If anything, I seemed to have broken our landing page.
I asked one of my team members, Autumn for help. Autumn was brilliant about finding a workable code. We bonded about how we both did not fully know how to work JavaScript. After looking a bit for a code, Autumn found zingchart.com which is a JavaScript library. The brilliance of Zingchart is that you can see the code work as you write it. Thus, after a long time, I had found a place where I could try and understand JavaScript, yet again. Zingchart houses over 35 built in chart types. One of the chart types they house is a word cloud. Zingchart’s approach to these chart types is to break down how they work. By reading the page, I finally began to sort of understand how JavaScript actually works! One of the examples on the website was a world cloud that used President Obama’s speech at the 50th Anniversary of Selma. Being able to toggle between the result and the actual JavaScript framework itself was extremely useful in trying to understand how it all worked. Based on the JavaScript framework, we figured it would work best if we were to enter the descriptions of the parks into the code. I had initially tried to use individual words instead of using the entire descriptive text. Using the text, I realized gave the code the ability to find and/or exclude certain words. Based on how many times a word was repeated, the cloud accentuated some words more than others. It was interesting to see the result. I am not sure I fully understand JavaScript but working with Zingchart gave me the confidence to at least try.
You can see the results here
Leave a Reply