ICM: Final Final

Final Project Still

I. Where I Started

For my final project, I knew that I wanted to explore different dimensions of family trees—how family links were broken and repaired, patterns shared in trees of ethnic/religious groups (in particular, my own—the Jewish people), and geography. After my presentation, Allison asked what shape my project would take, and I realized I had no idea. I continued to struggle with that question for a while until I realized that I wanted to make an interactive visualization, focusing the concepts I was interested in on a single idea: change in geography over time.

II. Where I Went from There

I started looking at models of interactive family trees that already existed on the web. Allison pointed me to d3.js, which is designed to handle data and has a pre-made formula to create tree structures. I adapted a version of a family tree that I found last week for play testing. The interactions were great, but it became clear to me that I couldn’t learn d3 well enough in a week to hack the code to my project requirements—which looked something like this (made in Illustrator):


So, returning to the drawing board once again, I decided to make a p5.js tree from scratch, inspired by some of the interactions and animations of the d3.js tree I found, but including the parameters that I wanted to show (time and space).

III. The Result

Can be found here, on its very own subdomain: familytrees.laurakerry.com

IV. Conclusions and Next Steps

This project was a good experience in planning and execution. For the weekly assignments, if I couldn’t get something to work, I would try it several different ways and sometimes ask for help, but often end up adapting my expectations. In this project, I wanted the trees to look and act a certain way, and I problem-solved until I achieved that. I fell into a nice rhythm in which I would first set about making a certain feature, identify a problem in making that feature, get stuck on how to solve the problem, go to sleep, and wake up and solve the problem. (Conclusion: Sleep is important!)

I tested the code with made-up data, and so when I finally inputted the real data from my family, I had the experience of seeing it fresh, and it was moving—especially to compare the trajectories of those who had stayed in Europe with those who had moved to North or South America. I feel like the tree has the desired effect.

