Michelle Chiu
the-knowd-homescreen.png

Circling Through Time

Data Visualization | Processing.js



OVERVIEW

My application allows users to freely explore any subset of data found in the Digital Public Library of America in a visual representation , as I was scraping data by using their API for this application. By passing in a query to the search-bar, my program will filter the website and parse subject titles with relevance to the search query. Then, from each entry, it will pull the URL link and the displayed date. As some entries are void of date information and many came in different formats, my program made sure to effectively parse to obtain the accurate year. 

 

WHY DID I MAKE THIS?

Time is, and always will be, a paramount factor in both defining and remembering cultural trends, observing progressions of innovations, and noting downfalls of entities which no longer hold their worth in society. Intrigued by how the transition of time periods can affect usage or popularity of a subject, I decided to illustrate this particular notion—how time influences change—in my project, “Circling Through Time.”

 

HOw does it work?

For each entry that was filtered into a time range, I created a large circle that represented it. Each large circle would contain a number of smaller circles, the amount dependent on how many entries fit that particular half-century scope with nodes linking the family of common circles together.

To display the time ranges in an interactive manner, I had event-listeners to detect if a user’s mouse was hovering over a larger or smaller circle. If the mouse was hovering on a large circle, it would display the associated timeframe and exhibit the entries in a deep blue color. If the mouse was hovering over a small circle, it would highlight the entry it was representing by displaying the URL on the upper-left hand corner. It would also link the user to that entry in a new browser window if the mouse clicked on that smaller circle.