The Best Timeline is the One You Code Yourself

Written by Maddy Casey and Alison Long
Edited by Claudia Berger

Initially written December 3, 2024

---

As part of her contribution to our project, our team member Alison is exploring the history of the CBA, through a website which features an interactive timeline, and a series of related data visualizations.  I sat down with her to discuss one of the challenges to her project: learning new programming skills to develop a complex and interactive data visualization website.

Hi Alison! What are you trying to do with your project?

With my project I’m trying to exercise both data storytelling, interaction design and data visualization. Before I came to this program, I would look at things like the Pudding, a data visualization journalism site. They usually have dashboards like mine, data storytelling or journalism, that is an interaction of web development, data and journalism. So that’s what I’m trying to do; a methodologically similar dashboard that tells the story of the CBA.  

What are the research questions that are guiding more of the humanities component of your project?

I haven’t yet taken Intro to Digital Humanities, but I did look into the field, and what people are typically doing when exploring critical making or more practical hands on tools, rather than doing more traditional research, quantitative humanities. I’m interested in looking at what you can do with digital tools and design to help explore or celebrate a community, a curative history, or in this case an institution.

To me, a unique feature of your project amongst our group is that you’re trying to create your own tool, your own site where you’re expressing this information.  I’m curious what has been challenging as you’ve been trying to create the data dashboard for your project.  What thought process has gone into how you’re designing it?

When I joined the class, I sat down with all of these materials and data, and this institution that I hadn’t really heard about, and was trying to understand, “what did the CBA do in the span of fifty years?” My project methodology felt intrinsic because that’s how I gather information. It’s through putting counts of things on a timeline, or making networks.  The data I used is what we received to work with, and to me there were a lot of mysteries. By cleaning the data or mapping it out, that’s how I learn; I’m also learning what exactly is the CBA, what it has done.

What sort of tools did you use to develop this currently GitHub hosted data visualization site that you’re hosting?

One of my fears going in, was that I wanted to do this interactive thing, but I didn’t really know how to use this specific tool, the JavaScript library D3.js.  At Pratt, I’ve learned how to use data visualization softwares but never how to hard code interactive data vis in JavaScript. So I had to learn it with YouTube videos and documentation. My project is just a normal website, which I learned how to make in my web structures class last year. At the time I was completely confused, but trying to work it out on my own, I think I understand the process more. All of the visualizations are dynamically updated based on the data in a series of interlinking CSV files I uploaded, and the site is built using HTML, CSS, and JavaScript.  I’m also learning Python this year, so a lot of the data cleaning I did to prepare the data for my visualizations was done in Python.

Currently the site is in GitHub pages, but eventually, I plan to create my own portfolio site to host my projects, and will pay for my own domain name, at which point we will have to update the project’s link. 

What has it been like figuring out how to code a dynamic data visualization?

The process is a lot of “what’s going on, why doesn’t it work?”, and then asking AI or copying my error message into Google, which at this point just leads you to Gemini.  But I have found that oftentimes, AI gets it wrong. One of the things that we encountered in my web structures class, is that when you have to build a more complex website with different pages, the more difficult your code gets, the more context dependent it is for AI to try to fix something or write a chunk for you. So it often doesn’t work. Because it will just try to randomly name classes differently. So you really have to do it by yourself. It’s a lot of looking at documentation, but you can ask Chat GPT, what does this error message mean? What could it possibly be? Usually it’s just a formatting issue, or that I didn’t understand the required syntax.  I also use YouTube, I love YouTube tutorials. Unfortunately, for D3.js especially, a lot of the tutorials are not that extensive on YouTube anymore. I don’t know if it’s because I just can’t find it anymore, but I think most of them have migrated to courses or for-profit sites, they’re not free anymore.

That is interesting, like coding boot camps.

I think it’s also like some free courses websites will have tutorials, the information that I need.

Got it, but it’s harder to find it because it’s not just on YouTube?

Yes.  Even for Gephi, I was trying to learn how to use Gephi timelines, but there’s not a lot of videos.

I also wonder about the timeline, every time a tool gets updated the video becomes outdated. But I wonder, are people still using YouTube as an instructional medium in the same way that they did, 10 years ago or 5 years ago? I don’t know.

I’ve definitely found some Tableau videos and blog posts that are very old. 