Even though I created the family tree that I set about making, though, I still think of the project as a first step. I would love to make more of them in order to establish the patterns that I was initially interested in. There are a few barriers to doing that, though, including:

  1. Lack of data. The trees require an incredible amount of research because they include date of birth, place of birth, and place of death for descendants reaching back to the mid-18th century. I was lucky enough to have all of that data from a family tree researched and created by a distant cousin, Lowell Ackerman, who reached out to my mother for information about our branch.
  2. My insane code, pt. 1. Figuring out the spacing of nodes within each area was difficult, and right now I have a janky solution that involves manually counting how many children are in each area at a given time, then spacing them according to “count” variables.
    screen-shot-2016-12-08-at-9-21-05-amIn the future, I would like to push each node to nested area arrays within in the larger family array and create a formula that spaces each node according to the length of each nested array.
  3. My insane code, pt. 2. Similarly, the tree is built from individually pushing each new node into a family array, in a formula that’s only legible to me. I need to create a formula that pushes nodes into a family array by looping through a JSON file that looks something like this:
    { “first-location”: “area2”,
    “second-location”: “area1”,
    “generation”: “2”,
    “name”: “Josek”,
    “Chidren”: [{
    “first-location”: “area1”,
    “second-location”: “area1”,
    “generation”: “3”,
    “name”: “Joe”,
    “Chidren”: “none”

    As a next step, I want the code to be replicable. I would also be interested in exploring other parameters, such as more refined gradients of time (such as when exactly people moved), and more detailed visual vocabularies (such as a different colored node appearing at the time of death—assuming I add more time gradients).

Final Project: Proposal


I entered ITP knowing that I wanted to explore family trees in a project at some point. There’s so much information contained in the structure—not only the immediately visible narratives of family relationships, but also other more coded stories. The above, for example, a German tree from the 16th century, follows male lineage, a record of a patriarchal society, while the tree below, a perfect binary tree, assumes heteronormativity (as well as a very equal and consistent birthrate of males and females) all the way down.


For my final project, I want to explore the ways that family trees can portray narratives, making interactive diagrams that use new and old visual vocabularies to embed stories about history. Part of my interest in the project stems from my own experience with family history and the ways that family trees can and cannot adequately express it. I’m Jewish on my mom’s side, and therefore the theoretical tree is hugely disrupted from 1939 to 1945. Many branches end; others bend creatively, as in the case of my grandfather’s father, who married his first wife’s sister after she died.

I’m also interested in the tree on my dad’s side (always impressive because of his mother’s ten siblings) because of the ways that it has changed. He grew up Catholic but learned about a decade ago that his father’s family converted from Judaism in the early 20th century near Prague. The siblings fork in that generation, one leading to the United States and another subjected to the same disruptions as my mom’s side, fading out and spreading out. We have pieced a lot of the story together by finding and reconnecting to these lost cousins, one of whom ended up in the same city and now comes over to my parents’ house for Christmas day, where we serve latkes.

That narrative of reconnection is common among Jewish families, many of which split apart during the Holocaust and scattered across the globe or took on new identities (for this reason, there’s a huge stake in archives in Jewish culture, as evidenced by the many websites I’ve come across in research and the extensive collection that I had the chance to visit a while ago at Yad Vashem, the Holocaust museum in Israel). But it’s not limited to that specific experience. I’ve been thinking about family trees again in light of the Syrian refugee crisis and this incredible article from The New Yorker last year—which chronicles a man’s escape from Syria and the separation of his family—and the new trend of “everyone is connected” stories, an old tale but now told in a different way because of the recent ease of genetic testing.

In my final project, I want to ask two main questions: In the face of large events and conflicts, (1) How can a family tree account for geographical separation, and (2) How can a family tree account for changing notions of who is included in the family lineage over time? I want to use a few different case studies to model interactive trees that address those questions. I’m not entirely sure what that will look like yet. I know that there are complex and elegant ways to model trees using a single algorithm, but I think that for my skill level and purposes, I’ll focus on creating the building blocks and interactions.

I’ve found a few interactive trees on the web, including one by PBS and another about the Greek gods. For inspiration on what the symbols of trees can say, I’ve been looking at the visual vocabularies of genograms, diagrams that began in the realm of science and medicine but have been coopted by a number of other fields. I’m particularly interested in the ways that they open up definitions of family and begin to take events into account. Here are some examples:interpersonalrelationshiplines


Remaining questions:

• What does the code look like? How do I make the building blocks replicable?

• What does change over time look like? I’m thinking of using a slider to represent time, with the trees shifting as the slider value changes

• What is the frame of reference? As shown by the binary tree above, family trees often have a primary subject. Will each of the case studies have one? This also determines another question: Is the narrative mostly about the loss in conflict or the reconnection later? I’m thinking the latter.

• How do I show space in the trees?

News Prevalence: Guardian API

[Code is here; press ENTER to activate new inputs]

In Applications class on Tuesday, David Sassoon of InsideClimate News spoke about the absence of news about global warming and the general imbalances of media coverage. It’s something I’ve been thinking about a lot during an election in which Donald Trump’s airtime has benefited him so much and the attack on facts has highlighted the importance of where and how we get our information. Because there are many stories like this embedded in the relative prevalence of news items, I wanted to make a simple interactive visualizer to compare terms using the Guardian API.

For the small sample size of news from October 20, 2016 to the present (this can be altered in the code—but the limit of news items per query—at least with what I know to do so far—is 200), here is the relative prevalence of Hillary Clinton and Donald Trump. Other interesting inputs include “election” vs. “global warming,” “syria” vs. “brexit” (it is the Guardian, to be fair, where “colour” also outshines “color”), and on a lighter note, “cat” vs. “dog.”


For the HTML elements assignment, I wanted to create a sketch that moved in the direction of naturalism. I used the noise function to create the random pattern of peaks in the mountains objects, for loops to increase transparency outward from the sun as it moves, and the slider values to control the sun’s height and transparency of a dark blue overlay. The code lives here.


I tried to make a tree. I envisioned a trunk growing straight, then, at each click, splitting into v’s at the x and y end point of the growing lines. I ended up playing around with different uses of arrays and the constructor function and eventually arrived at this.

[click sketch multiple times]

The code includes many different iterations, and, to be honest, I’m not entirely sure how it’s working anymore. It needs some clean up, but in the meantime, can be found here.

A few iterations along the way:

First working version of splitting lines; they all moved in parallel
Testing change in y-value start of lines





Playing around with decreasing alpha values
Randomizing increase of y-value within a range to create wavy branches




My partner and I began by approaching the basics, and after conquering the initial panic and confusion by carefully reading the instructions, the two examples went off with out a hitch.

We were not so lucky in our own application. We decided to animate a sketch I had created for ICM (below), in which mouseX and mouseY move a floating plastic bag that a man’s eyes follow. Since the sketch used both x and y variables, we made it difficult for ourselves and decided to use two potentiometers to get an analog read of both values.


After trying to muddle through the code ourselves, we called over Dan Shiffman, who showed us how to read two values by adding a comma in between the two sensor values on the serial monitor in the Arduino code then separating them out into two arrays in the p5.js editor. Optimistic and excited, we then placed each array in a variable and replaced mouseX and mouseY.

But it didn’t work. Even after we combed through our code and looked at examples by ourselves and with Shawn Van Every, we still couldn’t figure it out the problem.screen-shot-2016-10-07-at-1-46-43-pm

I would still like to redo the lab, either with a sketch whose code is a touch more organized or with the same ICM animation. It would be nice to see that darn smiley face bag move in response to physical input.

Another question, besides what went wrong with the lab: In the example code for analog output in the synthesis lab, the Arduino program sent the full range of the sensor, 0-1023, to the p5.js editor, which then divided by 4, but in the notes for “Interpreting Serial Data,” the variable “sensorData” divides “sensorValue” by 4 before sending it to the serial monitor. Is either practice better or do they work equally well?

Week 4: Buttons

The Button Factory:

The final design that Lindsey and I came up with is partially a product of realizing design goals, partially a product of adjusting to limitations, and partially a product of happening upon interesting chance elements. We initially came up with the idea of a grid of buttons that each rotated continuously, starting at a different angle, but soon faced a dilemma: We could rotate the buttons continuously if we put the drawButton() function in a for loop, but they would all start at the same angle appear on the canvas at the same time, or we could start each button at a random angle and place them on by one using an “if” statement, but they wouldn’t continuously rotate. We wondered—is there a way to reference each button after it has been drawn, even though the loop has continued on?

Week 2 (Or 3?): Animations with p5.js

I spent what I’m pretty sure is too long on this animation:

Embedding the sketch just now raises my first gripe of a few about the p5.js editor: There’s no way to adjust the screen to accommodate a larger canvas, so I created the entire animation believing I was working with a 600 pixel height. Thankfully, I only needed to adjust the bottom, so it’s was an easy fix. Still, it seems problematic—as do the application crashes.

Now that that brief rant is over, I can talk about the sketch. I spent the longest amount of time trying to figure out how to make clouds move as a unit. Once I created a function to draw a cloud by setting x and y parameters, the next steps was figuring out how to make those clouds reset to a zero x value once they hit x = width. I couldn’t figure out an efficient way, so, after much troubleshooting and trial and error, I ended up creating three separate functions for the clouds.

Overall, the exercise proved great practice for variables, since I was working a lot with moving grouped objects. I also love mouseX and mouseY, and was very grateful to hear about the map function (used on the eyes) and translating radians into degrees during the ICM help session.

Update: p5.js web editor is currently down.

Week 1: First

Part 1: Why Computational Media?

I first found my way to computation media through content management for the web during a few writing and editing–based gigs. I learned basic HTML and CSS and soon found myself just as interested in manipulating the words on the digital page as I was in their content. This was surprising to me, as I, an inevitable English major, had grown up in my studies with a distrust of technology, following the popular narrative that tech and the humanities are opposed—that literature is under threat by technology. In some ways, I still agree that certain tech platforms and their tendency to diminish attention spans have altered the depth and substance of some writing, but I also think that the two realms can work together well. Technology presents new opportunities to expand the arts, and writing is no exception.

I’m now interested in exploring the ways that technology can enhance the experience of literature and storytelling (to use that good ol’ buzzword). My first contact with a project that attempted to do this was in college, with the online hypertext version of Ulysses. Though the interface leaves something to be desired and it focuses on only one aspect of the text—how many times each word occurs—I like that it begins to solve the unwieldy problem of Joyce’s novel: Reading the book requires the companionship of two additional texts in order to understand references and the plot. The online version, with the extra-textual material built in, streamlines the reading process and abolishes the need for the distraction of following along elsewhere. (Of course, this presents a new problem: How do you mark up the text, which seems just as integral a part of tackling the work as taking in the words on the page is.)

A more elegantly conceived storytelling project I admire is The Upshot blog from the New York Times, which publishes interactive journalism. The piece, “The Ballad of Geeshie and Elvie,” for example, embeds songs directly into the text, turning words into a media player and emphasizing how entwined in the story music is. It’s such a simple touch, but it has stuck with me since I read it in 2014. This semester, I’m interested in making these kinds of projects, which marry writing-based stories and different kinds of media—animations, interactions, etc.—that magnify their messages.

Part 2: The Sketch

The sketch on p5.js was a mixed experience. I found that the editor was intuitive and the commands for drawing out simple shapes, which my whole sketch is based on, are easy enough to grasp, especially with the help of the p5js.org reference.

Sketch for sketch
Sketch for sketch

One pitfall did emerge, though (besides the fact that the editor froze once—a product of my computer, I think). I initially approached the assignment without a plan, improvising shapes and colors as I went, but this approach ended up more time-consuming than necessary, and I was unsatisfied with the results. I went back to the drawing board and came up with the design of the two profiles/vase sketch, which I started to break down into individual shapes. At the end of the process, I have a greater appreciation for plans in this context and, after mirroring a design along the x-axis, a better intuitive sense of what different values for the x and y arguments in each shape will produce.