The other thing I’ve found with AI is that it almost never knows if a function is deprecated. So for example, it will just be suggesting Python functions that are no longer usable, because it’s using the bulk of the data and information out there to predict a correct answer, not the most up to date information. In terms of your experience with the tools you used, is this the first time you’re using D3.js? What made you decide to use it?

Yes. I have used JavaScript before, but I haven’t really used that particular library.  I have been interested in it for a long time. When I was a college student, there was a data visualization influencer I followed who has been teaching D3.js for a long time, translating all of the English content into Chinese. 

When you’re looking for tutorials and information, it is an interesting point that a lot of the people in our group are multilingual- what language do you normally look for tutorials in?

I usually look in English. I rely a lot on Youtube. In the Mandarin world, I don’t like how algorithms deliver information.  There’s just such a lack of quality information, that you have to dig harder to find, anything that’s tool related, anything AI related, data vis related, Tableau related, there will be somebody out there trying to make a bad 5 course video series that doesn’t really teach you anything.

My other question about your methodology that I was curious about, what sort of experience did you come to the project with?

I learned JavaScript in my web structures class.  In Info Tech (Information Technologies), I learned about GitHub for the first time, and then in the web structures class I learned about GitHub again, and then in the Programming for Cultural heritage class I’m taking, I’m learning about GitHub again. I’ve had multiple professors come in and explain what GitHub is and what it does.  And still I couldn’t get my stuff committed properly.  I find it’s normal to get frustrated the first time around: it’s iterative, you fail one project and try again and eventually you get better. In terms of tools, I had taken Information Visualization, and learned Gephi and Tableau.   So I could do data vis, but what I’m trying out is independently hosting and creating my own website containing an interactive data visualization. 

So you learned java script for the first time in a class you took last semester. Before you came to this program did you have a lot of web development experience at all? 

I really did learn HTML in Information Technologies.  But, I did have some prior stats experience.

You’ve talked about how you’ve gone about learning these tools, this library, adapting what you’ve already learned about how to make a website in previous classes to this specific project. Are there any other tools or anyone you talked to that have been helpful?

The most not serendipitous, but quite unexpected thing- when I signed up for this class, I was curious about what archivists do.  In this class I’m working  with LIS students and archives, but I didn’t really know what you all do.  This semester I also took an archives class, and it’s been really fun to see my own trajectory of understanding that component of the project. When we first sat down to talk about the Center for Book Arts’ collection data, the subjects, the controlled vocabulary, and were trying to ask the CBA questions, like, where did the vocabulary you’re using come from, where can we get more data, do you have a database, how are you managing your metadata, all these questions, a lot of them I didn’t really understand. Like what is a thesaurus, what are these things you’re throwing around, I didn’t know what ArchivesSpace was. But interestingly, this semester I am also taking an Archives class, so now I know! I have much more context about cultural institutions, how you catalog information.

So, a nice plug for all of you tech people to learn about libraries!  What is next at this stage in your project?

Last week we had a work-in-progress presentation, which reminded me that my project needed labels, and instructions. Now I’m trying to work on the usability.  Our team members Claudia and Nene cleaned up a big chunk of the exhibition data, artists and curators names and exhibitions histories. So now I’m thinking about doing something more with the networks I can make with that data. But the data we have can’t tell us everything.  A lot of the exhibitions don’t have associated artists’ names or descriptions in the data set, and would require finding and exploring the center’s catalogs to enhance.  It is hard to piece the institution’s timeline together and research granular stories with gaps in the information.

If you were to do this project all over again, what would you do differently?

This is a group project- I wish that I knew where everyone else’s project was heading so that I could integrate them better.  With a timeline, you have an axis, to which you can add any information- a lot of the other work our peers did could be linked to or integrated.

In Closing… helpful questions to ask yourself when working on a similar project:

• What do I want to better understand about an institution, community, or experience? How can I use data exploration as a methodology to fill those gaps in my understanding?
• What technical skills have I already developed, and what can I reasonably learn from a new project?
• What resources and tutorials are available to me to develop new skills?
• What are the limitations of the tools and tutorials I have at my disposal? In particular, what are the shortcomings of AI as a tool when it comes to learning programming skills?
• Do I understand how the data I am working with was collected? Who can I turn to for expertise to better understand that component of my project?
• How will gaps in the data I have at my disposal influence my project?
• If I am working on a group project, how can my technical contributions be integrated with the work of my colleagues?

Explore more of Alison’s work
Learn more about the Center for Book Arts’ history through its Archives collection.