https://veev.cargo.site Genevieve Hoffman Fri, 16 Feb 2024 20:52:15 +0000 https://veev.cargo.site en https://veev.cargo.site/Slideshow Thu, 17 Oct 2019 02:00:53 +0000 Genevieve Hoffman https://veev.cargo.site/Slideshow Star Maker — Stapledon The Maker and His Works; Mature Creating This is a caption for that image <img width="4485" height="2778" width_o="4485" height_o="2778" data-src="https://freight.cargo.site/t/original/i/4fc936e617d68ebb51c3727a3b1d442f23782ac4064de7fa4b041d2759629f0e/feature4.jpg" data-mid="52828840" border="0" src="https://freight.cargo.site/w/1000/i/4fc936e617d68ebb51c3727a3b1d442f23782ac4064de7fa4b041d2759629f0e/feature4.jpg" /> https://veev.cargo.site/Text Thu, 17 Oct 2019 02:00:55 +0000 Genevieve Hoffman https://veev.cargo.site/Text Fundamentals Charing Cross London WC2N 5D,&nbsp;UK Experiments Via Cordusio, 4 20123 Milano,&nbsp;Italy Formulations 200 N Spring St Los Angeles California,&nbsp;90012 Interpretations 3 Rue des Barres 75004 Paris,&nbsp;France https://veev.cargo.site/Work Thu, 17 Oct 2019 02:00:55 +0000 Genevieve Hoffman https://veev.cargo.site/Work I'm a designer and data visualization engineer working to build novel modes of communication and insights with data. My interests and experience creating data-driven projects span art, visualization, data science, mapping and interactive documentary. I like to share what I’ve learned along the way about working with data by teaching and volunteering. I’ve taught a Data Art class at NYU’s Interactive Telecommunications Program and SHIFTA, the online program of Barcelona University School of Design and Engineering,&nbsp;and was a founding member of the USA for UNHCR’s Data Advisory Board, where advisors shared data practices from industry to better serve the needs of refugees worldwide. I also work with companies and non-profits creating data visualizations, interactive web experiences, research reports, style guides and dashboards. Please get in touch if you have any data-related projects or ideas you’d like to explore.ghoffman (at) nyu (dot) edu https://veev.cargo.site/Flint-is-a-place Fri, 18 Oct 2019 01:06:00 +0000 Genevieve Hoffman https://veev.cargo.site/Flint-is-a-place <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/2c31f8c9da28c3a9979b2aed9fcf6d3b6fb12795c2de10c9c2b8ef1fc38d0d3e/Screen-Shot-2019-10-20-at-7.22.01-PM.png" data-mid="53060514" border="0" src="https://freight.cargo.site/w/1000/i/2c31f8c9da28c3a9979b2aed9fcf6d3b6fb12795c2de10c9c2b8ef1fc38d0d3e/Screen-Shot-2019-10-20-at-7.22.01-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/7daf5f03bf24dd24171d6682c267bf8e63c9d6145e6906c247655810f301f8ce/Screen-Shot-2019-10-20-at-7.25.14-PM.png" data-mid="53060701" border="0" src="https://freight.cargo.site/w/1000/i/7daf5f03bf24dd24171d6682c267bf8e63c9d6145e6906c247655810f301f8ce/Screen-Shot-2019-10-20-at-7.25.14-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/dbba3bddce26e70190d3f4856f1c380c86d35edf0667414a1897ce907944fb1e/Screen-Shot-2019-10-20-at-8.17.20-PM.png" data-mid="53062896" border="0" src="https://freight.cargo.site/w/1000/i/dbba3bddce26e70190d3f4856f1c380c86d35edf0667414a1897ce907944fb1e/Screen-Shot-2019-10-20-at-8.17.20-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/623e20ecc339468c9b9928c392dcc9ed0bed8ef220b870bd7679411832ea8c33/Screen-Shot-2019-10-20-at-7.29.56-PM.png" data-mid="53060706" border="0" src="https://freight.cargo.site/w/1000/i/623e20ecc339468c9b9928c392dcc9ed0bed8ef220b870bd7679411832ea8c33/Screen-Shot-2019-10-20-at-7.29.56-PM.png" /> <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/3a8266f55d9e1e5e9c37c61e7c55dbe09da4fec147c9130d3548dbb91fc990f1/Screen-Shot-2019-10-20-at-7.50.24-PM.png" data-mid="53062887" border="0" src="https://freight.cargo.site/w/1000/i/3a8266f55d9e1e5e9c37c61e7c55dbe09da4fec147c9130d3548dbb91fc990f1/Screen-Shot-2019-10-20-at-7.50.24-PM.png" /> FLINT IS A PLACE - FPD MAP VISUALIZATIONRecreating a day with the Flint Police Department as a spatial experience of audio and data Credits Created by Zack Canepari Art direction + Graphic Design by Guillermo Brotons Interactive Design + Development by Frederik Delmotte Producer Screen Projects Interactive Map by Genevieve Hoffman Role prototyping, data scraping, data analysis, data visualization, front-end development Flint is a place is a cross platform episodic documentary series about Flint, Michigan. The project seeks to document a specific moment within this American city both as it’s perceived and experienced. The idea is not to show people some place that they don’t know. The idea is to put them in a place that they think they do know. The FPD Chapter sits alongside other episodes that portray various stories of life in Flint - from teens going to their high school prom to a single mother trying to raise her son. In 2016, there were only 98 Flint Police Officers serving a city of 100,000. That is the smallest number of officers of any comparable city in America. Between the high crime, the lack of jobs and the recent water crisis, the FPD is a department in crisis policing a city in crisis. The map documents one week of calls for service in Flint and the challenge the department faces as it tries to meet the demands of a community on the edge. Background Zack Canepari approached me after I gave a talk to his group at Screen Interactive, a workshop for photographers and filmmakers looking to bring more interactivity into their work. He was interested in creating a map of a week's worth of 911 calls in Flint, MI to accompany an episode about the Flint Police for his interactivity documentary Flint Is A Place. I mainly knew of Flint from Michael Moore's documentary Roger &amp; Me, about the shuttering of the GM Plant that operated there, since this was in 2015, before the water crisis was made public. At this point, Flint was known more for once topping the nationwide per capita murder rate, a city half the size of what it once was at its peak. With a dramatically reduced tax base but the same area to cover, Flint Police officers were left sprinting to meet an increasingly unrealistic demand with the resources at hand. Zack is the creator of Flint Is A Place, an interactive documentary showcasing aspects of people's lives who live in Flint. Some episodes are upbeat, like Prom, which follows a group of teenagers as they go to the most important dance of high school. Others are more introspective, like Briana's chapter, who is the younger sister of Flint's pride and joy, Claressa Shields, who at 17 won the gold medal in women's boxing the first time it qualified as an Olympic event, a journey that Canepari captured in his previous feature-length documentary with Drea Cooper, T-Rex (Claressa Shield's nickname).&nbsp; <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/a6af68de0568814f87e676cd900c912597abfe511c1a2f42f5eb3f9686418350/Screen-Shot-2019-10-20-at-8.44.00-PM.png" data-mid="53062900" border="0" src="https://freight.cargo.site/w/1000/i/a6af68de0568814f87e676cd900c912597abfe511c1a2f42f5eb3f9686418350/Screen-Shot-2019-10-20-at-8.44.00-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/88d261981ca093d3f7e020398cc04aa7d816134c3ff42efc2cc90f6b47714529/Screen-Shot-2019-10-20-at-8.50.19-PM.png" data-mid="53062904" border="0" src="https://freight.cargo.site/w/1000/i/88d261981ca093d3f7e020398cc04aa7d816134c3ff42efc2cc90f6b47714529/Screen-Shot-2019-10-20-at-8.50.19-PM.png" /> <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/f4e4a6fc4613b652acf5e102877e3f1228e7ace515f5b82113cb3de4ad233202/Screen-Shot-2019-10-20-at-8.44.31-PM.png" data-mid="53062901" border="0" src="https://freight.cargo.site/w/1000/i/f4e4a6fc4613b652acf5e102877e3f1228e7ace515f5b82113cb3de4ad233202/Screen-Shot-2019-10-20-at-8.44.31-PM.png" /> The result of our collaboration is the Flint PD chapter's Incidents Map. The Incident Map follows a day's worth of calls made to the Flint police dispatcher. These incidents were recorded and broadcast over radio to officers on duty. Audio recordings of these communications were archived by Broadcastify. In order to recreate the sense of overwhelming demand and immediacy of decisions, we combined time-based data from the police department documenting the types and locations of the incidents, data from Facebook documenting the community's concerns and conversation around various events, and audio recordings of the dispatch communications to co-exist on a map of the city as we replay a day in Flint from the perspective of those trying to protect and serve it. Context The Incidents Map sits within a larger multi-format narrative about the Flint Police Department. Officers become characters in the documentary miniseries Flint Town on Netflix. Policing Flint uses 360 video to situate the viewer in their world as these officers make tough decisions about which calls they can attend. The VR film was featured in the New York Times and is viewable on their app. <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/01123f7c990e64840c7310aa219540d16c8a1cdc894b269756d96121f303f00a/Screen-Shot-2019-10-20-at-7.26.22-PM.png" data-mid="53060704" border="0" src="https://freight.cargo.site/w/1000/i/01123f7c990e64840c7310aa219540d16c8a1cdc894b269756d96121f303f00a/Screen-Shot-2019-10-20-at-7.26.22-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/406d91660554e6e043d63f8be20b498e96b4fc22eb8a488f23325121f92fc334/Screen-Shot-2019-10-20-at-7.26.35-PM.png" data-mid="53060705" border="0" src="https://freight.cargo.site/w/1000/i/406d91660554e6e043d63f8be20b498e96b4fc22eb8a488f23325121f92fc334/Screen-Shot-2019-10-20-at-7.26.35-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/623e20ecc339468c9b9928c392dcc9ed0bed8ef220b870bd7679411832ea8c33/Screen-Shot-2019-10-20-at-7.29.56-PM.png" data-mid="53060706" border="0" src="https://freight.cargo.site/w/1000/i/623e20ecc339468c9b9928c392dcc9ed0bed8ef220b870bd7679411832ea8c33/Screen-Shot-2019-10-20-at-7.29.56-PM.png" /> Alongside the Incidents Map in the Flint PD chapter are the Policing Flint 360 video experience created for the New York Times, and the Flint Town documentary series, available on Netflix. In addition, officers have written personal essays on what being a cop in Flint is like for them. This editorial grounds the chapter in their own voices.<img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/f97d88bde7f11d57fca6b3a952546a74ea619c46dd3ce2085bff12dc91848ae8/Screen-Shot-2019-10-20-at-7.25.45-PM.png" data-mid="53060703" border="0" src="https://freight.cargo.site/w/1000/i/f97d88bde7f11d57fca6b3a952546a74ea619c46dd3ce2085bff12dc91848ae8/Screen-Shot-2019-10-20-at-7.25.45-PM.png" /> The Incidents Incident data as well as audio form the basis for the experience. 911 calls are fielded by the police dispatcher, who enter them into the system and alert officers on patrol to what is happening and where. Both the dispatchers and the officers need to prioritize what they can actually respond to. As officers explain in the documentaries, the moment they start a shift they are already behind, and are forced to make hard decisions about what incidents will even be investigated. Many incidents in the dataset that the Flint Police Department shared with us were closed without any officer following up. <img width="2876" height="1756" width_o="2876" height_o="1756" data-src="https://freight.cargo.site/t/original/i/bc9ad9779a9604253b9f34793010d899aab1e26581439369eb7fe782b960f472/Screen-Shot-2019-10-20-at-7.46.38-PM.png" data-mid="53062885" border="0" src="https://freight.cargo.site/w/1000/i/bc9ad9779a9604253b9f34793010d899aab1e26581439369eb7fe782b960f472/Screen-Shot-2019-10-20-at-7.46.38-PM.png" />The landing page to the Flint Police Department Incidents Map gives background about Flint and the budget crises the police department has faced in the midst of growing demands on their services <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/67b778e13e2f09050ae3b3af72ae8dcf3566ceca731caed2b8b98b833b4b4b93/Screen-Shot-2019-10-20-at-7.52.24-PM.png" data-mid="53062888" border="0" src="https://freight.cargo.site/w/1000/i/67b778e13e2f09050ae3b3af72ae8dcf3566ceca731caed2b8b98b833b4b4b93/Screen-Shot-2019-10-20-at-7.52.24-PM.png" />The primary view of the Incidents Map shows active calls at a given moment within the 24 hour period, where blue incidents show where patrol units are and red incidents show which are still waiting for police to investigate The Community Data from a community watch group on Facebook was scraped and showcased on the map, highlighting which incidents prompted the community to comment on and what they chose to say. I used custom software to scrape and parse the comments into a usable format, then matched these comments to incidents from the police in order to locate them on a map based on corresponding timestamps and descriptions. <img width="2880" height="1758" width_o="2880" height_o="1758" data-src="https://freight.cargo.site/t/original/i/882d7bc680139652aeea1a92cc6ac9b3db36376ea7264c3f9381a65791362804/Screen-Shot-2019-10-20-at-7.54.28-PM.png" data-mid="53062890" border="0" src="https://freight.cargo.site/w/1000/i/882d7bc680139652aeea1a92cc6ac9b3db36376ea7264c3f9381a65791362804/Screen-Shot-2019-10-20-at-7.54.28-PM.png" />The Community view shows plots a week’s worth of Incidents that had Facebook group engagement <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/3374f75827cd546c287b100bc6de49c064f27dac6dafd82989ad57c28735bfc2/Screen-Shot-2019-10-20-at-7.56.44-PM.png" data-mid="53062892" border="0" src="https://freight.cargo.site/w/1000/i/3374f75827cd546c287b100bc6de49c064f27dac6dafd82989ad57c28735bfc2/Screen-Shot-2019-10-20-at-7.56.44-PM.png" /> Clicking on an icon revealed the conversation, removing personal details and names to protect people’s identities Sorting through the Info The last view allows the user to explore the incidents in more detail, digging into how long wait times were for various incident types, whether the police showed up (less opaque incidents show that a police unit never appeared and the incident was closed without followup). The time-based view shows the incidents as they piled up and overlapped with one another. Some lasting almost a full 24 hours, and others barely registering. The type-based view shows which types of incidents occurred more often during the course of these 24 hours. The wait-time views sort the incidents both by the amount of time waiting for officers to appear (red) as well as the amount of time the officers spent at the scene (blue). Highlighting a bar reveals the incident’s info, such as type, priority level, time called into dispatch and time it was closed. Bars with less opacity were ones the police were never able to follow up with. <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/13af8cf61ddd2ea157dec9d7848a270ef3293f2f62565ee1bbb735bec3ca156f/Screen-Shot-2019-10-20-at-8.18.15-PM.png" data-mid="53062898" border="0" src="https://freight.cargo.site/w/1000/i/13af8cf61ddd2ea157dec9d7848a270ef3293f2f62565ee1bbb735bec3ca156f/Screen-Shot-2019-10-20-at-8.18.15-PM.png" /> <img width="2880" height="1758" width_o="2880" height_o="1758" data-src="https://freight.cargo.site/t/original/i/99a84f7699cee1c6c46b73dca91631c79f2d8acd59ce97ecf0b0de9868780f05/Screen-Shot-2019-10-20-at-8.01.58-PM.png" data-mid="53062894" border="0" src="https://freight.cargo.site/w/1000/i/99a84f7699cee1c6c46b73dca91631c79f2d8acd59ce97ecf0b0de9868780f05/Screen-Shot-2019-10-20-at-8.01.58-PM.png" /> <img width="2880" height="1754" width_o="2880" height_o="1754" data-src="https://freight.cargo.site/t/original/i/cd019bcd682282a58b82d4247ea287d3593e669b77a95410710fc0a595c800e8/Screen-Shot-2019-10-20-at-8.12.44-PM.png" data-mid="53062895" border="0" src="https://freight.cargo.site/w/1000/i/cd019bcd682282a58b82d4247ea287d3593e669b77a95410710fc0a595c800e8/Screen-Shot-2019-10-20-at-8.12.44-PM.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/34124109b739d9fd115329c71425502d724606580f7afd62c3dc3477ce533be5/Screen-Shot-2019-10-20-at-8.17.53-PM.png" data-mid="53062897" border="0" src="https://freight.cargo.site/w/1000/i/34124109b739d9fd115329c71425502d724606580f7afd62c3dc3477ce533be5/Screen-Shot-2019-10-20-at-8.17.53-PM.png" /> Time and duration view Type view Wait-time view Sourcing and reconciling the data As mentioned previously, the map incorporates three main datasets - the list of incidents with timestamp and location from the Flint PD, the community's reactions scraped from Facebook, and audio from Broadcastify, which archives all police dispatch radio for a full six-months after an incident. The audio proved to be the most challenging to work with, both from a front-end development standpoint, as well as finding a way to match them to incidents. Early prototypes playing through the audio on the timeline, but having no way to connect it with the incidents on the map proved less effective and interesting. We worked hard to come up with a way to visually connect the audio clips to incidents they describe. The first step in making this happen was running the audio files through custom software provided by Matthew Goldstein, which allowed us to transcribe the audio files with software trained on police dispatch radio soundbytes. Now, instead of 30 minute long audio files, we had shortened clips, trimmed to where the audio started and stopped, and tagged with the timestamp based on when the audio happened over the course of the day, as well as transcripts of the audio files generated by Matt's software. Next I took these clips and wrote my own software to sort them into the incidents they could have pertained to, solely based on timestamps. This reduced the amount of clips we'd need to listen to in order to match them to incidents. Then we manually matched police recordings to the incidents. Thanks in large part to the help of Flint native Layla Meillier, who was familiar with street names and other landmarks in the audio recordings, we were able to match audio to a day's worth of incidents. <img width="1394" height="2120" width_o="1394" height_o="2120" data-src="https://freight.cargo.site/t/original/i/c0c44c59041ed52584329ff8325ecc7b5690300543a2765611df9afec72f2597/facebook.png" data-mid="52897591" border="0" src="https://freight.cargo.site/w/1000/i/c0c44c59041ed52584329ff8325ecc7b5690300543a2765611df9afec72f2597/facebook.png" /> <img width="2880" height="1756" width_o="2880" height_o="1756" data-src="https://freight.cargo.site/t/original/i/4abcff53736044f14b6ee5af378b8e6fd149e4e0e683d652a7f5603262d1b5c7/Screen-Shot-2019-10-20-at-8.48.28-PM.png" data-mid="53062903" border="0" src="https://freight.cargo.site/w/1000/i/4abcff53736044f14b6ee5af378b8e6fd149e4e0e683d652a7f5603262d1b5c7/Screen-Shot-2019-10-20-at-8.48.28-PM.png" /> <img width="1742" height="1408" width_o="1742" height_o="1408" data-src="https://freight.cargo.site/t/original/i/9717b2e3e10795e3827fd408adfa4576526102dc900226c888d6c4347b78f252/Screen-Shot-2019-09-17-at-11.32.06-PM.png" data-mid="52897616" border="0" src="https://freight.cargo.site/w/1000/i/9717b2e3e10795e3827fd408adfa4576526102dc900226c888d6c4347b78f252/Screen-Shot-2019-09-17-at-11.32.06-PM.png" /> Exploratory AnalysisIn order to get a feel for the incidents data, I used software like python and Jupyter notebooks, d3.js and mapbox gl js to make quick visualizations of the incidents and how they broke down by type, time, and location. Counts by incident type over a week <img width="770" height="596" width_o="770" height_o="596" data-src="https://freight.cargo.site/t/original/i/c12a160b0d3826da1b0e73fbd18680a0c8bc749a28ce1008a77954c48920abeb/Screen-Shot-2018-02-15-at-3.54.19-PM.png" data-mid="52897598" border="0" src="https://freight.cargo.site/w/770/i/c12a160b0d3826da1b0e73fbd18680a0c8bc749a28ce1008a77954c48920abeb/Screen-Shot-2018-02-15-at-3.54.19-PM.png" /> Density map of a week’s worth of incidents <img width="786" height="1125" width_o="786" height_o="1125" data-src="https://freight.cargo.site/t/original/i/93ede4becae3530cf8b6e63fcbef1981af6bcdc26413c3f8b70fc33eeb137339/Screen-Shot-2016-11-04-at-5.23.55-PM.png" data-mid="52897597" border="0" src="https://freight.cargo.site/w/786/i/93ede4becae3530cf8b6e63fcbef1981af6bcdc26413c3f8b70fc33eeb137339/Screen-Shot-2016-11-04-at-5.23.55-PM.png" /> Scatterplot of types of incidents over time <img width="1566" height="2202" width_o="1566" height_o="2202" data-src="https://freight.cargo.site/t/original/i/eab05b3ba0de87153577328e70ca9538962a1fc79529c6c0dd4338ad0048e3b3/Screen-Shot-2016-11-02-at-11.34.58-PM.png" data-mid="52897596" border="0" src="https://freight.cargo.site/w/1000/i/eab05b3ba0de87153577328e70ca9538962a1fc79529c6c0dd4338ad0048e3b3/Screen-Shot-2016-11-02-at-11.34.58-PM.png" /> Design IterationsThe prototype went through many iterations to understand how the data should co-exist. I also prototyped a way for the map to contain pins for various photos Zack had taken on ride-alongs. <img width="1680" height="950" width_o="1680" height_o="950" data-src="https://freight.cargo.site/t/original/i/435255048b900b3da1a0914b4951613463027d281cd4d0f8791d165c8f4875cd/flint-map-site-design-01.png" data-mid="53063164" border="0" src="https://freight.cargo.site/w/1000/i/435255048b900b3da1a0914b4951613463027d281cd4d0f8791d165c8f4875cd/flint-map-site-design-01.png" /> <img width="2795" height="1834" width_o="2795" height_o="1834" data-src="https://freight.cargo.site/t/original/i/d62b4887b03b261df98b18137f20342f5867437828257ffef8e775ef37bfa9a3/flint-map-mockup-satellite.png" data-mid="53063163" border="0" src="https://freight.cargo.site/w/1000/i/d62b4887b03b261df98b18137f20342f5867437828257ffef8e775ef37bfa9a3/flint-map-mockup-satellite.png" /> <img width="2795" height="1834" width_o="2795" height_o="1834" data-src="https://freight.cargo.site/t/original/i/2457c66787a53bc66d3b8d0dab1a110865794998f485c1b1723bb1b7524c7dc6/flint-map-mockup-gray.png" data-mid="52897592" border="0" src="https://freight.cargo.site/w/1000/i/2457c66787a53bc66d3b8d0dab1a110865794998f485c1b1723bb1b7524c7dc6/flint-map-mockup-gray.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/f51d0b41fc8ad901e6a7d63e078508ed1a32ed85d23ebc0a7020ab8b721f108c/photo-pins-to-place-images.png" data-mid="52897594" border="0" src="https://freight.cargo.site/w/1000/i/f51d0b41fc8ad901e6a7d63e078508ed1a32ed85d23ebc0a7020ab8b721f108c/photo-pins-to-place-images.png" /> <img width="1440" height="1024" width_o="1440" height_o="1024" data-src="https://freight.cargo.site/t/original/i/02e0ee0bdbb50094ed8f3ece94878d4dd8c971a29529c7e934b9953816040564/if-selected-from-pin.png" data-mid="52897593" border="0" src="https://freight.cargo.site/w/1000/i/02e0ee0bdbb50094ed8f3ece94878d4dd8c971a29529c7e934b9953816040564/if-selected-from-pin.png" /> Examining a patrol unit’s week for the OCR JournalWhile working on this project I was also involved with creating the second edition of The Office for Creative Research's journal, a print and online publication with essays and art by staff and friends on interesting datasets and stories. I decided to use the Flint police incident data to see what it might be like to plot the stops a unit was able to make along the course of their patrol shift. These paths traverse all over the city, without much geographical logic or optimization. The piece also exists as an article on Medium. <img width="2000" height="1463" width_o="2000" height_o="1463" data-src="https://freight.cargo.site/t/original/i/11f98b15edbb7023e0889adaab0fa510e3cb25e37673ada33e8a27cbc284f4c3/aug2-7-nolabels-01-sm.png" data-mid="59139040" border="0" src="https://freight.cargo.site/w/1000/i/11f98b15edbb7023e0889adaab0fa510e3cb25e37673ada33e8a27cbc284f4c3/aug2-7-nolabels-01-sm.png" /> https://veev.cargo.site/Visualizing-Biobot-s-Covid-19-Wastewater-Data Fri, 16 Feb 2024 20:52:15 +0000 Genevieve Hoffman https://veev.cargo.site/Visualizing-Biobot-s-Covid-19-Wastewater-Data <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/6224672abc2b3d0e13f4dcdd555237e3cba4cfade6b8d39f822e0dcadcaffa68/Intro-Nationwide.png" data-mid="204831492" border="0" src="https://freight.cargo.site/w/1000/i/6224672abc2b3d0e13f4dcdd555237e3cba4cfade6b8d39f822e0dcadcaffa68/Intro-Nationwide.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/e54b9dd083a15d89ffb2aebdea7ac160de97d2a515f476a4fd6d83dc32e6e5f6/Intro-Nationwide-Hover.png" data-mid="204831489" border="0" src="https://freight.cargo.site/w/1000/i/e54b9dd083a15d89ffb2aebdea7ac160de97d2a515f476a4fd6d83dc32e6e5f6/Intro-Nationwide-Hover.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/1d8f236f7c84e34aa917aedc5f87f40246633b682453eb365c786c0cdd842d34/Intro-Nationwide-No-Cases.png" data-mid="204831490" border="0" src="https://freight.cargo.site/w/1000/i/1d8f236f7c84e34aa917aedc5f87f40246633b682453eb365c786c0cdd842d34/Intro-Nationwide-No-Cases.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/0844c33c912c0f0b979d0a8d5ac726dc5e7d53111a1c72d779224f0a9dcd8af8/Intro-Nationwide-6months.png" data-mid="204831488" border="0" src="https://freight.cargo.site/w/1000/i/0844c33c912c0f0b979d0a8d5ac726dc5e7d53111a1c72d779224f0a9dcd8af8/Intro-Nationwide-6months.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/6d0edb4bd1d4a481f7f4d4cc861b97950ab185660cb3834e2b756b0ddcade293/Intro-Nationwide-Year-Over-Year.png" data-mid="204831491" border="0" src="https://freight.cargo.site/w/1000/i/6d0edb4bd1d4a481f7f4d4cc861b97950ab185660cb3834e2b756b0ddcade293/Intro-Nationwide-Year-Over-Year.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/f2069d43518400d689c7f887483c58ac488fd09f49ba2973f1b5d844877fa386/Intro-Regional.png" data-mid="204831493" border="0" src="https://freight.cargo.site/w/1000/i/f2069d43518400d689c7f887483c58ac488fd09f49ba2973f1b5d844877fa386/Intro-Regional.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/2cbe40454d4a87f21e00085ff11cafc8a26581d053fb425c8bc412ff3a9f01f9/Intro-Variants.png" data-mid="204831494" border="0" src="https://freight.cargo.site/w/1000/i/2cbe40454d4a87f21e00085ff11cafc8a26581d053fb425c8bc412ff3a9f01f9/Intro-Variants.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/58688eeccca19ad11dfe86c9f782642884bd9c62f9fd514aae7aacfcb09f5572/Intro-Counties.png" data-mid="204831487" border="0" src="https://freight.cargo.site/w/1000/i/58688eeccca19ad11dfe86c9f782642884bd9c62f9fd514aae7aacfcb09f5572/Intro-Counties.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/4610ab16ecb676603c90f97dbf8d9e290c505a7281649b89caf13545bd0a8c73/Intro-Counties-Enlarged.png" data-mid="204831486" border="0" src="https://freight.cargo.site/w/1000/i/4610ab16ecb676603c90f97dbf8d9e290c505a7281649b89caf13545bd0a8c73/Intro-Counties-Enlarged.png" /> BIOBOT ANALYTICS - PUBLIC DATA DASHBOARDA redesign of Biobot Analytics’ public-facing data page evangelizing the importance of wastewater data to monitor the Covid-19 pandemic Credits Interactive Design, Prototyping, Front-End Development and Product Management Genevieve Hoffman Data Analysis Max Imakaev Web Design Kyja Kutnick Copy Editing Claire Duvallet, Rebecca Malizia Additional Web Development Maria Kravtsova, Alison Pape, Mike RichardsData Quality Review Sasha Halpern, Annie Kuan, Quentin Smith Role prototyping, data visualization, front-end development, product management, ux design As Head of Product Design at Biobot Analytics from 2021-2023, I was the founding product hire at the startup, joining in June of 2020. One of the main projects I worked on during my time at the company was the public-facing view of Biobot's Covid-19 wastewater data. The project underwent a significant redesign in early 2022 in an effort to bring more credibility, trustworthiness and timeliness to the data. As a designer and data visualization engineer, I worked with a small team of data scientists, software engineers, a UX designer and the company's co-founders to transform the layout and enhance the user interaction of the visualization. Biobot Analytics is a wastewater-based epidemiology company founded by microbiologist Mariana Matus, PhD., and architect Newsha Ghaeli. While they launched the company in 2017 with a focus on combating the opioid crisis through wastewater-based epidemiology, they quickly pivoted to Covid-19 in early 2020. Since then, they were selected as the main vendor to the HHS and CDC for their Covid-19 wastewater surveillance programs. <img width="1440" height="912" width_o="1440" height_o="912" data-src="https://freight.cargo.site/t/original/i/9d41c17827b740566d46ce460c196acbc806da25491378e0c258db389d2a79f2/Intro_Large.gif" data-mid="204824074" border="0" src="https://freight.cargo.site/w/1000/i/9d41c17827b740566d46ce460c196acbc806da25491378e0c258db389d2a79f2/Intro_Large.gif" /> The finished redesign Sometimes passion projects take on lives of their own In March 2021, before vaccinations had started to roll out across the United States and most people were working from home, I was employed at Biobot Analytics — a startup specializing in wastewater-based epidemiology. Biobot was the first company to detect SARS-CoV-2 (the virus responsible for the Covid-19 pandemic) via wastewater analysis. I joined the team in June 2020 as the 10th hire after they had recently completed a two month nationwide probono campaign to analyze wastewater samples from across the U.S. for SARS-CoV-2. I spent most of my time designing our customer-facing products and internal tools.In May of 2021 I initiated the effort to make a visualization of the SARS-CoV-2 wastewater data from a number of localities that had been working with Biobot for the past year. I wrote the code myself, so as not to interrupt the priorities of other developers at the company. The interactive experience of the data allowed you to see the amount of virus detected in various counties' wastewater over time. It also showed the case data in those counties as a comparison, giving context to wastewater data with a clinical indicator of how much virus was present in the community. This was one of the first visualizations that showed data aggregated across locations, instead of each individual location on its own. <img width="937" height="936" width_o="937" height_o="936" data-src="https://freight.cargo.site/t/original/i/f16d9a554cc2208493d9f688d84c3b8bc4586d5cdd8c1b7ed8b5aebd20458586/data_test_by_region.png" data-mid="204824408" border="0" src="https://freight.cargo.site/w/937/i/f16d9a554cc2208493d9f688d84c3b8bc4586d5cdd8c1b7ed8b5aebd20458586/data_test_by_region.png" /> <img width="1864" height="932" width_o="1864" height_o="932" data-src="https://freight.cargo.site/t/original/i/644ce695efb4d7997d97974af12eca35a8c4f820a81ade7b6940364395dd1361/v1-interface.png" data-mid="204824564" border="0" src="https://freight.cargo.site/w/1000/i/644ce695efb4d7997d97974af12eca35a8c4f820a81ade7b6940364395dd1361/v1-interface.png" /> Left: Initial data sketches of regional wastewater averages. Right: Initial prototype launched in 2021 Challenge: Turning a prototype into a useful resource for public health The initial version also allowed you to compare a county's wastewater data trend to its regional or nationwide average, a feature made possible by Biobot's extensive network of sampling partners. At this point in the pandemic, there was still considerable skepticism around the reliability of wastewater as a way to measure Covid19, but the visualization demonstrated how well the wastewater data tracked with new clinical cases. This helped build trust in wastewater as a reliable data source over time. However, due to other company priorities, the visualization was meant to be more of a demonstration — a snapshot of previous data instead of an updating public resource.After we made the data public in 2021 people started showing interest in the initial visualization, but asked us why it wasn't updating. In order to really make this visualization a reliable public resource, our data needed to update.And while comparing a county's wastewater data to nationwide and regional averages was innovative, the visualization's UX involved a lot of scrolling, and split the difference between a dashboard and longer-form visualization. <img width="1184" height="700" width_o="1184" height_o="700" data-src="https://freight.cargo.site/t/original/i/c43b32576182a50773671325c1b47115b56f7df0e2558543c11e67d0b1e23819/PublicViz2021_UXDemo.gif" data-mid="204824625" border="0" src="https://freight.cargo.site/w/1000/i/c43b32576182a50773671325c1b47115b56f7df0e2558543c11e67d0b1e23819/PublicViz2021_UXDemo.gif" /> Earlier version of the dashboard Goals:&nbsp;Validate wastewater as a reliable data source At the end of 2021, as the Omicron wave began taking hold of the country, our team set off to redesign the public visualization.The redesign had two primary goals:Validate Covid-19 wastewater data as a reliable indicator of virus circulating in a communityHighlight the launch of the Biobot Network, a campaign to provide wastewater epidemiology services to municipalities at no cost to themselves, and share that data with communities and people across the U.S.At the time, Covid-19 pandemic funds from the CARES Act allowed many municipalities and county health departments to keep an accurate count of all positive PCR Covid-19 tests, which enabled public health officials to manage their response to the pandemic. Some of these funds were also used to test wastewater for SARS-CoV-2, but some communities with fewer resources could not cover the costs of testing wastewater. The Biobot Network addressed these needs and provided testing services to these localities at no cost. <img width="1200" height="980" width_o="1200" height_o="980" data-src="https://freight.cargo.site/t/original/i/622633286f37b14f651c726d1be065846fcbc67a99c83696805b1f16be42fb5b/Blog_Wastewater_Lead_Time.png" data-mid="204824916" border="0" src="https://freight.cargo.site/w/1000/i/622633286f37b14f651c726d1be065846fcbc67a99c83696805b1f16be42fb5b/Blog_Wastewater_Lead_Time.png" />As Covid-19 becomes endemic Wastewater data becomes a significant leading indicator <img width="1200" height="980" width_o="1200" height_o="980" data-src="https://freight.cargo.site/t/original/i/bd71137187175878d560332051263551d0cdde1775d16db2ae008f86895d3cbc/Blog_Case_Undercount.png" data-mid="204824914" border="0" src="https://freight.cargo.site/w/1000/i/bd71137187175878d560332051263551d0cdde1775d16db2ae008f86895d3cbc/Blog_Case_Undercount.png" />Wastewater data became even more important as Omicron infections went unreported Earlier versions of the visualization had incorporated a rolling average of new clinical cases to give context to the wastewater data. Comparing wastewater to clinical data primarily showed two patterns:During times when clinical testing was unavailable, such as the spring of 2020, wastewater was often a leading indicator of the amount of Covid-19 spreading in a community. At times when clinical testing was more available, wastewater data tracked very closely to clinical daily new infections, proving to be a reliable alternative data source.An additional goal of the visualization redesign was to highlight Biobot's capabilities in detecting SARS-CoV-2 variants from wastewater. This was top of mind as the Delta variant overtook the pre-existing Alpha variant in late summer and fall of 2021. An opportunity for improvements, increased usability and brand alignment Inspiration and competitive analysis We looked at several widely-used examples for Covid-19 data to hone in on our goal for the redesign. One of our favorites was the New York Times' Covid-19 data page. I liked that all the various views of the data were visible at a glance just by scrolling, and did not require any user interaction to surface the various aggregation levels of the data.Other popular dashboards such as the CDC data page were reviewed, however we received a lot of feedback from twitter that our layout and design for the wastewater data was more intuitive and easier to use. <img width="370" height="528" width_o="370" height_o="528" data-src="https://freight.cargo.site/t/original/i/6670450c120194b5627314e93a1f9ce997a824065471863acc4a99b48d9fd5d6/NYT_Inspo.png" data-mid="204825398" border="0" src="https://freight.cargo.site/w/370/i/6670450c120194b5627314e93a1f9ce997a824065471863acc4a99b48d9fd5d6/NYT_Inspo.png" /> The New York Times Covid-19 Visualization Page <img width="377" height="384" width_o="377" height_o="384" data-src="https://freight.cargo.site/t/original/i/9bbe44e16b7258aae4205c14d8f939abda030834adbd25f84e6780af7ef71573/CDC_Dashboard.png" data-mid="204825397" border="0" src="https://freight.cargo.site/w/377/i/9bbe44e16b7258aae4205c14d8f939abda030834adbd25f84e6780af7ef71573/CDC_Dashboard.png" /> The CDC's Covid-19 Wastewater Dashboard Using surveys for user research As the visualization evolved over time, we conducted a month-long survey to gather user feedback. The goal of the voluntary survey was to better understand users of the public visualization, and to get feedback on the utility of county-level data, variants of concern, and desired features or improvements. Understand &amp; segment users of the visualizationInform methods used for sharing the visualizationUnderstand utility of county-level dataInform how many variants of concern are helpful to various customer segmentsProvide ideas for future featuresBegin to create database for future user research The survey ran for 4 weeks. Our primary goals for the survey were to better understand and segment users of the visualization and to find out ways people were sharing the information contained in the visualization. We had debated the utility of building features that made it easier to link specific views of the data visible when viewers toggled UI elements. We were also interested to know how much granularity visitors wanted around the data.From the survey results, we found that 43% of people shared the visualization, with a third of respondents sharing their county-level data as screenshots. While encouraging, we didn't feel this amount met our threshold for feature development.County-level data was extremely valuable to people understanding the risks they might encounter where they lived. <img width="1440" height="996" width_o="1440" height_o="996" data-src="https://freight.cargo.site/t/original/i/4a6dec3077bf165fc0c7d6b09692cfb791ec8a4daad75518a308dc1b339f71c8/layout-sketches.png" data-mid="204825602" border="0" src="https://freight.cargo.site/w/1000/i/4a6dec3077bf165fc0c7d6b09692cfb791ec8a4daad75518a308dc1b339f71c8/layout-sketches.png" /> Layout: Separate sections for nationwide, regional and county dataOne of the first decisions we made was to break out each level of data – nationwide, regional and county-level – into their own separate sections. This allowed users to quickly glance at the national trends, or scroll to view the level of granularity they were interested in. Show both case counts and rolling case averagesFor the Nationwide view, we added daily case counts in addition to the rolling average trend line in an effort to show that the case trend line was a rolling average derived from daily new infections. From our data visualization we were able to identify that the rolling average was more accurate since we saw large gaps over the weekend due to infection reporting delays. <img width="808" height="67" width_o="808" height_o="67" data-src="https://freight.cargo.site/t/original/i/4e1a063dc2339b5107a63017bbccbd7d471053cd5977327079545c2e664a821f/Legend_Detail.png" data-mid="204825638" border="0" src="https://freight.cargo.site/w/808/i/4e1a063dc2339b5107a63017bbccbd7d471053cd5977327079545c2e664a821f/Legend_Detail.png" /> <img width="806" height="414" width_o="806" height_o="414" data-src="https://freight.cargo.site/t/original/i/f77154efd49d86110d1021305a9825e6a10964d4db687d5783641d95bdf3c995/Time_Toggle.gif" data-mid="204825696" border="0" src="https://freight.cargo.site/w/806/i/f77154efd49d86110d1021305a9825e6a10964d4db687d5783641d95bdf3c995/Time_Toggle.gif" />Buttons allowed for easy transitions between timespans Create shortcuts to see more recent data The primary UI on each visualization became button shortcuts to toggle from the default all time view to the last 6 weeks or last 6 months of data. The decision to create button shortcuts over a more nuanced slider or date range picker was to reduce the complexity or need for users to manipulate a slider. We wanted the page to feel more like an editorial layout than a dashboard. Comparing regional trends and variants For the Regional view we compared the averaged trend line of each census region - Northeast, Midwest, South and West - to see the variations in Covid-19 across the country. In this section we also added information on the percentage breakdown of which Covid-19 variants were most active across each region. <img width="1112" height="956" width_o="1112" height_o="956" data-src="https://freight.cargo.site/t/original/i/f496cb88c418b598e756f212d4fd7993536e032c3ad266e43820fae84beeb6d7/Regional_View.png" data-mid="204829990" border="0" src="https://freight.cargo.site/w/1000/i/f496cb88c418b598e756f212d4fd7993536e032c3ad266e43820fae84beeb6d7/Regional_View.png" /> <img width="860" height="484" width_o="860" height_o="484" data-src="https://freight.cargo.site/t/original/i/f5cfa9ad0a885702275c3c8e7da40d12191f2635eed576565eb4adae8813ed62/County_Dropdown.gif" data-mid="204830144" border="0" src="https://freight.cargo.site/w/860/i/f5cfa9ad0a885702275c3c8e7da40d12191f2635eed576565eb4adae8813ed62/County_Dropdown.gif" />A dropdown menu enables filtering county-level data by state Using aggregate data to give context to county trends For the County-level view we wanted an easy way to compare trend lines across counties to one another. We also thought it was important for users to search for the counties most relevant to them. A state dropdown menu allowed ways for users to filter counties by state. We removed the functionality to compare a county trend to its regional average, and instead showed that county's clinical case rolling average for context. Later, as case counts became less reliable, we added a feature to compare each county trend to the nationwide average, as a way to benchmark if Covid-19 in that county was higher or lower than the nationwide average. Implementing an opt-out contact form prior to data sharing to better understand how our users engaged with the data When we first launched the public-facing visualization in June 2021, we also shared the data used to generate the visualizations to Github in an effort to give academics and citizen scientists access to this data set for non-commercial use. A number of academics and others interested in forecasting Covid surges used the data set in modeling projects, or as a way to predict various types of surges.We experimented with various approaches to providing access to this data - first by linking directly to the data below the visualization, then later by encouraging users to get in touch and tell us how they were using the data. <img width="833" height="546" width_o="833" height_o="546" data-src="https://freight.cargo.site/t/original/i/a66c3dd813e58087ec5d5c51d634c36ac242da16694b6fbabf4da5c53551cc47/Data_Access_v1.png" data-mid="204830342" border="0" src="https://freight.cargo.site/w/833/i/a66c3dd813e58087ec5d5c51d634c36ac242da16694b6fbabf4da5c53551cc47/Data_Access_v1.png" /> Initial data access approach that allowed users to click a button beneath the graph to download data <img width="534" height="546" width_o="534" height_o="546" data-src="https://freight.cargo.site/t/original/i/269c5422a8f3b57e8e1d809576a6e1309a32501f2bd55ab41a3eb354e4e9ee9b/Data_Access_v2.png" data-mid="204830343" border="0" src="https://freight.cargo.site/w/534/i/269c5422a8f3b57e8e1d809576a6e1309a32501f2bd55ab41a3eb354e4e9ee9b/Data_Access_v2.png" />Subsequent approach with a larger call to action prompting users to share how they used the data before downloading Impact: Increased web visits, press coverage, social sharing and accolades The redesign of the visualization launched in early 2022, right as the Omicron wave’s peak was starting to level off. During the Omicron surge over the holidays, at-home testing was much more widely available than during previous waves. In addition, many cases went undercounted due to the milder symptoms associated with the Omicron variant infections. However, the wastewater data told a much different story, and more people hoping to understand the amount of SARS-CoV-2 circulating in their communities looked to Biobot's wastewater data.With the launch of the redesigned page, traffic to the visualization on Biobot's website increased by 100 fold , going from around 50 visits per day to 5000. To date, the page has received over 1.2 million views, and consistently accounted for 68% of direct traffic to the company's website. The visualization was linked to by the New York Times, in reference to wastewater data as a better indicator of the Omicron surge, featured on NBC News, and tweeted by Rachel Maddow. In addition to press coverage, the visualization received an honorable mention in Fast Company's 2022 Data Design Awards. <img width="1194" height="687" width_o="1194" height_o="687" data-src="https://freight.cargo.site/t/original/i/fb79b89d258a949d42c45d928c21afdc08814c993c40fca85eebb22a43fad4b0/FastCompany.png" data-mid="204830919" border="0" src="https://freight.cargo.site/w/1000/i/fb79b89d258a949d42c45d928c21afdc08814c993c40fca85eebb22a43fad4b0/FastCompany.png" />The visualization was a finalist in Fast Company's 2022 Data Design category <img width="499" height="458" width_o="499" height_o="458" data-src="https://freight.cargo.site/t/original/i/52adddd5a55273785be056512436c27a2028a245148eb22ffd99a3a9284b8cf3/RachelMaddowTweet2.png" data-mid="204830977" border="0" src="https://freight.cargo.site/w/499/i/52adddd5a55273785be056512436c27a2028a245148eb22ffd99a3a9284b8cf3/RachelMaddowTweet2.png" />Proud moment when Rachel Maddow tweeted about Biobot's wastewater dashboard Having a real impact in people’s lives as they make decisions about their health and safetyOver time the company received a number of messages from users about how they use the data, and how crucial it is to inform the decisions they make to protect themselves, their loved ones and their community. &nbsp;How do you use wastewater data? "We develop evidence base PPE enhancements in environments where extra precaution is wanted and necessary. We’d love to provide customers with regional case rate data to help inform customer decisions." "My family is using wastewater data to watch for the next surge. We change what we do (dental appointments, shopping in person, etc.) based on viral levels." "I am a psychotherapist who sees vulnerable populations and I track wastewater locally to ensure I am keeping myself and my clients safe when seeing them for in person sessions. Thank you for your work in compiling and sharing this data!""To track Covid near the office and home, now that it's the only useful data available.""To follow national, regional, and local trends.&nbsp; It's the only reliable data we have for community level trends." "To determine how safe it is for the kids to be with their friends/school without a mask.""I am using it to inform my behavior so that I can minimize the chance of infecting myself or another with what is still a novel virus, known to cause damage to multiple body systems. I am high risk for PASC and since the government has reduced its transparency about transmission rates, I rely on wastewater data to keep myself safe." Learnings:&nbsp;Make it easy to find relevant dataThe editorial layout was an appealing visual identity for the public face of Biobot’s data, and allowed for features to be added over time The redesign effort confirmed that sometimes in data visualization, less can be more. Dashboards with a variety of UI elements can be very powerful, but are often better suited to power users over casual visitors. Since this visualization was meant to be the public face of Biobot's data, the editorial approach helped users find the data they were interested in by browsing instead of searching.The editorial layout created an appealing visual identity and allowed for additional visualization features and pages to be added over time.I'd also add something about validating a new data source and creating an accessible UX for all individualsI'd also consider adding something about evolving over time as the landscape / data changed over time and how that is important to keep up with an ever changing pandemic, and be a pioneer in the field. https://veev.cargo.site/We-Were-Strangers-Once-Too Sat, 15 Jul 2017 19:41:16 +0000 Genevieve Hoffman https://veev.cargo.site/We-Were-Strangers-Once-Too <img width="6000" height="3375" width_o="6000" height_o="3375" data-src="https://freight.cargo.site/t/original/i/3e4cdb21b617d7c9d8cc33a427b333f8e87586f3fcd5147d413a3583bb5908bb/heart_phone_16x9.jpg" data-mid="56022722" border="0" src="https://freight.cargo.site/w/1000/i/3e4cdb21b617d7c9d8cc33a427b333f8e87586f3fcd5147d413a3583bb5908bb/heart_phone_16x9.jpg" /> <img width="1469" height="826" width_o="1469" height_o="826" data-src="https://freight.cargo.site/t/original/i/7b3a75ef60e9991c234efa71c49b3f1439060b6606651cde97d04f72004e0361/times-square-heart-16x9-closer.jpg" data-mid="56023008" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/7b3a75ef60e9991c234efa71c49b3f1439060b6606651cde97d04f72004e0361/times-square-heart-16x9-closer.jpg" /> <img width="960" height="540" width_o="960" height_o="540" data-src="https://freight.cargo.site/t/original/i/420ddc4bfc5b48385cd0013857f186a4ae399b926b31443bf6558458ea1dcc09/weWereStrangers_07_16x9.jpg" data-mid="56023009" border="0" src="https://freight.cargo.site/w/960/i/420ddc4bfc5b48385cd0013857f186a4ae399b926b31443bf6558458ea1dcc09/weWereStrangers_07_16x9.jpg" /> <img width="6000" height="3375" width_o="6000" height_o="3375" data-src="https://freight.cargo.site/t/original/i/60361a839f1706956f54a240e2f82d5583885fddc8d43996fd2ea130cee5f3d4/turkey_detail_16x9.jpg" data-mid="56022725" border="0" src="https://freight.cargo.site/w/1000/i/60361a839f1706956f54a240e2f82d5583885fddc8d43996fd2ea130cee5f3d4/turkey_detail_16x9.jpg" /> WE WERE STRANGERS ONCE TOO Bringing public data to the busiest place on earth in celebration of New York City's immigrant communities. Credits Concept + Design Noa Younse, Genevieve Hoffman Creative Direction Jer Thorp Fabrication + Installation TwoSeven Commissioned by Times Square Alliance Curation by Urban Design Forum Role conceptual design, data research, prototyping We Were Strangers Once Too is a public data sculpture which highlights the role that immigrants have played in the founding, development, and continued vibrancy of New York City. Made of 33 metal poles each inscribed with the immigrant population in NYC from various countries around the world, a viewer’s shift in perspective resolves the sculpture to an iconic heart when viewed from the statue of Father Duffy in the center of Times Square.We Were Strangers Once Too was open to the public in Times Square, New York City from February 7 - March 6, 2017. Read the remarks Jer Thorp gave at the unveiling, who as a Canadian immigrant himself personalized our studio’s motivations for creating the piece. Video documentation of the piece created by the Times Square Alliance Context The Office for Creative Research was invited by the Urban Design Forum and to submit a proposal for the Times Square Alliance's longest running public art program, its annual Valentine's Day sculpture commission. Noa Younse and I took the lead on developing a concept and design that would highlight one of the OCR's missions as a design studio - to increase data literacy by bringing art and data to public spaces. Data used for this project is from the US Census’s American Community Survey, from 2014 <img width="2880" height="1800" width_o="2880" height_o="1800" data-src="https://freight.cargo.site/t/original/i/0e273f54ac889582bd95e638277864309f722b0d023ef9b4ee8fa183ed94ad9c/ACS_table.png" data-mid="52868399" border="0" src="https://freight.cargo.site/w/1000/i/0e273f54ac889582bd95e638277864309f722b0d023ef9b4ee8fa183ed94ad9c/ACS_table.png" /> We knew we wanted to create a sculpture from local open data, and spent some time combing through NYC's open data portal before arriving at a compelling dataset. We were also inspired by the recent presidential election, in which Donald Trump was elected after a long and divisive campaign filled with xenophobic and racist rhetoric. So when we came upon data collected by the US Census's American Community Survey of the foreign-born population of New York, or the number of immigrants and their countries of origin, we knew we'd found our data. The sculpture would be unveiled just two weeks after Trump was due to take office, and we hoped that it might be an opportunity to take a stand against the xenophobia he espoused, and use the theme of Valentine's Day to create a sort of love letter to New York City's immigrant community. By examining the data we learned that an estimated 3.2 million of the city’s 8.5 million residents were born outside of the United States, essentially 1 in 3 New Yorkers. Puerto Rico is considered a US territory, so NYC residents born in PR are not counted in the foreign-born dataset. Using one-point perspective to unite data, form and metaphor Because the Times Square Heart traditionally involves some form of a heart we had to figure out a way to use this dataset in a way that would allow us to stay true to the numbers, retain the visual form of a heart, create an engaging experience for the public, and, above all, be durable, fairly inexpensive, and easily built (we would have about a month and a half for the design and fabrication from start to finish). After some deliberation, we arrived at the idea of using one-point perspective to form a heart with the data driving the heart's shading. (redo in own words more) Early sketch of data acting as a 3D bar chart, but aligning to form the image of a heart from a particular vantage point. <img width="1800" height="675" width_o="1800" height_o="675" data-src="https://freight.cargo.site/t/original/i/2a0e397d300ff6b6fea7cd45330c9d53b5ce9251e4d18957e5b10a65b9e0fb83/1_Q6eu_KCLm4SH7uQNM42krw.jpeg" data-mid="52875226" border="0" src="https://freight.cargo.site/w/1000/i/2a0e397d300ff6b6fea7cd45330c9d53b5ce9251e4d18957e5b10a65b9e0fb83/1_Q6eu_KCLm4SH7uQNM42krw.jpeg" /> Early sketch outlining the one-point perspective technique and how the poles would align from top and side views <img width="1952" height="720" width_o="1952" height_o="720" data-src="https://freight.cargo.site/t/original/i/2923e43ff2dfab79cfac78d047c89c935b8abe7194bfd351c6ab0303fd4de43a/1_ZcSALHCpvZSz8yRR9q0WwA.jpeg" data-mid="52875227" border="0" src="https://freight.cargo.site/w/1000/i/2923e43ff2dfab79cfac78d047c89c935b8abe7194bfd351c6ab0303fd4de43a/1_ZcSALHCpvZSz8yRR9q0WwA.jpeg" /> <img width="2000" height="1294" width_o="2000" height_o="1294" data-src="https://freight.cargo.site/t/original/i/87bff3d59be1f9336ac0f7d7787f6ec888f1fced82a0633a02388d125b57451a/1_zkZO0dRE2D0nWX1fBh9cMg.jpeg" data-mid="52875228" border="0" src="https://freight.cargo.site/w/1000/i/87bff3d59be1f9336ac0f7d7787f6ec888f1fced82a0633a02388d125b57451a/1_zkZO0dRE2D0nWX1fBh9cMg.jpeg" /> A paper prototype demonstrating how the black curved shapes align to form a continuing pattern across the poles in three dimensions Computer-aided design After arriving at our concept, submitting our proposal and being selected to complete our proposed vision, we started the design process in earnest. The first challenge was accounting for height inconsistencies across Father Duffy Square, the site selected for the installation. We also had to calculate the ideal vantage point for viewing the heart (5’2”), and at what height the perspective was intended to come into view. We took our own survey of the site (pro tip, you basically need to wait until past 2am to be able to take measurements in one of the busiest places on earth), and input that into Rhino to design a platform that could make the poles level to one another. Next, we extruded the heart-shaped volume back in space from the one-point perspective vantage point, and then generated potential locations for poles and their colored portions that intersected with the volumetric heart. <img width="3300" height="2550" width_o="3300" height_o="2550" data-src="https://freight.cargo.site/t/original/i/177fa7d492e49a96cb7b8d17f0bc056d7582d71c3238673f3db2bf9fedcd2af6/A-Cover.jpg" data-mid="52877632" border="0" src="https://freight.cargo.site/w/1000/i/177fa7d492e49a96cb7b8d17f0bc056d7582d71c3238673f3db2bf9fedcd2af6/A-Cover.jpg" /> Early rendering of the concept <img width="1908" height="940" width_o="1908" height_o="940" data-src="https://freight.cargo.site/t/original/i/10aedd72a4512f4646c562b43f76ff13222a4d88c5125de132cb50a2a44e794e/1_oWZRfo5ESoZn5FgQNTlnjg.jpeg" data-mid="55939398" border="0" src="https://freight.cargo.site/w/1000/i/10aedd72a4512f4646c562b43f76ff13222a4d88c5125de132cb50a2a44e794e/1_oWZRfo5ESoZn5FgQNTlnjg.jpeg" /> The eye level was chosen to be at around 5'-2" above the viewing heart. The platform had to be designed to adapt to the sloping site. <img width="1908" height="940" width_o="1908" height_o="940" data-src="https://freight.cargo.site/t/original/i/148af9ad18d0aad60c22d6d9f3aa08ff9658db64e9f27cdbd79ea28a7b1a11bd/1_zRQzpOzCzArylWeF-XZxpA.jpeg" data-mid="52875141" border="0" src="https://freight.cargo.site/w/1000/i/148af9ad18d0aad60c22d6d9f3aa08ff9658db64e9f27cdbd79ea28a7b1a11bd/1_zRQzpOzCzArylWeF-XZxpA.jpeg" /> The volune of a heart was extruded from the one-point perspective vantage point to intersect with the area the poles would be located. <img width="1908" height="940" width_o="1908" height_o="940" data-src="https://freight.cargo.site/t/original/i/b6e7082d1230d0d09222d37bf0aaa21176922f437ec2c73796a93b88d87ad27d/1_zOYbWy-oRlEt7sYWD0eC5w.jpeg" data-mid="52875140" border="0" src="https://freight.cargo.site/w/1000/i/b6e7082d1230d0d09222d37bf0aaa21176922f437ec2c73796a93b88d87ad27d/1_zOYbWy-oRlEt7sYWD0eC5w.jpeg" /> The intersection points [in green] describe the top and bottom of the potential pole, as well as where the heart shape should be. One thing we wanted to ensure (in order to help with easier reading of the piece), was having an inch represent a consistent number of people. This meant sticking with a linear scale. However, some countries like China and the Dominican Republic had more than 300,000 people born there, while others, like Eritrea, had a few hundred. We made the call to focus on countries where more than 500 people were born (apologies to Eritrea and others), and we decided to use a linear scale where 1 inch corresponded to 2000 people. This meant that for the more popular immigrant community origins (like the DR), their populations would span multiple poles. We decided this was better than using an exponential scale, which would allow us to put one country per pole, but would be much harder to interpret and compare the relative sizes of populations. Detail view of pole where 1 inch = 2000 people <img width="960" height="640" width_o="960" height_o="640" data-src="https://freight.cargo.site/t/original/i/1a90ac08cc3fc645be1ebc19f47e5535f218b3cbab9cffa614d9b934c0605e86/weWereStrangers_09.jpg" data-mid="52823007" border="0" src="https://freight.cargo.site/w/960/i/1a90ac08cc3fc645be1ebc19f47e5535f218b3cbab9cffa614d9b934c0605e86/weWereStrangers_09.jpg" /> A girl poses with poles reflecting the population of immigrants from China, Hong Kong and Taiwan <img width="1761" height="1247" width_o="1761" height_o="1247" data-src="https://freight.cargo.site/t/original/i/9a5b5e882803ba52f7139e6624eb93c8f0973495730dc550c46d91bf88999b06/chinapoles.jpg" data-mid="55941401" border="0" src="https://freight.cargo.site/w/1000/i/9a5b5e882803ba52f7139e6624eb93c8f0973495730dc550c46d91bf88999b06/chinapoles.jpg" /> We used a brute-force algorithm (essentially coding multiple iterations of a layout that would achieve a heart from one-point perspective) to place the data on the columns so that the different bands formed the most pleasing heart. Constraints were that the poles fit within the extruded heart shape, so that they all aligned to make a heart from the vantage point. In addition, certain countries where the bars spanned multiple poles needed to be located near one another. Exploring the layout of the most pleasing heart shape and coloring. Programmed by Noa Younse. Running through the different seeds for the brute force algorithm layout. Programmed by Noa Younse. Designing for durability One of the points that the Times Square Alliance emphasized repeatedly was the need for a highly robust design. It would be installed in the middle of Times Square, which receives an estimated 300,000 visitors each day. The sculpture would be outdoors during the middle of winter, and would need to withstand snow, rain and freezing temperatures. Although our studio specialized in creating custom interactive and screen-based work, we decided on a low-tech solution, given the additional constraints of timeline and budget in addition to the outdoor elements. That said, despite arriving at a proposal consisting of wood, steel and some uplighting, we leveraged a variety of technological tools in our design and fabrication process. <img width="2000" height="1148" width_o="2000" height_o="1148" data-src="https://freight.cargo.site/t/original/i/d5e884f1420175b9d95535db8c97de5574e31b7aba7c2cc3b4278b34c93165ce/1_BifDOvfEJBY-5dqsIY3AiQ.jpeg" data-mid="55943770" border="0" src="https://freight.cargo.site/w/1000/i/d5e884f1420175b9d95535db8c97de5574e31b7aba7c2cc3b4278b34c93165ce/1_BifDOvfEJBY-5dqsIY3AiQ.jpeg" />The colored portions were printed onto the steel metal poles using a custom process. <img width="800" height="510" width_o="800" height_o="510" data-src="https://freight.cargo.site/t/original/i/c24e8054c9110ce507e9a525ae647f61cbe87a7d8f0ea2d282265223f42440ed/1_uQX0Seh_ks-VGhWk8R1-iQ.jpeg" data-mid="55943787" border="0" src="https://freight.cargo.site/w/800/i/c24e8054c9110ce507e9a525ae647f61cbe87a7d8f0ea2d282265223f42440ed/1_uQX0Seh_ks-VGhWk8R1-iQ.jpeg" /> An overhead view of the final pole layout in Rhino. <img width="800" height="486" width_o="800" height_o="486" data-src="https://freight.cargo.site/t/original/i/8ef59b79584f3ad1a37eb9d35efff487f39d2b148bdc584c4209d85c2f9ef189/heart-rhino.jpg" data-mid="55944216" border="0" src="https://freight.cargo.site/w/800/i/8ef59b79584f3ad1a37eb9d35efff487f39d2b148bdc584c4209d85c2f9ef189/heart-rhino.jpg" /> Verifying the final heart shape in Rhino from the one-point perspective vantage point. We wanted people to walk between the poles, and in order for them to form the right heart shape given the slight elevation of the site at Duffy Square, they needed to be elevated as well. We enlisted the help of TwoSeven, a design and fabrication company located in Bushwick, to create a steel structure to support the poles. They knew they'd only have 8 hours for installation, so their design took that into account and separated the base into four main quadrants, for easier assembly. They also helped us with the structural engineering necessary to design a sculpture that could withstand people “pole dancing” and hanging on each pole since this would be unattended and installed in public. <img width="1280" height="912" width_o="1280" height_o="912" data-src="https://freight.cargo.site/t/original/i/25bcfe93877bb5eefd68beee116306f48bec404506f149600f1badf383da3e2f/1_4X7mCoDGR81mypX-GyV0ng.jpeg" data-mid="55943768" border="0" src="https://freight.cargo.site/w/1000/i/25bcfe93877bb5eefd68beee116306f48bec404506f149600f1badf383da3e2f/1_4X7mCoDGR81mypX-GyV0ng.jpeg" /> Shop drawing of the steel structural base by TwoSeven <img width="1020" height="912" width_o="1020" height_o="912" data-src="https://freight.cargo.site/t/original/i/75163cb34a8ec1435da0afac44ff53dc438ddbf898530efc0f4bc99eed3e0378/1_UVDw2F_JzJcx2bwPLVh5rQ.jpeg" data-mid="55943788" border="0" src="https://freight.cargo.site/w/1000/i/75163cb34a8ec1435da0afac44ff53dc438ddbf898530efc0f4bc99eed3e0378/1_UVDw2F_JzJcx2bwPLVh5rQ.jpeg" /> Detail of the bolts attaching the poles to the steel sleve in the base. Shop drawing by TwoSeven. Next, we needed to design a labeling system to keep track of the poles so that once the colored portion was printed onto them, they would be installed in the correction locations. We ended up creating multiple installation documents instructing the fabricators and installers on how best to proceed so that we’d end up with a proper looking heart. <img width="4000" height="2666" width_o="4000" height_o="2666" data-src="https://freight.cargo.site/t/original/i/dc53c864a8c68e134b6cb67692e5bc95ea68343470863560793317be3504e627/1_b-50ffhJtYXuExLduGwjYA.jpeg" data-mid="55943769" border="0" src="https://freight.cargo.site/w/1000/i/dc53c864a8c68e134b6cb67692e5bc95ea68343470863560793317be3504e627/1_b-50ffhJtYXuExLduGwjYA.jpeg" /> An axiometric view of the platform divided into four quadrants. This allowed us to label each of the 34 poles to ensure they were installed in their intended location.<img width="1941" height="3000" width_o="1941" height_o="3000" data-src="https://freight.cargo.site/t/original/i/90d6cd657562bd1baf2380e84dc14164e06678ba305440ef964199714ceeaba1/1_3zLU-LAzP65C8FLcV3i9XQ.jpeg" data-mid="55944557" border="0" src="https://freight.cargo.site/w/1000/i/90d6cd657562bd1baf2380e84dc14164e06678ba305440ef964199714ceeaba1/1_3zLU-LAzP65C8FLcV3i9XQ.jpeg" /> Layout map of poles with details on colored portions and which countries should be on each pole and in what location.<img width="1302" height="4000" width_o="1302" height_o="4000" data-src="https://freight.cargo.site/t/original/i/20e310250df6715627f410a4c642dbba7cc3e226d0d7593a96e1693f86d6156e/1_TypSjTgCmjel2sEUc7iVFw.jpeg" data-mid="55943773" border="0" src="https://freight.cargo.site/w/1000/i/20e310250df6715627f410a4c642dbba7cc3e226d0d7593a96e1693f86d6156e/1_TypSjTgCmjel2sEUc7iVFw.jpeg" /> Instructions on how to position poles so that the colored portion faced front and the label faced backwards.Designing a legend to increase legibility and data literacy We designed a poster to accompany the visualization, which showed an axiometric view of the poles and a legend for each country, grouping them by areas of origin. It also explained how to read the data sculpture, where an inch of the colored band correlates with 2,000 people. We also shaded the color of the bands based on whether that immigrant community’s population had increased or decreased in the past five years, with the lighter poles grew and the darker poles declined. <img width="1747" height="2610" width_o="1747" height_o="2610" data-src="https://freight.cargo.site/t/original/i/bdfb736756dde764d82fa285f652ebc08e7819a33e5db7fbb48c98de31dab78f/Times-Square-Poster-infographic-web-01-01.png" data-mid="55953052" border="0" src="https://freight.cargo.site/w/1000/i/bdfb736756dde764d82fa285f652ebc08e7819a33e5db7fbb48c98de31dab78f/Times-Square-Poster-infographic-web-01-01.png" /> InstallationBecause Times Square is one of the busiest places on the planet, we had a limited time window to install the piece, namely 8 hours starting at midnight and ending at 8am. The TwoSeven crew did an amazing job and when we saw the heart actually take shape at about 4am on a rainy morning, we were elated. <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/4576afe42d8eb4b78b9ff9cfba104e2e1fc94cdc250c8096e9f7d4dfbdfe833d/DSC00707.JPG" data-mid="55948562" border="0" src="https://freight.cargo.site/w/1000/i/4576afe42d8eb4b78b9ff9cfba104e2e1fc94cdc250c8096e9f7d4dfbdfe833d/DSC00707.JPG" /> <img width="6000" height="4000" width_o="6000" height_o="4000" data-src="https://freight.cargo.site/t/original/i/ad700bb7bbeb921dfc4058ab293520cbbcce977fe60ac71d38be3dad3902d16f/DSC01049.JPG" data-mid="55948566" border="0" src="https://freight.cargo.site/w/1000/i/ad700bb7bbeb921dfc4058ab293520cbbcce977fe60ac71d38be3dad3902d16f/DSC01049.JPG" /> <img width="4000" height="2666" width_o="4000" height_o="2666" data-src="https://freight.cargo.site/t/original/i/003e8e3732c28f85edacdae148689f30a8f3c3012d1610f3f6528a5b7b149500/DSC00959_landscape.jpg" data-mid="55949373" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/003e8e3732c28f85edacdae148689f30a8f3c3012d1610f3f6528a5b7b149500/DSC00959_landscape.jpg" /> <img width="4000" height="2666" width_o="4000" height_o="2666" data-src="https://freight.cargo.site/t/original/i/d0049276951ab665ed6b04194601c81b29b30695dba0f13d9a15f3ea8bc14968/DSC00853_landscape.jpg" data-mid="55949371" border="0" src="https://freight.cargo.site/w/1000/i/d0049276951ab665ed6b04194601c81b29b30695dba0f13d9a15f3ea8bc14968/DSC00853_landscape.jpg" /> <img width="4000" height="2667" width_o="4000" height_o="2667" data-src="https://freight.cargo.site/t/original/i/89bdd6f8ff57c109862a8561d7f4da9dab8c1676e11caac21b58f97599a464e3/DSC00901_landscape.jpg" data-mid="55949372" border="0" src="https://freight.cargo.site/w/1000/i/89bdd6f8ff57c109862a8561d7f4da9dab8c1676e11caac21b58f97599a464e3/DSC00901_landscape.jpg" /> Response and reflection It was amazing!For more information about the process of designing the piece, check out the post Noa wrote up on Medium. <img width="1440" height="480" width_o="1440" height_o="480" data-src="https://freight.cargo.site/t/original/i/d906b24aa7f8fdaf5e890575137c625df42d415f8a2a2392e6a0b35c0ca6e898/2017-03-13_15-32-29-web.png" data-mid="55951380" border="0" src="https://freight.cargo.site/w/1000/i/d906b24aa7f8fdaf5e890575137c625df42d415f8a2a2392e6a0b35c0ca6e898/2017-03-13_15-32-29-web.png" /> https://veev.cargo.site/On-Dollar-Slices-Pizza-Vectors-Prosciutto-Zones-and-Topping-Hyperspace Wed, 04 Dec 2019 20:14:08 +0000 Genevieve Hoffman https://veev.cargo.site/On-Dollar-Slices-Pizza-Vectors-Prosciutto-Zones-and-Topping-Hyperspace <img width="1579" height="812" width_o="1579" height_o="812" data-src="https://freight.cargo.site/t/original/i/0adbf1861cb97dc3ed9af51bdb597c4645711ba8722bca719af98706c568bfbc/pizza-subclusters-bk.png" data-mid="56015809" border="0" src="https://freight.cargo.site/w/1000/i/0adbf1861cb97dc3ed9af51bdb597c4645711ba8722bca719af98706c568bfbc/pizza-subclusters-bk.png" /> ON DOLLAR SLICES, PIZZA VECTORS, PROSCIUTTO ZONES AND TOPPING HYPERSPACE Using data science to understand New York City through its most famous food CreditsTopos - Will Shapiro, Mahir Yavuz, Genevieve Hoffman Role concept, data research, data scraping, data analysis, prototyping, writing This article takes a data science deep dive into a relatively light-hearted dataset, pizza toppings, in an effort to demystify data science principles by applying them to culturally relevant topics. You can read the full article over on Medium. Context The first thing I did after joining Topos as a Data Visualization Engineer was to pitch a data-driven article that aligned with their mission to use AI and machine learning to better understand cities through a cultural lens. Inspired by a jet-lagged dollar slice meal a few days prior, I suggested using data about pizza in New York City to inform our investigation and article. They enthusiastically agreed, and so I embarked on gathering a dataset about pizzerias, their prices and what types of toppings they offered, with a hunch that pizza toppings could be a good indicator of other qualities a neighborhood might have - level of income, rate of gentrification, and other demographic indicators. From left to right: vegan pizza, $2000 gilded truffle pizza, neo-sicilian pizza from Emmy Squared, Domino’s<img width="2594" height="633" width_o="2594" height_o="633" data-src="https://freight.cargo.site/t/original/i/ed502794f0396ed5764ae6caf40525c54d8558b1fa754e8118bbc2b10a5a946b/pizza-overview.png" data-mid="57099998" border="0" src="https://freight.cargo.site/w/1000/i/ed502794f0396ed5764ae6caf40525c54d8558b1fa754e8118bbc2b10a5a946b/pizza-overview.png" /> Finding the data In order to perform analysis, we needed a machine-readable dataset about pizza, but one that went beyond just location and price point. I wanted to understand both the economics of pizza, as well as the variety of styles, so set about scraping menus from pizzerias to capture the kinds of toppings they offered, as well as the price point for the essential pizza economic indicator - what a slice of cheese costs. I used nodeJS and the puppeteer library (which allows for headless browsing) to scrape menus from a few restaurant aggregators like Yelp and Google. The puppeteer scripts looked out for common css classes and keywords to save a json file for each restaurant with the toppings offered and prices for each pizzeria. Limits of time did not allow for digitization of the many pizzerias with pdf menus, but we hoped to understand where the hipper pizza toppings like sopressata or truffles might be, and those restaurants tended to have machine-readable menus. The Economies of Pizza From research into other journalistic pizza-themed exposés, I dug further into NYC-specific pizza economies - like the Pizza Principle (or Pizza-Subway Connection) where economists had noticed a correlation between the MTA raising subway fares and how much a cheese slice cost in New York City. Graph correlating the price of a slice with the cost of a subway ride in New York City <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/9b1f34c35a1d73ea21ed9cd2d1a408eba33dd9682c669c41a9bb399b2c8b3683/subway-pizza-principle.png" data-mid="56015811" border="0" src="https://freight.cargo.site/w/1000/i/9b1f34c35a1d73ea21ed9cd2d1a408eba33dd9682c669c41a9bb399b2c8b3683/subway-pizza-principle.png" /> Only in New York City can you find so many pizzerias offering pizza for a dollar a slice, a business model only made possible by the sheer volume of foot traffic areas of Manhattan afford. By mapping dollar slice pizzerias, it became clear that there was a distinction between the high foot-traffic daytime areas like Midtown, and the high foot-traffic nighttime areas like the Lower East Side, but both offered the possibility of dollar slice business models, either targeting the lunch rush or the late night crowd. <img width="956" height="757" width_o="956" height_o="757" data-src="https://freight.cargo.site/t/original/i/6f043d953cdbc923a373ab9be958001fbad3f12ef33345c6fc97d12e16c68a86/day-night-pizza-zones.jpg" data-mid="56015806" border="0" src="https://freight.cargo.site/w/956/i/6f043d953cdbc923a373ab9be958001fbad3f12ef33345c6fc97d12e16c68a86/day-night-pizza-zones.jpg" /> Comparing daytime traffic zones in yellow with nighttime traffic zones in blue. Dollar slice pizzerias are black. I also made maps evaluating pizzerias by the price of a large cheese pizza or the price of a cheese slice. Interestingly, prices for Papa Johns and Domino's varied by pizzeria locations. Mapping the cost of a large cheese pizza across the city. Cost varied between $9 (yellow) to $25 (red) <img width="1920" height="1267" width_o="1920" height_o="1267" data-src="https://freight.cargo.site/t/original/i/87d6fb36ebd4ba1c7f1d2c49ea1e29ca20081bd2d2d4b424f73157f67ff271c9/pizza-large-cheese-map.png" data-mid="59139275" border="0" src="https://freight.cargo.site/w/1000/i/87d6fb36ebd4ba1c7f1d2c49ea1e29ca20081bd2d2d4b424f73157f67ff271c9/pizza-large-cheese-map.png" /> The Geographies of Pizza In addition to looking at the economic aspects of pizza, we were curious about other geographic patterns within our pizza dataset. One aspect we found when looking into dollar slices, were that most pizzerias are located within a 5 minute walk from a subway station, confirming our hypothesis that foot traffic is key to making the pizza economy run. While pizza delivery might be the thing in other cities, in New York City, pizza is largely a walk-in, eat-by-the-slice experience. <img width="600" height="597" width_o="600" height_o="597" data-src="https://freight.cargo.site/t/original/i/3d8cdd3afe35e2ec716d30590cf79572acc45d03ae88859cc63624fb0196ce00/pizza-subway.gif" data-mid="57100534" border="0" src="https://freight.cargo.site/w/600/i/3d8cdd3afe35e2ec716d30590cf79572acc45d03ae88859cc63624fb0196ce00/pizza-subway.gif" /> All the pizzerias in NYC (black), with the walking distance to subway stops in yellow. Animation by Mahir Yavuz. One thing we did a lot at Topos at the time, was compare different neighborhoods to one another based on various dimensions (data science speak for types of data). Oftentimes it's easier to compare geographical areas according political boundaries, since many kinds of data are attached to them. We first looked at zipcodes as a starting point, since many types of demographic data are found on a zipcode-level, and many zipcode boundaries do have some similarities to the neighborhoods found in a city. We made a few prototypes trying to find the most similar pizza zipcodes, and though the similarities made sense on some level, we ultimately wanted more granularity. Prototype of finding the most similar pizza neighborhoods by zipcode. Selecting a zipcode on the left displayed the most similar (orange) to the least (purple). Black zipcodes lacked adequate data (pizzerias). <img width="2000" height="1218" width_o="2000" height_o="1218" data-src="https://freight.cargo.site/t/original/i/94641f8f370e741c96675cbcb62b880501d4898327319a3806226961bc3a2be9/pizza-neighborhoods-williamsburg.jpg" data-mid="57101198" border="0" src="https://freight.cargo.site/w/1000/i/94641f8f370e741c96675cbcb62b880501d4898327319a3806226961bc3a2be9/pizza-neighborhoods-williamsburg.jpg" /> <img width="2000" height="1219" width_o="2000" height_o="1219" data-src="https://freight.cargo.site/t/original/i/9b7d20114783597ca5188754dcb51fa55095f3ad1d8cc99ac7d16413dda6af1f/pizza-neighborhoods-bullshead.jpg" data-mid="57101197" border="0" src="https://freight.cargo.site/w/1000/i/9b7d20114783597ca5188754dcb51fa55095f3ad1d8cc99ac7d16413dda6af1f/pizza-neighborhoods-bullshead.jpg" /> S2 cells allowed us the granularity that was lacking with zipcodes. We began clustering New York City by s2 cells according to the dimensions of pizza toppings the cells contained. First, we had to determine a classification system to differentiate fancy pizza toppings, like prosciutto, bufala mozzarella, truffles and shitaki mushrooms, from regular pizza toppings, like pepperoni, sausage or menu items like calzones. https://veev.cargo.site/Manifold Thu, 05 Dec 2019 01:01:23 +0000 Genevieve Hoffman https://veev.cargo.site/Manifold <img width="1824" height="1025" width_o="1824" height_o="1025" data-src="https://freight.cargo.site/t/original/i/6182067f19961325072ec8b4b3b4f1e68cbd8dd8b390b88eedfee0521e3723c1/Screen-Shot-2016-10-12-at-4.16.05-PM-copy.png" data-mid="56028959" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/6182067f19961325072ec8b4b3b4f1e68cbd8dd8b390b88eedfee0521e3723c1/Screen-Shot-2016-10-12-at-4.16.05-PM-copy.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/eda9fd4d90491d53d7eeca422e5ff0f1e6d802cf5e38b7653d2a352d2037d0fc/Screen-Shot-2016-10-12-at-4.12.24-PM.png" data-mid="56029774" border="0" src="https://freight.cargo.site/w/1000/i/eda9fd4d90491d53d7eeca422e5ff0f1e6d802cf5e38b7653d2a352d2037d0fc/Screen-Shot-2016-10-12-at-4.12.24-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/00e467db9a36f9b13aeaf5fa9913716c4346e342be71cd84a985f085df87aa76/Screen-Shot-2016-10-12-at-4.12.28-PM.png" data-mid="56029775" border="0" src="https://freight.cargo.site/w/1000/i/00e467db9a36f9b13aeaf5fa9913716c4346e342be71cd84a985f085df87aa76/Screen-Shot-2016-10-12-at-4.12.28-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/eaccd508b8207c0bd86299abc69107f5b7fb97ea46b0b548a7acf552074698dc/Screen-Shot-2016-10-12-at-4.12.42-PM.png" data-mid="56029776" border="0" src="https://freight.cargo.site/w/1000/i/eaccd508b8207c0bd86299abc69107f5b7fb97ea46b0b548a7acf552074698dc/Screen-Shot-2016-10-12-at-4.12.42-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/526807d34adbe0a5d8812a166b918c5209b0747f2c6fb9506b95556548f47ecd/Screen-Shot-2016-10-12-at-4.13.33-PM.png" data-mid="56029777" border="0" src="https://freight.cargo.site/w/1000/i/526807d34adbe0a5d8812a166b918c5209b0747f2c6fb9506b95556548f47ecd/Screen-Shot-2016-10-12-at-4.13.33-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4f421bdd4c23291097084687431b2219a332ccf4a8c5a52cd03da30fbbd26198/Screen-Shot-2016-10-12-at-4.19.45-PM.png" data-mid="56029778" border="0" src="https://freight.cargo.site/w/1000/i/4f421bdd4c23291097084687431b2219a332ccf4a8c5a52cd03da30fbbd26198/Screen-Shot-2016-10-12-at-4.19.45-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/dda2ff7f55f832268349096a192d71f2392e4c5fc9383fadbb8c052dfe018178/Screen-Shot-2016-10-12-at-4.19.50-PM.png" data-mid="56029779" border="0" src="https://freight.cargo.site/w/1000/i/dda2ff7f55f832268349096a192d71f2392e4c5fc9383fadbb8c052dfe018178/Screen-Shot-2016-10-12-at-4.19.50-PM.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/da7fba836bbde771c343517cd499294cd28d21b2b82c3509371b2aa48c593cdd/Screen-Shot-2016-10-12-at-4.22.30-PM.png" data-mid="56029780" border="0" src="https://freight.cargo.site/w/1000/i/da7fba836bbde771c343517cd499294cd28d21b2b82c3509371b2aa48c593cdd/Screen-Shot-2016-10-12-at-4.22.30-PM.png" /> MANIFOLD LIVEMAPNavigating new geographical representations of the world's largest public conversational tool&nbsp; CreditsCreative Direction Jer Thorp Project Management A'yen Tran Creative Lead + UX Design Genevieve Hoffman Design Prototyping Noa Younse, Bill Lindemann, Chris Anderson Visual Design Gabriel Gianordoli Spatial Design + Architectural Rendering Noa Younse Software Development Marcus Pingel, Ryan Bartley, and Chris Anderson Role creative lead, research, user experience, prototyping Manifold is a data-driven experience of the largest public conversation tool. It is a visualization tool that reveals new geographies of Twitter and allows for a deeper understanding of the way information flows across them. Designed to be installed throughout the social media company's headquarters, it exists as a high resolution interactive tool, as well as a passive experience of live data installed on screens throughout the company. We also did extensive research and prototyping for an interactive multi-screen experience, where different screens would allow for both macro and micro-scale exploration of the platform's data. Manifold was installed in the company's San Francisco headquarters in August of 2017. It has been renamed Aurora and is currently maintained by internal developers at Twitter. I led the research, design and development phase, overseeing multiple employees and contractors to design, develop and install the piece in Twitter’s SF headquarters. Documentation of the final piece just before it was installed at Twitter’s HQ Context and Cascade While working at the New York Times R&amp;D Lab, The Office for Creative Research co-founders Jer Thorp and Mark Hansen created a visualization of New York Times articles being shared on Twitter, called Cascade. This was one of the reasons Twitter came to the OCR to conceive of what the "newsroom of the future" might be for a social media platform inextricably linked to how news is sourced, followed and shared online. We had the opportunity to examine the platform from a collective point of view, whereas the many people interacting with it experience a small portion of content curated according to their interests and whom they follow. <img width="960" height="617" width_o="960" height_o="617" data-src="https://freight.cargo.site/t/original/i/9ea89bcbdfa6b380a5bdbecc16b2acc7f9c5138cdd3a69a644a7b9078b982dad/cascade_3-569.jpg" data-mid="57973209" border="0" src="https://freight.cargo.site/w/960/i/9ea89bcbdfa6b380a5bdbecc16b2acc7f9c5138cdd3a69a644a7b9078b982dad/cascade_3-569.jpg" />Image of Cascade, courtesy of Jer Thorp Research Stage - The manifold aspects of Manifold We underwent an in-depth research stage where we conceived of the concept, user journey, spatial design and prototype for the multi-screen tool and live data visualization of the platform. Our research stage began with a charette, where we sketched various ideas for what we wanted the experience to be, and how we could consider the virtual space of social media as a navigable place. Our research process began with a design charette to brainstorm ideas of navigating through the experience <img width="1136" height="1482" width_o="1136" height_o="1482" data-src="https://freight.cargo.site/t/original/i/d1f0d6268b0a72ee9af0f98092ab74e904651cfc877ec6db62c580fbdc2b6070/Manifold_Charette.png" data-mid="58612503" border="0" src="https://freight.cargo.site/w/1000/i/d1f0d6268b0a72ee9af0f98092ab74e904651cfc877ec6db62c580fbdc2b6070/Manifold_Charette.png" /> We landed on the idea of a manifold way of looking at Twitter - from many viewpoints all at once - a concept which has a foundation in math, physics, as well as comics. The many definitions and metaphorical connotations of the piece’s title, Manifold, inform the experience. As an adjective, manifold means “many or myriad.” As a noun, it means “a whole that unites,” but also a “curiosity of many diverse elements.” The ability to zoom in and out of the diverse elements and details that make up Twitter as a whole was a crucial organizing principle of the experience, and one reason why Manifold as a title felt right. Calabi-Yau manifolds are multidimensional shapes that are important in string theory for describing the shape of hidden dimensions of the universe. A 2D cross-section of a 6D Calabi-Yau manifold.Images courtesy of Wikipedia. <img width="400" height="400" width_o="400" height_o="400" data-src="https://freight.cargo.site/t/original/i/0ed463faefd43299b4dec3e46c40cc868afb98f3a9be29fc14111401b2bab2cf/Calabi-Yau-red.jpg" data-mid="58618881" border="0" src="https://freight.cargo.site/w/400/i/0ed463faefd43299b4dec3e46c40cc868afb98f3a9be29fc14111401b2bab2cf/Calabi-Yau-red.jpg" /> <img width="1432" height="1493" width_o="1432" height_o="1493" data-src="https://freight.cargo.site/t/original/i/7bb78c5ba9592fa35ea866f2b3467378df7d4702a97ca8f9c541c83d1097d39c/Calabi_yau.jpg" data-mid="57968588" border="0" src="https://freight.cargo.site/w/1000/i/7bb78c5ba9592fa35ea866f2b3467378df7d4702a97ca8f9c541c83d1097d39c/Calabi_yau.jpg" /> Another cross-section of a Calabi-Yau manifold. String theory claims that every point in spacetime is actually a tiny 6D world with the structure of a Calabi-Yau manifold. While researching, we were also happy to discover that Manifold Learning is a part of scikit, a set of machine learning tools packaged for python, and represents a set of clustering algorithms that data and computer scientists use to sort high dimensional data. In math and physics, Manifold Dimensions or Manifold Boundaries are unending surfaces, which appear straightforward to anyone placed within them, but represent complex and interconnected spaces that co-exist. Various results of Manifold Learning dimensionality reduction algorithms from python’s scikit library <img width="1500" height="800" width_o="1500" height_o="800" data-src="https://freight.cargo.site/t/original/i/7846410530665c6da40a2a53cc18e235b34db36900d26e283d7a06c71d706064/plot_compare_methods_001.png" data-mid="57968187" border="0" src="https://freight.cargo.site/w/1000/i/7846410530665c6da40a2a53cc18e235b34db36900d26e283d7a06c71d706064/plot_compare_methods_001.png" /> <img width="1500" height="800" width_o="1500" height_o="800" data-src="https://freight.cargo.site/t/original/i/17ea0860bee129ed9f8ea3c7fa6a2378cc3fdbea6064f7ca773dc4c07f242c2f/plot_manifold_sphere_001.png" data-mid="57968188" border="0" src="https://freight.cargo.site/w/1000/i/17ea0860bee129ed9f8ea3c7fa6a2378cc3fdbea6064f7ca773dc4c07f242c2f/plot_manifold_sphere_001.png" /> In automotive design and electrical work, manifolds are exhaust systems with multiple piped chambers, or the nexus of wires coming together. And last, the actual inspiration for the title comes from Marvel Comics, Manifold is a character who, "using his hands, can mold reality to tear open space and time, connecting one place to another, thus allowing him to teleport to just about anywhere." <img width="650" height="433" width_o="650" height_o="433" data-src="https://freight.cargo.site/t/original/i/4c7a943d940b97274c5fd0b200788151ffad440ebf6f4215723543543d6888f7/novel_exhaust_manifold_for_lexus_rc_f.jpg" data-mid="58614581" border="0" src="https://freight.cargo.site/w/650/i/4c7a943d940b97274c5fd0b200788151ffad440ebf6f4215723543543d6888f7/novel_exhaust_manifold_for_lexus_rc_f.jpg" />Exhaust Manifold for Lexus RC F <img width="512" height="792" width_o="512" height_o="792" data-src="https://freight.cargo.site/t/original/i/9593a954b1ed8caa44ef5274ee14d3a5a818104e4a81182e3b3a6eb3bab53764/Manifold_comic.png" data-mid="57966038" border="0" src="https://freight.cargo.site/w/512/i/9593a954b1ed8caa44ef5274ee14d3a5a818104e4a81182e3b3a6eb3bab53764/Manifold_comic.png" />Marvel’s Manifold comic book hero The idea of a Manifold as a space that can reorganize itself with ease according to the specific interests of the viewer, and transitions between different scales of these spaces, was fundamental to creating a delightful but informative experience without being too overwhelming or disjointed. t-SNE and the Map of Twitter An internal hackathon at the company had created a tool called the Map of Twitter, where a t-SNE like layout of the top followed accounts on Twitter ended up revealing different clusters of shared interests, due to the majority of people choosing to follow accounts related to a specific topic - like comedy, car racing or cooking - so that users with many followers in common tended to represent a singular interest. We leveraged this pre-existing layout of users, and built a system to follow the tweets of those accounts, which would be stored and analysed to produce a picture of the conversation happening on the platform at any given moment. Left: Our first attempt at a t-SNE layout of the top 300,000 accounts on Twitter. Middle:&nbsp;Laying out clusters based on internal labels Right: Attempts to subcluster the largest group of users in Entertainment <img width="938" height="926" width_o="938" height_o="926" data-src="https://freight.cargo.site/t/original/i/34c3ef637c65066776e0fd1e9a3b9d60768fbe80756bbd2970d911cf34eb1250/map_copy-165.png" data-mid="57968589" border="0" src="https://freight.cargo.site/w/938/i/34c3ef637c65066776e0fd1e9a3b9d60768fbe80756bbd2970d911cf34eb1250/map_copy-165.png" /> <img width="955" height="926" width_o="955" height_o="926" data-src="https://freight.cargo.site/t/original/i/f50082c644bbc095abe7063a05d54fba3ea8695ed2668e3c5be560117c49ceeb/Pasted-image-at-2016_03_23-01_37-PM-336.png" data-mid="57968592" border="0" src="https://freight.cargo.site/w/955/i/f50082c644bbc095abe7063a05d54fba3ea8695ed2668e3c5be560117c49ceeb/Pasted-image-at-2016_03_23-01_37-PM-336.png" /> <img width="930" height="926" width_o="930" height_o="926" data-src="https://freight.cargo.site/t/original/i/8b36d5d00ea37aacb886b9af7ef823fab87b78c7c93490c6cdec39ab65d68405/Pasted-image-at-2016_03_16-02_23-PM-1-350.png" data-mid="57968591" border="0" src="https://freight.cargo.site/w/930/i/8b36d5d00ea37aacb886b9af7ef823fab87b78c7c93490c6cdec39ab65d68405/Pasted-image-at-2016_03_16-02_23-PM-1-350.png" /> Next, we used Processing to create custom prototypes of what we might do with this Map of Twitter, where users functioned like topography, forming a sort of base for their engagement, like the tweets they made and the hashtags they engaged with. We were motivated to understand how these users were connected, and which Twitter users might be active at any moment. Left: Starting to animate the tweets and hashtags across users in real-time <img width="681" height="684" width_o="681" height_o="684" data-src="https://freight.cargo.site/t/original/i/d37f66d3826153004489b3d6bb19437c1c547dc7abd6cdeef1321c6cc7095036/Pasted-image-at-2016_03_09-17_58-159.png" data-mid="57968590" border="0" src="https://freight.cargo.site/w/681/i/d37f66d3826153004489b3d6bb19437c1c547dc7abd6cdeef1321c6cc7095036/Pasted-image-at-2016_03_09-17_58-159.png" /> Screen capture of an early prototype inputting the top 300,000 users grouped by shared followers. Follower count elevates the user along the z-axis. Prototype by Noa Younse. Screen capture of an early prototype of the top followed users in grey, with their tweets in yellow bubbling up in real time.&nbsp;Prototype by Noa Younse. Screen capture of an early prototype of the top followed users in grey, with the hashtags popular across users near to one another ranging in green (least popular) to red (most popular). Prototype by Noa Younse. Moving from data exploration to a rich interactive experience Once we’d done some initial brainstorming and data exploration, I worked with fellow Creative Researcher Noa Younse to create concept sketches of what a larger experience of Manifold could be. We presented an annotated version of these sketches to Twitter at the end of our Research Phase in order to create a functional prototype of the ideas sketched out. Entry Into Experience We envisioned an experience where VIPs could come to Twitter and Manifold would show them where they were located on the map <img width="1600" height="368" width_o="1600" height_o="368" data-src="https://freight.cargo.site/t/original/i/b98e63a62203f386280f7822d111e5e5620944bfaa8c0c0c97ee7155e504171d/Artboard-1-copy-32x-100.jpg" data-mid="57965656" border="0" src="https://freight.cargo.site/w/1000/i/b98e63a62203f386280f7822d111e5e5620944bfaa8c0c0c97ee7155e504171d/Artboard-1-copy-32x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/7691f161a816ee4a3ed79d43191d9a968e17285a4e2a9f07d365e4d7e41d7188/Artboard-1-copy-42x-100.jpg" data-mid="57965657" border="0" src="https://freight.cargo.site/w/1000/i/7691f161a816ee4a3ed79d43191d9a968e17285a4e2a9f07d365e4d7e41d7188/Artboard-1-copy-42x-100.jpg" /> User View This view would show a user which accounts on Twitter they interacted most with, as well as patterns of their tweets over time <img width="1600" height="662" width_o="1600" height_o="662" data-src="https://freight.cargo.site/t/original/i/2fd8b20cae31ae9aed85c194e6d478a1cc5a23dd8170207e4a70411dcc368cc1/Artboard-1-copy-22x-100.jpg" data-mid="57965655" border="0" src="https://freight.cargo.site/w/1000/i/2fd8b20cae31ae9aed85c194e6d478a1cc5a23dd8170207e4a70411dcc368cc1/Artboard-1-copy-22x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/a54715612ced2ec480f5d3da74644b2a36bac1181b7de29294f4cc9128b06e51/Artboard-1-copy-52x-100.jpg" data-mid="57965660" border="0" src="https://freight.cargo.site/w/1000/i/a54715612ced2ec480f5d3da74644b2a36bac1181b7de29294f4cc9128b06e51/Artboard-1-copy-52x-100.jpg" /> Propagation View Showing the impact of a single tweet as users across the network engage with it - retweeting, replying and liking. <img width="1600" height="368" width_o="1600" height_o="368" data-src="https://freight.cargo.site/t/original/i/d10d633859776ac9d537e73de0fce9fac23ef8ef5c3761ebd10a3fb1bdc6b37d/Artboard-1-copy-12x-100.jpg" data-mid="57965654" border="0" src="https://freight.cargo.site/w/1000/i/d10d633859776ac9d537e73de0fce9fac23ef8ef5c3761ebd10a3fb1bdc6b37d/Artboard-1-copy-12x-100.jpg" /><img width="1600" height="369" width_o="1600" height_o="369" data-src="https://freight.cargo.site/t/original/i/c50eabfc0679e9cf3d629acd5264dff53900b236af9e7b7da00de2527368668e/Artboard-1-copy-02x-100.jpg" data-mid="57965653" border="0" src="https://freight.cargo.site/w/1000/i/c50eabfc0679e9cf3d629acd5264dff53900b236af9e7b7da00de2527368668e/Artboard-1-copy-02x-100.jpg" /> We also envisioned the ability to compare propagations of various tweets to one another <img width="1599" height="367" width_o="1599" height_o="367" data-src="https://freight.cargo.site/t/original/i/4589a7b1c9e2c58b43960a912233c0546ad29992d2bf1594e69d5819981c9a90/Artboard-1-copy-62x-100.jpg" data-mid="57965664" border="0" src="https://freight.cargo.site/w/1000/i/4589a7b1c9e2c58b43960a912233c0546ad29992d2bf1594e69d5819981c9a90/Artboard-1-copy-62x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/3260b9f80f97afa3dbfbf81530790a36a4889bd7afef506ca092be2d66b04ee5/Artboard-1-copy-72x-100.jpg" data-mid="57965665" border="0" src="https://freight.cargo.site/w/1000/i/3260b9f80f97afa3dbfbf81530790a36a4889bd7afef506ca092be2d66b04ee5/Artboard-1-copy-72x-100.jpg" /> Community View Showing a user’s community of similarly followed users. Users are clustered by followers they have in common, revealing communities of users with “shared interests.” These clusters of users would form a basis for the live topics and hashtags they were engaged with at any given moment <img width="1599" height="367" width_o="1599" height_o="367" data-src="https://freight.cargo.site/t/original/i/7813b1c74d7549b371a377c8860823d0f0b8f1e679972a4f8fe116dae8cdf3f4/Artboard-1-copy-102x-100.jpg" data-mid="57965674" border="0" src="https://freight.cargo.site/w/1000/i/7813b1c74d7549b371a377c8860823d0f0b8f1e679972a4f8fe116dae8cdf3f4/Artboard-1-copy-102x-100.jpg" /><img width="1599" height="367" width_o="1599" height_o="367" data-src="https://freight.cargo.site/t/original/i/e304646ef329e039bbd4074ec0ad3e01739d420e58191e30e44f86a814df9bbc/Artboard-1-copy-262x-100.jpg" data-mid="57965701" border="0" src="https://freight.cargo.site/w/1000/i/e304646ef329e039bbd4074ec0ad3e01739d420e58191e30e44f86a814df9bbc/Artboard-1-copy-262x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/ad03c107dcdfe402125f94df95b5fe38317960a5d81dbbbdf3a26eb80d0bd6fb/Artboard-1-copy-272x-100.jpg" data-mid="57965702" border="0" src="https://freight.cargo.site/w/1000/i/ad03c107dcdfe402125f94df95b5fe38317960a5d81dbbbdf3a26eb80d0bd6fb/Artboard-1-copy-272x-100.jpg" /> Trending Topics View Like Propagations, which offered a closer look at the engagement with a tweet, the trending topics view would do the same with a hashtag. This view would examine the most popular hashtags from any cluster of users and show the volume of tweets using it over time <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/da016e35cda69000bda494e9fd371eb1c897fab2eb077b827320619405da30c3/Artboard-1-copy-152x-100.jpg" data-mid="57965688" border="0" src="https://freight.cargo.site/w/1000/i/da016e35cda69000bda494e9fd371eb1c897fab2eb077b827320619405da30c3/Artboard-1-copy-152x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/244bf07cbd714f24d9b505b8aadf8a643b2118e7654a7e3761671e7070635819/Artboard-1-copy-122x-100.jpg" data-mid="57965678" border="0" src="https://freight.cargo.site/w/1000/i/244bf07cbd714f24d9b505b8aadf8a643b2118e7654a7e3761671e7070635819/Artboard-1-copy-122x-100.jpg" /> Different hashtags might be visualized with different material properties based on the type of engagement users had with the hashtag. Initial patterns identified: - cyclical trends (weekly hashtags: #tbt) - events in the future that the public discusses and anticipates (#Brexit)- unanticipated newsworthy events (#Flight1549) <img width="1599" height="367" width_o="1599" height_o="367" data-src="https://freight.cargo.site/t/original/i/b03e4ffdda972dad40e89413efa2f57fddcfc864103a681df36c76c57d1283f0/Artboard-1-copy-112x-100.jpg" data-mid="57965677" border="0" src="https://freight.cargo.site/w/1000/i/b03e4ffdda972dad40e89413efa2f57fddcfc864103a681df36c76c57d1283f0/Artboard-1-copy-112x-100.jpg" /><img width="1599" height="368" width_o="1599" height_o="368" data-src="https://freight.cargo.site/t/original/i/756cf98fe034e5914be9434ffc78bbe20eb085b7bd02f9024585dc8ef141bcc6/Artboard-1-copy-162x-100.jpg" data-mid="57965690" border="0" src="https://freight.cargo.site/w/1000/i/756cf98fe034e5914be9434ffc78bbe20eb085b7bd02f9024585dc8ef141bcc6/Artboard-1-copy-162x-100.jpg" /> This view would also compare the geographic breakdown of where the hashtag most occurs<img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/b8bcadcf17c0d839cca540a1f695b7201073f7940ac4c7231b7b45012351125a/Artboard-1-copy-172x-100.jpg" data-mid="57965691" border="0" src="https://freight.cargo.site/w/1000/i/b8bcadcf17c0d839cca540a1f695b7201073f7940ac4c7231b7b45012351125a/Artboard-1-copy-172x-100.jpg" /> Navigation Overview The triptych acts as a viewport as the user flies over the Map of Twitter. Pointing the wands at the top of the triptych allows the user to drag down a viewport overlay, a 2D plane where the user can visualize trends happening in real-time. <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/5ec6a63677611e014fd63a31604a0adb2ff395e5e260b635acada2ae03743347/Artboard-1-copy-132x-100.jpg" data-mid="57965683" border="0" src="https://freight.cargo.site/w/1000/i/5ec6a63677611e014fd63a31604a0adb2ff395e5e260b635acada2ae03743347/Artboard-1-copy-132x-100.jpg" /> The tabletop depicts the ground plane below the user. It also acts as a petri dish or microscope to examine detailed views of a user or community and the tweets that pertain to them. Using the wand, users drag avatars or communities onto the tabletop to explore them further. <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/6d829d24511496cb023629aedd697011a1ee0008b93cf682e01800b754578dfb/Artboard-1-copy-182x-100.jpg" data-mid="57965692" border="0" src="https://freight.cargo.site/w/1000/i/6d829d24511496cb023629aedd697011a1ee0008b93cf682e01800b754578dfb/Artboard-1-copy-182x-100.jpg" /> At any moment, users can pin interesting views or visualizations onto vertical corkboards, saving these views for later. These views could act as breadcrumbs, where clicking them again could zoom into that view on the triptych. <img width="2448" height="662" width_o="2448" height_o="662" data-src="https://freight.cargo.site/t/original/i/9ef866ae0ff470dd63c3faa25452df583348b99570b847dc939189bf00851d84/Artboard-1-copy-222x-100.jpg" data-mid="57965697" border="0" src="https://freight.cargo.site/w/1000/i/9ef866ae0ff470dd63c3faa25452df583348b99570b847dc939189bf00851d84/Artboard-1-copy-222x-100.jpg" /> Gestures Specific gestures would initiate ways to view data placed on the tabletop, or to select data from the triptych to explore. Pushing the wand forward or backward would allow you to zoom in and out over the world and the scale of viewing it <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/2f7380023076a09a06ca377665652c56caadf28b75b4b32a6004fdcec2db6846/Artboard-1-copy-212x-100.jpg" data-mid="57965696" border="0" src="https://freight.cargo.site/w/1000/i/2f7380023076a09a06ca377665652c56caadf28b75b4b32a6004fdcec2db6846/Artboard-1-copy-212x-100.jpg" /> Rotating the wand could show the content sorted by popularity <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/28122a2379b2bae47eb42b8cd725e4888dcb10d5add8ba71de5a95c267c56267/Artboard-1-copy-192x-100.jpg" data-mid="57965694" border="0" src="https://freight.cargo.site/w/1000/i/28122a2379b2bae47eb42b8cd725e4888dcb10d5add8ba71de5a95c267c56267/Artboard-1-copy-192x-100.jpg" /> Sweeping the wand from left to right could depict a historical view of contentIn general we envisioned the relationship between the screens and the wands for navigation asthe screens contain and navigate the content we see and the wands control how we see it <img width="1599" height="662" width_o="1599" height_o="662" data-src="https://freight.cargo.site/t/original/i/ca7db663022a9d4d7e0acaa807375446af55ce93bddb5ebc8c9bff295863812e/Artboard-1-copy-202x-100.jpg" data-mid="57965695" border="0" src="https://freight.cargo.site/w/1000/i/ca7db663022a9d4d7e0acaa807375446af55ce93bddb5ebc8c9bff295863812e/Artboard-1-copy-202x-100.jpg" /> Making the prototype Twitter gave us the greenlight to create a working prototype of the complete experience of the Manifold tool. This involved multiple displays, dragging content across them in order to better explore at various levels of detail.We partnered with Oblong who makes a technology called Mezzanine, that allows for multi-screen collaboration across networked offices. They have a proprietary controller, shaped a bit like a Wiimote, which allows users to grab software windows and drag them across screens. This controller is tracked by a grid of sensors hanging above, which emit subsonic frequencies that communicate with the wand to know where the user is in space. We decided to have our software listen to the same array of sensors and gyroscopes, and used the Oblong controllers as the user input to engage with our custom software. <img width="1152" height="768" width_o="1152" height_o="768" data-src="https://freight.cargo.site/t/original/i/26f54dbb85b9f65a5d3f775a6d616c5fb663be05d13c49159c73799217cf6e9e/mezzanine-wand-in-hand-with-a-map-as-background.jpg" data-mid="58614585" border="0" src="https://freight.cargo.site/w/1000/i/26f54dbb85b9f65a5d3f775a6d616c5fb663be05d13c49159c73799217cf6e9e/mezzanine-wand-in-hand-with-a-map-as-background.jpg" /> <img width="800" height="450" width_o="800" height_o="450" data-src="https://freight.cargo.site/t/original/i/2fec7eb0a86f94101d032fcc5367333c9b9f131f293b0c7cb5bf7b090f4b2cea/Oblong-Mezzanine-post-2.jpg" data-mid="58614586" border="0" src="https://freight.cargo.site/w/800/i/2fec7eb0a86f94101d032fcc5367333c9b9f131f293b0c7cb5bf7b090f4b2cea/Oblong-Mezzanine-post-2.jpg" /> Oblong’s wand and the standard hardware for a Mezzanine system. We used Oblong’s hardware but built our own custom C++ software to communicate with it We ended up having about six weeks to build a working prototype of the experience. We used a C++ framework called Cinder to build out our visualization layer that communicated with the Oblong wand and sensors to navigate the experience, dragging content across different displays to visualize patterns within the data. Noa demonstrates the hardware powering the prototype Chris demonstrates using the wand to fly through the triptych full of users, find a hashtag, save it to the pinboard, and explore it in more detail on the tabletop Passive listening vs active exploring Twitter was excited to continue developing the project. They wanted a design pass so that our visualizations would better match internal branding they’d be unveiling. They also wanted to move the project along before finalizing all the details of a permanent installation for the experience in their HQ.As an intermediary step to gain traction for the project, we developed a passive version of the visualization, which was designed to be streamed internally across screens installed in Twitter’s offices worldwide. Documentation of the passive Livemap version of Manifold. Footage shot in Twitter’s NYC offices Designing for intuitive gestural control After finalizing the passive experience, we returned to developing the interactive one. As UX Designer, one of the many challenges of this project was how to give the user feedback for the variety of things the wand could do. A primary function of the experience was "flying." To do this, a user held down the button on the wand while moving around in space. As they held the button longer than a second, the wand cursor became an arrow, indicating that they could fly and move forward, backward, left and right through the virtual space. Pointing the wand upward indicated that the user could shift the experience between the "cluster view" and the "geographical view," toggling the users between where they were positioned according to their interest vs where they were positioned on the globe. Pointing the wand fully to the left activated a "back button," where users could return to previously selected views. I designed a variety of visual indicators to tell the user what behavior would be triggered by a particular gesture <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/4bead65dc94a8eba712e189ebffc55d456d33dc799e082d9e3dffe9bad29c0de/wand-back-button.png" data-mid="58716569" border="0" src="https://freight.cargo.site/w/200/i/4bead65dc94a8eba712e189ebffc55d456d33dc799e082d9e3dffe9bad29c0de/wand-back-button.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/21df8155be81ab268a35dc6792f8ceac7a336cd7ee189aae3ee92f9d6bc3305d/wand-reset.png" data-mid="58716573" border="0" src="https://freight.cargo.site/w/200/i/21df8155be81ab268a35dc6792f8ceac7a336cd7ee189aae3ee92f9d6bc3305d/wand-reset.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/d1daa9275d2dbcf4c5940e12618f3f5144f514248fb22a81482d2e3ec6c590a4/wand-normal-state.png" data-mid="58716572" border="0" src="https://freight.cargo.site/w/200/i/d1daa9275d2dbcf4c5940e12618f3f5144f514248fb22a81482d2e3ec6c590a4/wand-normal-state.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/4268b5d5ae7ba67d4ec7e9ee3ba3c81e829910b8838115a206a9765660261910/wandover-highlight-state.png" data-mid="58716583" border="0" src="https://freight.cargo.site/w/200/i/4268b5d5ae7ba67d4ec7e9ee3ba3c81e829910b8838115a206a9765660261910/wandover-highlight-state.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/c7490c8ffe33daba7318c538665d299dd46561c8f44acedca564e0028e5cee7e/wand-data-loading.png" data-mid="58716570" border="0" src="https://freight.cargo.site/w/200/i/c7490c8ffe33daba7318c538665d299dd46561c8f44acedca564e0028e5cee7e/wand-data-loading.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/b2227b09b1831d1c62a02599c39e11bc6789baea621f2ffb9567a1f2bf1af41d/wand-transition-map-geo.png" data-mid="58716576" border="0" src="https://freight.cargo.site/w/200/i/b2227b09b1831d1c62a02599c39e11bc6789baea621f2ffb9567a1f2bf1af41d/wand-transition-map-geo.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/41e52990c241d889f82f7affa64564d7db54c68dc0691da5e11aa177e8520200/wand-transition-map-interest.png" data-mid="58716577" border="0" src="https://freight.cargo.site/w/200/i/41e52990c241d889f82f7affa64564d7db54c68dc0691da5e11aa177e8520200/wand-transition-map-interest.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/5c2fb2d9892eb43970b164f1250bee9603b9b3bad9996985709e7fbcdcc72b51/wandover-highlight-purple.png" data-mid="58716582" border="0" src="https://freight.cargo.site/w/200/i/5c2fb2d9892eb43970b164f1250bee9603b9b3bad9996985709e7fbcdcc72b51/wandover-highlight-purple.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/386c27205197ad1134e8e64d0e082c34d9e601296c9c1fcb33f9f3b69df0dab7/wandover-highlight-blue.png" data-mid="58716578" border="0" src="https://freight.cargo.site/w/200/i/386c27205197ad1134e8e64d0e082c34d9e601296c9c1fcb33f9f3b69df0dab7/wandover-highlight-blue.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/0aec6868f989fb18f595ee1659b1db47a9b7dff86be12eef5ac1b725c3371669/wandover-highlight-green.png" data-mid="58716579" border="0" src="https://freight.cargo.site/w/200/i/0aec6868f989fb18f595ee1659b1db47a9b7dff86be12eef5ac1b725c3371669/wandover-highlight-green.png" /> <img width="199" height="199" width_o="199" height_o="199" data-src="https://freight.cargo.site/t/original/i/8a910b9e2aefafa04b697f38fe30a16390b7570c283bbca65c80d27fd3a46a52/wandover-highlight-yellow.png" data-mid="58716584" border="0" src="https://freight.cargo.site/w/199/i/8a910b9e2aefafa04b697f38fe30a16390b7570c283bbca65c80d27fd3a46a52/wandover-highlight-yellow.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/3ba3a27b32024cf6d33ba4979ad245f65deb327ca2b1a4e4472451540c8adfc0/wandover-highlight-orange.png" data-mid="58716580" border="0" src="https://freight.cargo.site/w/200/i/3ba3a27b32024cf6d33ba4979ad245f65deb327ca2b1a4e4472451540c8adfc0/wandover-highlight-orange.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/8b96293f804edd5e856cb516543c76ca2fb6a7ab7bac6957caec81a4536cc2b0/wandover-highlight-pink.png" data-mid="58716581" border="0" src="https://freight.cargo.site/w/200/i/8b96293f804edd5e856cb516543c76ca2fb6a7ab7bac6957caec81a4536cc2b0/wandover-highlight-pink.png" /> <img width="200" height="200" width_o="200" height_o="200" data-src="https://freight.cargo.site/t/original/i/fda02c44d792702a17f57cd4abf6e065b703052010819000d3a1f86d26bf6821/wand-freefly.png" data-mid="58716571" border="0" src="https://freight.cargo.site/w/200/i/fda02c44d792702a17f57cd4abf6e065b703052010819000d3a1f86d26bf6821/wand-freefly.png" /> Designing for a permanent interactive installation We proposed a variety of configurations for the permanent installation, taking into account multiple scenarios for Twitter to install the piece. The intention was for the piece to function as both a tool for discovery, as well as a demonstration of interesting threads on the platform. Some of the configurations accomodated seating, as well as the variety of screens and surfaces we envisioned for the project. Renderings of Manifold in various rooms in Twitter HQ. Architectural modeling and rendering by Noa Younse <img width="1000" height="600" width_o="1000" height_o="600" data-src="https://freight.cargo.site/t/original/i/3f9a2fd951c4bd730bd1383101ba7d9c8c189a859d868b77ff737ac01c5fdec5/01_ExploratoriumTop.png" data-mid="58711261" border="0" src="https://freight.cargo.site/w/1000/i/3f9a2fd951c4bd730bd1383101ba7d9c8c189a859d868b77ff737ac01c5fdec5/01_ExploratoriumTop.png" /> <img width="1000" height="600" width_o="1000" height_o="600" data-src="https://freight.cargo.site/t/original/i/34df7819b1b1a2e364eedafc107e1f6d8b27f3e7ff4512d4a72d16cb2dc7900f/03_ExploratoriumInterior05.png" data-mid="58711262" border="0" src="https://freight.cargo.site/w/1000/i/34df7819b1b1a2e364eedafc107e1f6d8b27f3e7ff4512d4a72d16cb2dc7900f/03_ExploratoriumInterior05.png" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/a095c8d4839503cedbe089518c098bfce2ef37e3b58e7b3edac48f494652635d/Furniture01-Top.jpg" data-mid="58711432" border="0" src="https://freight.cargo.site/w/1000/i/a095c8d4839503cedbe089518c098bfce2ef37e3b58e7b3edac48f494652635d/Furniture01-Top.jpg" /> <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/5a818dc0012747b06e97330107da3c1be3aa6eb067390942359a36819a3af70f/Furniture01-Inside04.jpg" data-mid="58711431" border="0" src="https://freight.cargo.site/w/1000/i/5a818dc0012747b06e97330107da3c1be3aa6eb067390942359a36819a3af70f/Furniture01-Inside04.jpg" /> <img width="1000" height="600" width_o="1000" height_o="600" data-src="https://freight.cargo.site/t/original/i/a3f235caced3b0e93743d3fa79cc3264a9ee8e3bbc1e1b7eca897b02db0f22ca/04_LiveStudioBigScreensTop.png" data-mid="58711393" border="0" src="https://freight.cargo.site/w/1000/i/a3f235caced3b0e93743d3fa79cc3264a9ee8e3bbc1e1b7eca897b02db0f22ca/04_LiveStudioBigScreensTop.png" /> <img width="1000" height="600" width_o="1000" height_o="600" data-src="https://freight.cargo.site/t/original/i/69d10e0601adbab4e4bc73a8640052db8269aa3573cbac021ed1889afaeb0b15/06_LiveStudioBigScreensInterior03.png" data-mid="58711677" border="0" src="https://freight.cargo.site/w/1000/i/69d10e0601adbab4e4bc73a8640052db8269aa3573cbac021ed1889afaeb0b15/06_LiveStudioBigScreensInterior03.png" /> <img width="5312" height="2988" width_o="5312" height_o="2988" data-src="https://freight.cargo.site/t/original/i/b90db63a98c6828ef0e5510d7d1b25eff901c9cb7e55bf892df753e4dd681658/ReceptionMiddlePanels.jpg" data-mid="58711445" border="0" src="https://freight.cargo.site/w/1000/i/b90db63a98c6828ef0e5510d7d1b25eff901c9cb7e55bf892df753e4dd681658/ReceptionMiddlePanels.jpg" /> <img width="5312" height="2988" width_o="5312" height_o="2988" data-src="https://freight.cargo.site/t/original/i/7976e826f7b19da6ea49e2c49005e8b7b9d6ffd8f3dbd077a72f4c99974b8d5c/ReceptionCurves.jpg" data-mid="58711444" border="0" src="https://freight.cargo.site/w/1000/i/7976e826f7b19da6ea49e2c49005e8b7b9d6ffd8f3dbd077a72f4c99974b8d5c/ReceptionCurves.jpg" /> To save money and time, we ended up repurposing existing screens in Twitter’s lobby and installing the Triptych portion of Manifold. Two large screens faced one another on opposite ends of a large lobby area. One one side, we installed our grid of sensors for interactivity. On the other, a passive version of Manifold ran, much like it had on the smaller screens throughout Twitter’s offices in the past. <img width="8976" height="1632" width_o="8976" height_o="1632" data-src="https://freight.cargo.site/t/original/i/b9e0606961e209c1352158c2bce50b32f10025e83281918dd960dd5530726ee6/lounge_pano_twdelevatorsCollage2-NoPinboard.jpg" data-mid="58711543" border="0" src="https://freight.cargo.site/w/1000/i/b9e0606961e209c1352158c2bce50b32f10025e83281918dd960dd5530726ee6/lounge_pano_twdelevatorsCollage2-NoPinboard.jpg" /><img width="8976" height="1632" width_o="8976" height_o="1632" data-src="https://freight.cargo.site/t/original/i/2fd0f361e5fc7a086662d9c1738f5c52e0607abd657d964ae6f5595bd57f8700/lounge_pano_twdelevatorsCollage.jpg" data-mid="58711542" border="0" src="https://freight.cargo.site/w/1000/i/2fd0f361e5fc7a086662d9c1738f5c52e0607abd657d964ae6f5595bd57f8700/lounge_pano_twdelevatorsCollage.jpg" /><img width="8976" height="1632" width_o="8976" height_o="1632" data-src="https://freight.cargo.site/t/original/i/8161a4b1d3e6acf6942ed297bdee7b9cac9a1971f0f424b0c3a9431dfb054575/lounge_pano_twdelevatorsCollage2.jpg" data-mid="58711544" border="0" src="https://freight.cargo.site/w/1000/i/8161a4b1d3e6acf6942ed297bdee7b9cac9a1971f0f424b0c3a9431dfb054575/lounge_pano_twdelevatorsCollage2.jpg" /> Photoshop renderings depicting various methods of modifying the existing space to accomodate pinboards and tabletop screens Installing Manifold at Twitter We ended up installing a pared down version of the full tool we’d imagined, focusing on the Triptych with the live map of twitter for people to explore and engage with. The visualization is situated in the main lobby where guests to HQ enter, ensuring that it’s a stop on most tours. The final installation at Twitter HQ. A’yen demonstrates flying around the interest viewA tour group from Girls Who Code try out Manifold in the geographical view https://veev.cargo.site/Empire Mon, 15 Dec 2014 17:06:16 +0000 Genevieve Hoffman https://veev.cargo.site/Empire <img width="1440" height="783" width_o="1440" height_o="783" data-src="https://freight.cargo.site/t/original/i/4e43fafd61c799a47a760c816a249802ca03d589e866d43fc2daeeb5c4ac4512/empire_home.jpg" data-mid="52823020" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/4e43fafd61c799a47a760c816a249802ca03d589e866d43fc2daeeb5c4ac4512/empire_home.jpg" /> <img width="1440" height="783" width_o="1440" height_o="783" data-src="https://freight.cargo.site/t/original/i/bc3b51cd188a177db7a9613fa2e20f497fe18a12c7facc534bf463801482b4bb/empire_periphery.jpg" data-mid="52823016" border="0" src="https://freight.cargo.site/w/1000/i/bc3b51cd188a177db7a9613fa2e20f497fe18a12c7facc534bf463801482b4bb/empire_periphery.jpg" /> <img width="1440" height="783" width_o="1440" height_o="783" data-src="https://freight.cargo.site/t/original/i/6e45aff357f3f1b8346664de0f27c03fe4ab8608f3b346b23113df741b799a82/empire_periphery_rotated.jpg" data-mid="52823017" border="0" src="https://freight.cargo.site/w/1000/i/6e45aff357f3f1b8346664de0f27c03fe4ab8608f3b346b23113df741b799a82/empire_periphery_rotated.jpg" /> <img width="1440" height="783" width_o="1440" height_o="783" data-src="https://freight.cargo.site/t/original/i/8042fa592ef4350d2398289cc4999d9b10aec0aefd75a81c322777c8ce7e066a/empire_legacy_wide.jpg" data-mid="52823019" border="0" src="https://freight.cargo.site/w/1000/i/8042fa592ef4350d2398289cc4999d9b10aec0aefd75a81c322777c8ce7e066a/empire_legacy_wide.jpg" /> <img width="1440" height="783" width_o="1440" height_o="783" data-src="https://freight.cargo.site/t/original/i/c1f6b9f0a2e5ca2fe3492de1134af44d671c9beb9e628c094bdb4f0a9014913b/empire_migrants_overlay.jpg" data-mid="52823018" border="0" src="https://freight.cargo.site/w/1000/i/c1f6b9f0a2e5ca2fe3492de1134af44d671c9beb9e628c094bdb4f0a9014913b/empire_migrants_overlay.jpg" /> EMPIREExperiencing the legacies of Dutch colonialism as an interactive documentary Credits Directed, produced, shot and edited by Eline Jongsma and Kel O'Neill UX and Visual Design by Clint Beharry Web Development by Genevieve Hoffman Additional Development by Sam Bailey POV Technology Fellow Brian Chirls Exec. Producer for POV Digital Adnaan Wasey Exec. Producer for POV Simon Kilmurry Role front-end web development and prototyping Empire is an immersive documentary project that examines the still-unfolding legacy of Dutch colonialism. The project is truly cross-platform, displayed as multi-channel film installations in galleries, as a book, and as an interactive web experience. I was approached by the filmmakers, Eline Jongsma and Kel O'Neill, to develop the interactive website. I worked with them to prototype interactions that suited each of the four organizing chapters - Cradle, Periphery, Migrants and Legacy. Since the films had first been experienced as multi-channel installations in physical space, I tried to create a web-based experience that would provide ways of experiencing multiple films at once, while still allowing the viewer to focus in on material they found compelling. Empire:Interactive was featured in the DocLab new media exhibition of the 2014 International Documentary Film Festival in Amsterdam, won the 2015 Webby for Interactive Documentary and was nominated for an Emmy in Interactive Documentary. It is currently on view at POV (PBS's documentary arm), and is one of six interactive documentaries to be featured on POV's website. Post-colonial themes told with a variety of media Empire is a multi-platform documentary that explores the unintended consequences of colonialism - specifically of the Dutch East and West India Companies, which once controlled vast trading networks that stretched from the Cape of Good Hope to the Indonesian archipelago, and from New York to South America's Wild Coast. Although they came in pursuit of short-term profits, the companies left behind a legacy that can still be seen in the cultures, and in the bloodlines, of people and communities around the world. Shot in ten countries over the course of four years, Empire employs human-scaled storytelling to explore how the conditions of the past impact our lives in the present.&nbsp; The project was also an experiment in multi-format storytelling, and exists as a series of physical installations, a book, and the web documentary that I developed. Read more about the project and various storytelling forms employed by the creators in this article by Beyza Boyacioglu on MIT’s docubase. Empire in art book form. The directors are pictured wearing sanitary masks. Images courtesy of Jongsma O’Neill <img width="1280" height="853" width_o="1280" height_o="853" data-src="https://freight.cargo.site/t/original/i/938b89a5d7ef4cc122349b5297f34ac0b6daca7363ad17919fd7cd7c1677379d/14.EmpireBook1.jpg" data-mid="59219400" border="0" src="https://freight.cargo.site/w/1000/i/938b89a5d7ef4cc122349b5297f34ac0b6daca7363ad17919fd7cd7c1677379d/14.EmpireBook1.jpg" /> <img width="640" height="480" width_o="640" height_o="480" data-src="https://freight.cargo.site/t/original/i/fadb2758037311ef11b604be6ab642a583b14723b8cb0c28b852bc7ff158dbba/14.EmpireBook2.jpg" data-mid="59219401" border="0" src="https://freight.cargo.site/w/640/i/fadb2758037311ef11b604be6ab642a583b14723b8cb0c28b852bc7ff158dbba/14.EmpireBook2.jpg" /> <img width="640" height="480" width_o="640" height_o="480" data-src="https://freight.cargo.site/t/original/i/24f3fb9de66813f119f3ea40ca3d2b75afa6635be0929f590fc5eb615bd55859/14.EmpireBook3.jpg" data-mid="59219402" border="0" src="https://freight.cargo.site/w/640/i/24f3fb9de66813f119f3ea40ca3d2b75afa6635be0929f590fc5eb615bd55859/14.EmpireBook3.jpg" /> From the film festival to the screen Empire had already had an evolution as short documentary films installed in galleries and festivals when I came onboard as a front-end developer to bring those films to the web. The challenge was how to create an experience of the media that would mimic how people had encountered the multi-channel installations in space. For instance, in the Cradle section, two visual experiences share the same soundtrack, and viewers had encountered the two "sides" of the film by walking around a hanging screen and choosing which side to watch. We mimicked this choice by using CSS3 animations and simple user input to flip the video canvas as the soundtrack and films play. Screen recording of the Cradle section of the website, which flips the video along the z-axis with CSS3 animations Screen recording of the Periphery section, where a similar technique was used to flip the video along the x-axis, revealing a different soundtrack depending on which character was rightside up Visual and UX Designer Clint Beharry did an amazing job developing the visual look of the web experience, which referenced old maps on scrolls, harkening back to days when the Dutch East India Trading Company traveled the world and settled in these remote areas. Moodboard by Clint Beharry of the visual design for the website<img width="1125" height="1500" width_o="1125" height_o="1500" data-src="https://freight.cargo.site/t/original/i/f40f371419dabbe735a967f35efa892c4ac98932f5f4d8f6e4738e81b19da826/Moodboard.jpg" data-mid="56170326" border="0" src="https://freight.cargo.site/w/1000/i/f40f371419dabbe735a967f35efa892c4ac98932f5f4d8f6e4738e81b19da826/Moodboard.jpg" /> A visualization of the viewing experience We wanted to leverage some of the advantages of the digital and interactive medium. For the Cradle and Periphery sections, viewers had to choose which video or soundtrack to watch or listen to. At the end of these sections, a dynamic image appears showing the viewer how much time they spent watching one or the other, forming a stylized kind of bar graph and pie chart depending on which side was in focus. <img width="1920" height="1169" width_o="1920" height_o="1169" data-src="https://freight.cargo.site/t/original/i/88670bc75245f58ea8f0c483308b2048332af12a66049eba021183f81984be45/cradle_end_vis.png" data-mid="59301680" border="0" src="https://freight.cargo.site/w/1000/i/88670bc75245f58ea8f0c483308b2048332af12a66049eba021183f81984be45/cradle_end_vis.png" /> <img width="1920" height="1169" width_o="1920" height_o="1169" data-src="https://freight.cargo.site/t/original/i/71b86f382da77cf5429080f21ce15118d236d9cf3ce903cc377df093b7fffc26/periphery_end_vis.png" data-mid="59301681" border="0" src="https://freight.cargo.site/w/1000/i/71b86f382da77cf5429080f21ce15118d236d9cf3ce903cc377df093b7fffc26/periphery_end_vis.png" /> Screenshots from the end of the Cradle and Periphery sections For the Migrants section, the longest in the series at 20 minutes, the concept to bring the three-channel installation to the web combined the films into one frame, but kept track of how much a viewer had watched. Migrants, a three-channel video installation, at IDFA Doclab in Amsterdam <img width="1008" height="567" width_o="1008" height_o="567" data-src="https://freight.cargo.site/t/original/i/f74f6911c516593f42e0fde1ff86eec1d069ac09b704330f29b250de28625d88/6.MigrantsAtIDFA.jpg" data-mid="59219398" border="0" src="https://freight.cargo.site/w/1000/i/f74f6911c516593f42e0fde1ff86eec1d069ac09b704330f29b250de28625d88/6.MigrantsAtIDFA.jpg" /> The same view of Migrants on the interactive website with the visual overlay showing the editing map of which panel is depicting footage from either Ghana, Brazil or Suriname <img width="1920" height="995" width_o="1920" height_o="995" data-src="https://freight.cargo.site/t/original/i/936197c560c723253b5de0f3db3622019f38386843dd16aa1577b62290c014da/migrants_overlay_likeIDFA.png" data-mid="59302082" border="0" src="https://freight.cargo.site/w/1000/i/936197c560c723253b5de0f3db3622019f38386843dd16aa1577b62290c014da/migrants_overlay_likeIDFA.png" /> Figuring out the visualization layer. We knew we wanted to keep the experience as a three-channel video sharing one soundtrack. The film combines subjects from three countries - Ghana, Suriname and Brazil - and layers their stories alongside one another. We wanted the user to better understand the editing decisions with a map visible when the user hovered over the map. <img width="1920" height="1400" width_o="1920" height_o="1400" data-src="https://freight.cargo.site/t/original/i/9af3559c04086899dd5a497c791689326d7d2713a187d763de743be7b6780666/migrants-1.png" data-mid="59303920" border="0" src="https://freight.cargo.site/w/1000/i/9af3559c04086899dd5a497c791689326d7d2713a187d763de743be7b6780666/migrants-1.png" /> <img width="1920" height="1198" width_o="1920" height_o="1198" data-src="https://freight.cargo.site/t/original/i/303486f9008b145e02e2da385f21a50d59b08897d8bba856e4e9a486f39c99b1/migrants-2.png" data-mid="59303921" border="0" src="https://freight.cargo.site/w/1000/i/303486f9008b145e02e2da385f21a50d59b08897d8bba856e4e9a486f39c99b1/migrants-2.png" /> <img width="1920" height="1359" width_o="1920" height_o="1359" data-src="https://freight.cargo.site/t/original/i/b4fce45799ae859916fa060d20acf36f72d7eee94004b6d5c95929b4525cd712/migrants-3b.png" data-mid="59303922" border="0" src="https://freight.cargo.site/w/1000/i/b4fce45799ae859916fa060d20acf36f72d7eee94004b6d5c95929b4525cd712/migrants-3b.png" /> Sketches by Kel O’Neill summarizing the user experience and logic of the overlay map Screen capture of the Migrant map overlay visualization The film is set to play as a global screening, essentially as a loop so that no matter where or when you access it, it is playing the same content for everyone viewing it, looping 72 times in one day. We wanted to visualize this by depicting a kind of 24 hour clock, and showing you how much of the film you’d watched of a single loop, as well as where you are in its 24 hour, 72 loop cycle. <img width="1441" height="779" width_o="1441" height_o="779" data-src="https://freight.cargo.site/t/original/i/2e9ab99ce64e15f2be688b2a7d0014bfc88eb15ef55adc82fdbfe599983c0fa5/Migrants_Instructions-01.png" data-mid="59303519" border="0" src="https://freight.cargo.site/w/1000/i/2e9ab99ce64e15f2be688b2a7d0014bfc88eb15ef55adc82fdbfe599983c0fa5/Migrants_Instructions-01.png" /> An early design prototype of the screen visible once the viewer has watched through all the loops. The reward for viewing was a downable version of the film For the Legacy section, each of the four documentaries in the installation were installed with headphones for separate consumption, forcing the viewer to choose between the storylines. We translated this experience of consuming the media into a web experience where people can zoom and rotate the videos to focus in on one video and soundtrack. When zoomed out the soundtracks overlap, forming a cacophany of stories about each place and people affected by Dutch colonialism. The visualization component shows the viewer which portions of the four storylines they’ve consumed. The payoff for watching all of them is to skype with the filmmakers, as a reward for perserverence. Screenshots of the Legacy visualization of the viewing experience as well as the reward for watching through all the sections <img width="1064" height="551" width_o="1064" height_o="551" data-src="https://freight.cargo.site/t/original/i/ea2179824974d7fdcf16749ccd77f92755b03c35e3354ed5d9773a3ceb707dba/Column_02_Legacy_08_tier2_01_start.png" data-mid="59302378" border="0" src="https://freight.cargo.site/w/1000/i/ea2179824974d7fdcf16749ccd77f92755b03c35e3354ed5d9773a3ceb707dba/Column_02_Legacy_08_tier2_01_start.png" /> <img width="1064" height="551" width_o="1064" height_o="551" data-src="https://freight.cargo.site/t/original/i/4628e8f9a14d447e88432fc24c6e9498d21d0341d9acdfb87874011943baf1ad/Column_02_Legacy_08_tier2_02_playing.png" data-mid="59302379" border="0" src="https://freight.cargo.site/w/1000/i/4628e8f9a14d447e88432fc24c6e9498d21d0341d9acdfb87874011943baf1ad/Column_02_Legacy_08_tier2_02_playing.png" /> <img width="1064" height="551" width_o="1064" height_o="551" data-src="https://freight.cargo.site/t/original/i/5f4ea1e645f188d60e0437b2010547956555f8647fe28391c3b2b71870c97e1c/Column_02_Legacy_08_tier2_03_playing2.png" data-mid="59302380" border="0" src="https://freight.cargo.site/w/1000/i/5f4ea1e645f188d60e0437b2010547956555f8647fe28391c3b2b71870c97e1c/Column_02_Legacy_08_tier2_03_playing2.png" /> <img width="1064" height="551" width_o="1064" height_o="551" data-src="https://freight.cargo.site/t/original/i/5ae03a4044f493a3705df58054f61c40be2b12d419fca5263786aaa69a2529d9/Column_02_Legacy_08_tier2_04_end.png" data-mid="59302381" border="0" src="https://freight.cargo.site/w/1000/i/5ae03a4044f493a3705df58054f61c40be2b12d419fca5263786aaa69a2529d9/Column_02_Legacy_08_tier2_04_end.png" /> https://veev.cargo.site/Tides-of-Change Mon, 15 Dec 2014 18:48:58 +0000 Genevieve Hoffman https://veev.cargo.site/Tides-of-Change <img width="2880" height="1614" width_o="2880" height_o="1614" data-src="https://freight.cargo.site/t/original/i/887dfb17a812b7b7dfc4d4dc41047c5cc099980e64df4ee02cd31197de6f1d81/Screen-Shot-2019-12-04-at-3.44.22-PM.png" data-mid="56015904" border="0" data-scale="100" src="https://freight.cargo.site/w/1000/i/887dfb17a812b7b7dfc4d4dc41047c5cc099980e64df4ee02cd31197de6f1d81/Screen-Shot-2019-12-04-at-3.44.22-PM.png" /> <img width="1440" height="810" width_o="1440" height_o="810" data-src="https://freight.cargo.site/t/original/i/8800920cdba9091d4176e98cb9a5e9de835a19db7d821d7445439db3b1870785/jrh_wide_16x9.png" data-mid="56016289" border="0" src="https://freight.cargo.site/w/1000/i/8800920cdba9091d4176e98cb9a5e9de835a19db7d821d7445439db3b1870785/jrh_wide_16x9.png" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/5b961949592ae13772ed3d7d8ecd7333d62c5b42ad52cdaa14e6b40a69cc5176/jrh_touchscreen_home.jpg" data-mid="52823024" border="0" src="https://freight.cargo.site/w/1000/i/5b961949592ae13772ed3d7d8ecd7333d62c5b42ad52cdaa14e6b40a69cc5176/jrh_touchscreen_home.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/52fb79701466baba753a30b15c2683ada8501c84c595f9330f9f1764b62aebc9/jrh_touchscreen_issues_home.jpg" data-mid="52823025" border="0" src="https://freight.cargo.site/w/1000/i/52fb79701466baba753a30b15c2683ada8501c84c595f9330f9f1764b62aebc9/jrh_touchscreen_issues_home.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/82f429e10262caed529d0ecc9df39269d077bf3f49e6120426040e580de1125c/jrh_touchscreen_timeline_home.jpg" data-mid="52823026" border="0" src="https://freight.cargo.site/w/1000/i/82f429e10262caed529d0ecc9df39269d077bf3f49e6120426040e580de1125c/jrh_touchscreen_timeline_home.jpg" /> TIDES OF CHANGE Honoring the memory of a celebrated union leader with an interactive memorial, permanently installed at the James R. Herman Pier 27 Cruise Terminal in San Francisco Credits Commissioned by The Port of San Francisco with support from the James R. Herman Memorial Committee Concept + Design byFloating Point Collective: Genevieve Hoffman, Jack Kalish and Gabriella Levine Fabrication + Installation Sheet Metal Alchemist&nbsp; With support from Autodesk’s Pier 9 Workshop Roleconcept, design, archival research and content development, technical project management, software prototyping, touchscreen app development As a part of Floating Point Collective, I was commissioned to create a permanent public art sculpture to memorialize the life and legacy of James R. Herman. Tides of Change is an interactive light sculpture installed at the Pier 27 Cruise Terminal on the Embarcadero in San Francisco, CA. The memorial was completed in early 2015. The installation consists of a steel frame, and alternating panels of aluminum and flexible LEDs. Drawing on Herman's life as a sailor, longshoreman, and social activist, we wanted to reference the ocean as both a calm but powerful force. The larger sculpture animates like flowing water, which flows around a viewer's outline if they stand still in front of the installation. The touchscreen provides biographical content and information about the social justice causes that Herman championed. If viewers select to explore certain issues, quotes by Herman animate across the larger sculpture. Video documentation of the interactive lighting elements responding to user interaction, process of the design and production, as well as context for the man memorialized. A beloved labor leader and activist The Port of San Francisco decided to name the new cruise terminal they were building at Pier 27 after one of San Francisco's most loved and cherished union leaders, James R. Herman. Herman was a union leader and labor activist, who was president of the International Longshore and Warehouse Union (ILWU) from 1977 - 1991. During his tenure, he was able to negotiate substantial wage increases without resorting to a single strike. He also championed the rights of workers and the disadvantaged around the world, leading boycotts of coffee from El Salvador during the military junta and imports from South Africa during the Apartheid Era. Herman was also a political force of nature in San Francisco during the 70s and 80s. Top: Herman protesting at an anti-apartheid rally and against Salvadoran coffee during the military junta Below: Herman with Cesar Chavez, Dianne Feinstein and Desmond Tutu <img width="4199" height="3116" width_o="4199" height_o="3116" data-src="https://freight.cargo.site/t/original/i/29d7a8d8118137fa7e7884f9406e9ba2ff18ab50ca64eae73e050978a16143da/Herman-1985-apartheid-rally.jpg" data-mid="58786528" border="0" src="https://freight.cargo.site/w/1000/i/29d7a8d8118137fa7e7884f9406e9ba2ff18ab50ca64eae73e050978a16143da/Herman-1985-apartheid-rally.jpg" /> <img width="2724" height="1951" width_o="2724" height_o="1951" data-src="https://freight.cargo.site/t/original/i/b44693b302d8db8b389b664e5cdeb213ec5ae0381fc22d523abde2a64f407c5b/Herman-El-Salvador-Boycott.jpg" data-mid="58786523" border="0" src="https://freight.cargo.site/w/1000/i/b44693b302d8db8b389b664e5cdeb213ec5ae0381fc22d523abde2a64f407c5b/Herman-El-Salvador-Boycott.jpg" /> <img width="4061" height="3316" width_o="4061" height_o="3316" data-src="https://freight.cargo.site/t/original/i/b86b639560c989875b6521ca0c5281410adff3ef7031f56c64a2122f8cb09265/Chavez-Herman.jpg" data-mid="58786473" border="0" src="https://freight.cargo.site/w/1000/i/b86b639560c989875b6521ca0c5281410adff3ef7031f56c64a2122f8cb09265/Chavez-Herman.jpg" /> <img width="4023" height="3176" width_o="4023" height_o="3176" data-src="https://freight.cargo.site/t/original/i/f6aa9b366e48fe3ec374a4cd8a689ac470106ee31fda253f0c6438e261ac818e/Herman-Port-Comm-1983.jpg" data-mid="58786525" border="0" src="https://freight.cargo.site/w/1000/i/f6aa9b366e48fe3ec374a4cd8a689ac470106ee31fda253f0c6438e261ac818e/Herman-Port-Comm-1983.jpg" /> <img width="4101" height="3150" width_o="4101" height_o="3150" data-src="https://freight.cargo.site/t/original/i/5987e1df52395b07180a4aec13ca3c3156078de15274dee4ab88b4fb74f864ab/Herman-Tutu-1986.jpg" data-mid="58786526" border="0" src="https://freight.cargo.site/w/1000/i/5987e1df52395b07180a4aec13ca3c3156078de15274dee4ab88b4fb74f864ab/Herman-Tutu-1986.jpg" /> Working as the collective Floating Point, we were invited by Autodesk's Pier 9 Workshop artist residency to submit a proposal to create an installation commemorating James R. Herman's life for permanent installation in the new cruise ship terminal. Commemorating the past with new media One of the memorial committee's requests was that a touchscreen might accompany the memorial so that new generations of San Franciscans and visitors to the city might come to know the life and legacy of Jimmy Herman. As a new media art collective, we realized the possibilities of having a touchscreen integrate with a larger sculpture, to amplify users' gestures and selections. Formally, we were inspired by Jimmy's life as a sailor and longshoreman, and decided to create an interactive light sculpture in the form of ocean waves. Some of these waves would animate with LED pixel arrays. Others, would be metal and inscribed with some of Herman's most celebrated quotes, referencing his political views and social activism. <img width="2112" height="1379" width_o="2112" height_o="1379" data-src="https://freight.cargo.site/t/original/i/e64d7eba640242c607838cc901ba7607845ac68575948ebbb0de09b854f3c1c2/sketch1_crop.jpg" data-mid="58786914" border="0" src="https://freight.cargo.site/w/1000/i/e64d7eba640242c607838cc901ba7607845ac68575948ebbb0de09b854f3c1c2/sketch1_crop.jpg" /> <img width="2221" height="2307" width_o="2221" height_o="2307" data-src="https://freight.cargo.site/t/original/i/74666cdd858d13764c6c78ea220d0920a3d0a0cfd7b7a7a5f291a007004aa049/sketch.JPG" data-mid="58786913" border="0" src="https://freight.cargo.site/w/1000/i/74666cdd858d13764c6c78ea220d0920a3d0a0cfd7b7a7a5f291a007004aa049/sketch.JPG" /> Early concept sketches for the memorial by Jack Kalish For the proposal we modeled the sculpture in Cinema4D to create a rendering of how lighting elements and interactivity would activate the installation. Early renderings depicting the installation by Jack Kalish <img width="800" height="600" width_o="800" height_o="600" data-src="https://freight.cargo.site/t/original/i/bd90ce3b54acec6f0616d057127d5fe52ac1b8faf5ed9473d2a5658d38b908a4/render_2013-12-18_0350-2.jpg" data-mid="58787370" border="0" src="https://freight.cargo.site/w/800/i/bd90ce3b54acec6f0616d057127d5fe52ac1b8faf5ed9473d2a5658d38b908a4/render_2013-12-18_0350-2.jpg" /> <img width="800" height="600" width_o="800" height_o="600" data-src="https://freight.cargo.site/t/original/i/8dfb3925e8226dabe2610b725a51a05d07fc89ad5a08f1f7ebd5980517f10c25/render_2013-12-18_0350.jpg" data-mid="58787371" border="0" src="https://freight.cargo.site/w/800/i/8dfb3925e8226dabe2610b725a51a05d07fc89ad5a08f1f7ebd5980517f10c25/render_2013-12-18_0350.jpg" /> We were delighted to receive the commission and spent the next 6 months working out of Autodesk's Pier 9 workshop to design, prototype and fabricate the sculpture we'd proposed. Getting the materials working together One of our first tasks was to determine the type of metal finish we'd use for the sculpture. To avoid rust, we knew we wanted to powder coat any metal we might use for the structure with a metallic finish. <img width="2592" height="730" width_o="2592" height_o="730" data-src="https://freight.cargo.site/t/original/i/02147af34b8f42f82c6d17ef28acc0c78aa27b66de8dccdcebecd358efc138b4/coatings_2.jpg" data-mid="58788081" border="0" src="https://freight.cargo.site/w/1000/i/02147af34b8f42f82c6d17ef28acc0c78aa27b66de8dccdcebecd358efc138b4/coatings_2.jpg" /> Powder coating samples mimicking a metallic finish Originally in our proposal, we’d thought we might use projection to activate a metal base sculpture. However, upon visiting the site, we saw the sheer number of windows and daylight that would make anything projected impossible to see during the day. We quickly shifted gears and began to look at LEDs as our means to activate the sculpture. We researched a number of options for an LED display that would allow us to activate the individual waves so that they could both be surfaces for animation, and allow for text to be legible since we wanted to activate various quotes from Herman from the touchscreen. We found a flexible panel that would magnetically attach to a metal frame, in order to make our lighting surface curved like a wave. A panel from the flexible LEDs we used for the lighting elements <img width="1099" height="676" width_o="1099" height_o="676" data-src="https://freight.cargo.site/t/original/i/a4c0e483b4017c3f54e3644db4491fa6aa28baf99bfb4e60f1f7ed3c90c5d49b/NF10F-LED-Tile.jpg" data-mid="58788083" border="0" src="https://freight.cargo.site/w/1000/i/a4c0e483b4017c3f54e3644db4491fa6aa28baf99bfb4e60f1f7ed3c90c5d49b/NF10F-LED-Tile.jpg" /> We also decided that diffusing the LEDs would give us the best look and feel to match the type of animation we were after — mimicking waves crashing and letters dissolving. <img width="3456" height="2304" width_o="3456" height_o="2304" data-src="https://freight.cargo.site/t/original/i/bebd6f65d71bda27a77fc4497807aa9a34df1b340a90421bbd1bbd08efe2cd74/IMG_0997.JPG" data-mid="58789303" border="0" src="https://freight.cargo.site/w/1000/i/bebd6f65d71bda27a77fc4497807aa9a34df1b340a90421bbd1bbd08efe2cd74/IMG_0997.JPG" /> <img width="3456" height="2304" width_o="3456" height_o="2304" data-src="https://freight.cargo.site/t/original/i/bb44b929692841bde75395c2e51613144099e6adc2e9bbf13c38d1646f83896a/IMG_0998.JPG" data-mid="58789304" border="0" src="https://freight.cargo.site/w/1000/i/bb44b929692841bde75395c2e51613144099e6adc2e9bbf13c38d1646f83896a/IMG_0998.JPG" /> <img width="3456" height="2304" width_o="3456" height_o="2304" data-src="https://freight.cargo.site/t/original/i/f3230d7dc5a6ba4b0c4faa79f13a112e3fbede2e5c371401eac4ad1dcbc07f7c/text-diffusion-tests.jpeg" data-mid="58789324" border="0" src="https://freight.cargo.site/w/1000/i/f3230d7dc5a6ba4b0c4faa79f13a112e3fbede2e5c371401eac4ad1dcbc07f7c/text-diffusion-tests.jpeg" /> Tests of various diffusion materials to cover the LED array. We ended up using a 10mm resolution, which still made text legible from a distance For both budgetary and aesthetic reasons, we chose not to cover each wave with LED tiles. We knew that there would be times that the piece would be turned off, and we still wanted Herman's words to have a presence in the space when that would be the case. To visually connect the waves that would not be covered in LED panels, we decided to run strips of LEDs along their tops and bottoms, to amplify the effects of light traveling across them Testing LED strips against different types of anodized aluminum as the material option for the metal waves <img width="3456" height="2304" width_o="3456" height_o="2304" data-src="https://freight.cargo.site/t/original/i/031d27486e684917ae6f8d89e34a11f5cb0129e1d02b7d1bd4d5a783271bc260/IMG_0988.JPG" data-mid="58790592" border="0" src="https://freight.cargo.site/w/1000/i/031d27486e684917ae6f8d89e34a11f5cb0129e1d02b7d1bd4d5a783271bc260/IMG_0988.JPG" /> We ended up lettering anodized aluminum panels with his quotes, choosing a lighter shade to encourage the viewer to walk around the space as they took in the words. Developing the design of the experience Alongside material research and testing, we actively developed the design for the concept we’d been chosen to create.&nbsp; We modified our initial design to accomodate ADA compliance laws, so that people with visual or physical impairments would also be able to engage with the memorial. We sourced directional speakers so that a video commemorating the life of Jimmy Herman would be audible to people who might not be able to see the touchscreen. We also placed the touchscreen and waves at heights that could accomodate people in wheelchairs. <img width="896" height="902" width_o="896" height_o="902" data-src="https://freight.cargo.site/t/original/i/3c4b668e89033c80c8a682362c87175a5e0aa5e3c95296a877bb89f3da097ccf/ADA_Cane_height.jpg" data-mid="58791396" border="0" src="https://freight.cargo.site/w/896/i/3c4b668e89033c80c8a682362c87175a5e0aa5e3c95296a877bb89f3da097ccf/ADA_Cane_height.jpg" /> <img width="1026" height="664" width_o="1026" height_o="664" data-src="https://freight.cargo.site/t/original/i/f979018a38bfd3ed2a9d5c405869a88c24c906bde4cbcf1e1eaa4c7d481e5c34/ADA_Wheelchair_height.jpg" data-mid="58791397" border="0" src="https://freight.cargo.site/w/1000/i/f979018a38bfd3ed2a9d5c405869a88c24c906bde4cbcf1e1eaa4c7d481e5c34/ADA_Wheelchair_height.jpg" /> ADA guidelines to ensure that exhibits are accessible to people with disabilities We submitted updated renderings and design documents to the Port of San Francisco after 3 months of developing our initial concept. These documents laid out the technology we’d incorporate, the wiring we’d need the building contractors to install, as well as our plans to store the computers running the installation. Renderings that depict the installation after developing the design <img width="1280" height="720" width_o="1280" height_o="720" data-src="https://freight.cargo.site/t/original/i/83047f2c6d97571cda16937cb8784bcba643ea4cb5dfb19b6ec5727057ac063a/tech_perspective4.png" data-mid="58791617" border="0" src="https://freight.cargo.site/w/1000/i/83047f2c6d97571cda16937cb8784bcba643ea4cb5dfb19b6ec5727057ac063a/tech_perspective4.png" /> <img width="1280" height="800" width_o="1280" height_o="800" data-src="https://freight.cargo.site/t/original/i/3cb868bceebb74d8ddf99f7b80b9866ea3d664a922c6de97b0ba34bab2597985/render_2014-05-09_1234_PERSPECTIVE_front.png" data-mid="58791613" border="0" src="https://freight.cargo.site/w/1000/i/3cb868bceebb74d8ddf99f7b80b9866ea3d664a922c6de97b0ba34bab2597985/render_2014-05-09_1234_PERSPECTIVE_front.png" /> Of seven total waves, four were covered in LED panels and three&nbsp; were made of anodized aluminum with quotes by Herman visible even with the technological elements turned off <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/25c22419f6db8d9816ab6c3299ecca67a49f897a8b4fd07eb4891cd83f7d5a7e/LED_Treatments2.jpg" data-mid="58792715" border="0" src="https://freight.cargo.site/w/1000/i/25c22419f6db8d9816ab6c3299ecca67a49f897a8b4fd07eb4891cd83f7d5a7e/LED_Treatments2.jpg" /> A motion study showing patterns of light animating across the waves as well as quotes by Jimmy Herman coming into focus Renderings demonstrating the field of view the Kinect depth camera would have of people in front of the memorial. We used the Kinect to program interactivity where a viewer’s outline would interrupt the animations of crashing waves <img width="1280" height="800" width_o="1280" height_o="800" data-src="https://freight.cargo.site/t/original/i/126d5db014d4ca8bd293aea9ba6744ba8b36895700565f575359c717f192983f/render_2014-05-09_1234_kinect_front.png" data-mid="58791611" border="0" src="https://freight.cargo.site/w/1000/i/126d5db014d4ca8bd293aea9ba6744ba8b36895700565f575359c717f192983f/render_2014-05-09_1234_kinect_front.png" /> <img width="1280" height="800" width_o="1280" height_o="800" data-src="https://freight.cargo.site/t/original/i/70b0f4e6eecd4256cb274124fe88c004a93c59b309b1c93c9297d62dc4b02af9/render_2014-05-09_1234_kinect_side.png" data-mid="58791612" border="0" src="https://freight.cargo.site/w/1000/i/70b0f4e6eecd4256cb274124fe88c004a93c59b309b1c93c9297d62dc4b02af9/render_2014-05-09_1234_kinect_side.png" /> We designed the shape of the waves to hide directional speakers above the touchscreen so that viewers could listen to a video about Jimmy’s life if they were standing directly beneath <img width="1024" height="768" width_o="1024" height_o="768" data-src="https://freight.cargo.site/t/original/i/b8ba277a84df69b1fda1257e0bd5833d19a78e0fd7ff0fb8fd2f5ab14f407788/detail_speakers_camera2.png" data-mid="58791676" border="0" src="https://freight.cargo.site/w/1000/i/b8ba277a84df69b1fda1257e0bd5833d19a78e0fd7ff0fb8fd2f5ab14f407788/detail_speakers_camera2.png" /> <img width="1280" height="800" width_o="1280" height_o="800" data-src="https://freight.cargo.site/t/original/i/ab2f7ed546a0be22b7dfddb46f0d366b2f1d836131819915040cfa18a6aba3a6/render_2014-05-09_1234_TOP.png" data-mid="58791616" border="0" src="https://freight.cargo.site/w/1000/i/ab2f7ed546a0be22b7dfddb46f0d366b2f1d836131819915040cfa18a6aba3a6/render_2014-05-09_1234_TOP.png" /> Technical illustrations of the final design dimensions and placement of technology components <img width="3195" height="2372" width_o="3195" height_o="2372" data-src="https://freight.cargo.site/t/original/i/73da51df004b87fd1f9c461c009aa991a82f457f0a83c5ed644f0ec1d531a387/TechRenders_LEDs_front-02-01.png" data-mid="58793936" border="0" src="https://freight.cargo.site/w/1000/i/73da51df004b87fd1f9c461c009aa991a82f457f0a83c5ed644f0ec1d531a387/TechRenders_LEDs_front-02-01.png" /> <img width="3195" height="2372" width_o="3195" height_o="2372" data-src="https://freight.cargo.site/t/original/i/bc537512e44ee37b5aba0f52acfc7759314283494486b1003ef7ffd905bf75ff/TechRenders_LEDs_side-02-01.png" data-mid="58793937" border="0" src="https://freight.cargo.site/w/1000/i/bc537512e44ee37b5aba0f52acfc7759314283494486b1003ef7ffd905bf75ff/TechRenders_LEDs_side-02-01.png" /> As a collective specializing in art and technology, we felt confident researching, designing and sourcing technical components. However, engineers and metal fabricators we were not. To design, fabricate and install the metal frame, we worked with Sheet Metal Alchemist, a design build firm that also worked out of Autodesk’s Pier 9 Workshop. Sean Cusack of Sheet Metal Alchemist developed CAD drawings and renderings to ensure that the structure we were building could withstand earthquakes or the possibility of people climbing on it. We also got these drawings stamped by a certified structural engineer. <img width="1920" height="975" width_o="1920" height_o="975" data-src="https://freight.cargo.site/t/original/i/c152cc04126e8327d3dacacde749e068d6d08b363e8923e92496219ff8f8aec5/1.jpg" data-mid="58794924" border="0" src="https://freight.cargo.site/w/1000/i/c152cc04126e8327d3dacacde749e068d6d08b363e8923e92496219ff8f8aec5/1.jpg" /> <img width="1920" height="975" width_o="1920" height_o="975" data-src="https://freight.cargo.site/t/original/i/b39ed67f1d0ed8d75ac72ebfe14156a2d11860a2db2a0e35e73851812f737695/2.jpg" data-mid="58794925" border="0" src="https://freight.cargo.site/w/1000/i/b39ed67f1d0ed8d75ac72ebfe14156a2d11860a2db2a0e35e73851812f737695/2.jpg" /> <img width="1920" height="975" width_o="1920" height_o="975" data-src="https://freight.cargo.site/t/original/i/fab406a52ca3b7702b8c2004c6dce92a6218ba02d833721eeda32124fa0cb3e2/3.jpg" data-mid="58794926" border="0" src="https://freight.cargo.site/w/1000/i/fab406a52ca3b7702b8c2004c6dce92a6218ba02d833721eeda32124fa0cb3e2/3.jpg" /> <img width="1920" height="975" width_o="1920" height_o="975" data-src="https://freight.cargo.site/t/original/i/4d68d5382180420f301aa1a8a9b9a8c42b5f13b2d3426b4b2a6f9c7e20468c65/4.jpg" data-mid="58794927" border="0" src="https://freight.cargo.site/w/1000/i/4d68d5382180420f301aa1a8a9b9a8c42b5f13b2d3426b4b2a6f9c7e20468c65/4.jpg" /> Early CAD renderings by Sean Cusack of the steel structure behind the waves Selected structural drawings by Sean Cusack submitted to the Port of San Francisco <img width="3300" height="2550" width_o="3300" height_o="2550" data-src="https://freight.cargo.site/t/original/i/95772e054cdb734bd3b9d3adb1f034e448c938a6ef02af6aed67d178746118c8/ribbons_assembly_p3.jpg" data-mid="58795617" border="0" src="https://freight.cargo.site/w/1000/i/95772e054cdb734bd3b9d3adb1f034e448c938a6ef02af6aed67d178746118c8/ribbons_assembly_p3.jpg" /> <img width="3300" height="2550" width_o="3300" height_o="2550" data-src="https://freight.cargo.site/t/original/i/0ccfc199fcfd09b4c81ce4100ba7b01af912d0e2b0c68ef13b47e6818b00dff4/ribbons_assembly_p6.jpg" data-mid="58795618" border="0" src="https://freight.cargo.site/w/1000/i/0ccfc199fcfd09b4c81ce4100ba7b01af912d0e2b0c68ef13b47e6818b00dff4/ribbons_assembly_p6.jpg" /> <img width="3300" height="2550" width_o="3300" height_o="2550" data-src="https://freight.cargo.site/t/original/i/3316f1511e252836c35357cd0ac22d43d33d3e15a374dad587ae624f530dc0df/ribbons_assembly_p8.jpg" data-mid="58795619" border="0" src="https://freight.cargo.site/w/1000/i/3316f1511e252836c35357cd0ac22d43d33d3e15a374dad587ae624f530dc0df/ribbons_assembly_p8.jpg" /> Developing content for the touchscreen In developing our ideas around what would go on the touchscreen, we decided that an obvious place to start might be a timeline about Jimmy’s life. He had no formal education beyond 5th grade, leaving school to support his family at a pie factory where he actually led a walkout at the age of 13. He then joined the Merchant Marines at 15, lying about his age in order to sign up. After World War II, he settled in San Francisco, working as a longshoreman and joined the International Longshoreman Workers’ Union (ILWU). I spent a lot of time at the ILWU’s archives going through materials about James R. Herman. We wanted to include photos of Jimmy throughout his life, alongside milestones and events that had been important to him personally, as well as politically. It was humbling to learn more about both who Jimmy was as a person, and about San Francisco during a time when unions were dominant political powers and longshoremen worked the docks along the Embarcadero. It seemed to evoke a different era when the city was known more for progressive politics than the tech industry. Jimmy Herman around the time he moved to San Francisco<img width="1822" height="1181" width_o="1822" height_o="1181" data-src="https://freight.cargo.site/t/original/i/b9038d060db5b3f3349a7a5febaa641efa234ac514f2b08ee69451f8374732c5/12.png" data-mid="58986796" border="0" src="https://freight.cargo.site/w/1000/i/b9038d060db5b3f3349a7a5febaa641efa234ac514f2b08ee69451f8374732c5/12.png" /> <img width="2957" height="3628" width_o="2957" height_o="3628" data-src="https://freight.cargo.site/t/original/i/1812c287dd8f9cefaf652c2aa7c1aa820b7c1c033a6595bfc566468ff3d5fd55/13.png" data-mid="58986798" border="0" src="https://freight.cargo.site/w/1000/i/1812c287dd8f9cefaf652c2aa7c1aa820b7c1c033a6595bfc566468ff3d5fd55/13.png" /> <img width="1280" height="1047" width_o="1280" height_o="1047" data-src="https://freight.cargo.site/t/original/i/5c9a70e77e56d8621298f6bb119a4665ae41bd64491aacd7d52c22b35bf7303a/13-alt.png" data-mid="58986797" border="0" src="https://freight.cargo.site/w/1000/i/5c9a70e77e56d8621298f6bb119a4665ae41bd64491aacd7d52c22b35bf7303a/13-alt.png" /> Archival photos of the San Francisco Embarcadero around the time Jimmy came to SF when it was an active port In addition to the timeline, we also wanted to create a way for the touchscreen to connect with the larger interactive light installation. James R. Herman, despite his lack of formal schooling, was a prolific reader and wrote many inspiring speeches and articles over the years. We created a mode on the touchscreen called “What Do You Stand For?” which highlighted six areas of Jimmy’s activism. Along with librarians at the ILWU archives, and members of the James R. Herman Memorial Committee, we selected inspirational quotes from Jimmy that would appear on the larger light sculpture if a viewer selected them from the touchscreen. <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/52fb79701466baba753a30b15c2683ada8501c84c595f9330f9f1764b62aebc9/jrh_touchscreen_issues_home.jpg" data-mid="52823025" border="0" src="https://freight.cargo.site/w/1000/i/52fb79701466baba753a30b15c2683ada8501c84c595f9330f9f1764b62aebc9/jrh_touchscreen_issues_home.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/4123f4ef03ae0e3035d2fe1894c789e0e59101b42c5445255fdcb5c1518f27ee/jrh_touchscreen_2014-06-30_0002_WDYSF---quote.jpg" data-mid="58987619" border="0" src="https://freight.cargo.site/w/1000/i/4123f4ef03ae0e3035d2fe1894c789e0e59101b42c5445255fdcb5c1518f27ee/jrh_touchscreen_2014-06-30_0002_WDYSF---quote.jpg" /> <img width="1920" height="1080" width_o="1920" height_o="1080" data-src="https://freight.cargo.site/t/original/i/17af67ee88ccf25cd71ef88acc30ff24875fb21aa0cb0d3a8067288292ce3b9d/jrh_touchscreen_2014-06-30_0003_WDYSF---issue.jpg" data-mid="58987620" border="0" src="https://freight.cargo.site/w/1000/i/17af67ee88ccf25cd71ef88acc30ff24875fb21aa0cb0d3a8067288292ce3b9d/jrh_touchscreen_2014-06-30_0003_WDYSF---issue.jpg" /> The interactive mode of the touchscreen that allows viewers to select quotes to appear on the larger sculpture Making particles into waves and text with custom software We selected the following quotes to be displayed on the LED sculpture, formatting each quote to occupy the correct wave and its dimensions. The custom software of particles was programmed so that particles were attracted to white pixels, so we used png files of the quotes as masks for the particles to fall into place on and around. Quotes by James R. Herman displayed on the larger LED sculpture. We laid the quotes out as png masks. <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/9333159872a0ea5747f0b455105293afebbe4e32ec00ceaa99f476f374177adf/1.png" data-mid="58988275" border="0" src="https://freight.cargo.site/w/480/i/9333159872a0ea5747f0b455105293afebbe4e32ec00ceaa99f476f374177adf/1.png" /> <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/427f499e7832cb6fd1005ea56f59532a58ccfb1c1c09a61df387f42a3758db5c/2.png" data-mid="58988276" border="0" src="https://freight.cargo.site/w/480/i/427f499e7832cb6fd1005ea56f59532a58ccfb1c1c09a61df387f42a3758db5c/2.png" /> <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/fedf65e06601b56031d6a31ea56f06c0290058696cb5fb5021822db39dfed771/3.png" data-mid="58988277" border="0" src="https://freight.cargo.site/w/480/i/fedf65e06601b56031d6a31ea56f06c0290058696cb5fb5021822db39dfed771/3.png" /> <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/b85514b74bdc58c13288d8ef83e48540370b17f83bac9cb39369b3ae4a0408c3/4.png" data-mid="58988278" border="0" src="https://freight.cargo.site/w/480/i/b85514b74bdc58c13288d8ef83e48540370b17f83bac9cb39369b3ae4a0408c3/4.png" /> <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/98f2343cd366ac955a3052fc31242d9ad48400cc86bbf34540c649a90adfbcd1/5.png" data-mid="58988279" border="0" src="https://freight.cargo.site/w/480/i/98f2343cd366ac955a3052fc31242d9ad48400cc86bbf34540c649a90adfbcd1/5.png" /> <img width="480" height="144" width_o="480" height_o="144" data-src="https://freight.cargo.site/t/original/i/b6b30d09e0dacf57e728eef5bf6c1a5aded9b061fe181b02b93c2fc6a7872df0/6.png" data-mid="58988280" border="0" src="https://freight.cargo.site/w/480/i/b6b30d09e0dacf57e728eef5bf6c1a5aded9b061fe181b02b93c2fc6a7872df0/6.png" /> <img width="803" height="800" width_o="803" height_o="800" data-src="https://freight.cargo.site/t/original/i/4418377ef88319b340acf52dd8a234865c07ab01465008c15b9947fc7ca65126/jrh-software-debug.png" data-mid="58989605" border="0" src="https://freight.cargo.site/w/803/i/4418377ef88319b340acf52dd8a234865c07ab01465008c15b9947fc7ca65126/jrh-software-debug.png" /> <img width="803" height="800" width_o="803" height_o="800" data-src="https://freight.cargo.site/t/original/i/0627cb74fca99fc74dd4742cf026ed1717f329f9dd0f96d48ed8c8bd7a61e6e8/jrh-software-quotes.png" data-mid="58989606" border="0" src="https://freight.cargo.site/w/803/i/0627cb74fca99fc74dd4742cf026ed1717f329f9dd0f96d48ed8c8bd7a61e6e8/jrh-software-quotes.png" /> Screenshot of our custom software debug view that allowed us to tweak parameters and watch the visuals that were being sent to the LED panels. The four waves with LED panels were spaced out to take into account the waves without LEDs An image showing a user interacting with the touchscreen to display the quote on the larger sculpture<img width="5184" height="3456" width_o="5184" height_o="3456" data-src="https://freight.cargo.site/t/original/i/aaf2a5c0ddd0942959a991a2ae5f09591dec01ce349ccfbe1167f5541c618659/gh-memorial-housing-quote.jpeg" data-mid="59020789" border="0" src="https://freight.cargo.site/w/1000/i/aaf2a5c0ddd0942959a991a2ae5f09591dec01ce349ccfbe1167f5541c618659/gh-memorial-housing-quote.jpeg" /> Fabricating and installing the sculpture After developing the material design, software and content for the installation, we worked intensely to finish the piece and install it before the cruise terminal opened to the public in September of 2014. Sean and the whole Sheet Metal Alchemist crew were integral in helping us meet our fabrication and installation deadline. One of our main challenges was getting the LEDs we’d ordered working with our software and other tech. They only needed an HDMI input as signal, so we essentially used them as a very large low res monitor. They had their own programmed logic about what order each panel had in the larger configuration, so one of the first tests we ran was to try and make a rainbow gradient go across all the panels. <img width="2048" height="1170" width_o="2048" height_o="1170" data-src="https://freight.cargo.site/t/original/i/288f36acc4daabb2b4e292d5ea268cd19e104858be74dfa38565a5e0d26aa3a0/IMG_4689.JPG" data-mid="59023047" border="0" src="https://freight.cargo.site/w/1000/i/288f36acc4daabb2b4e292d5ea268cd19e104858be74dfa38565a5e0d26aa3a0/IMG_4689.JPG" /> Testing our LED panels, first to determine the proper order of the panels, then to see how video content streams across them once they were attached to the metal frame After staging the sculpture in a warehouse to ensure all the tech was properly configured, we transported each wave to the Pier 27 Cruise Terminal for installation. We had a tight schedule so that we’d be finished before the first cruise ship was set to dock in port, and worked long days on site to get everything installed. We used a small forklift and a lift to install each wave and connect all the cabling. The first time we turned it on and everything seemed to be working happened at magic hour and felt like magic <img width="2592" height="1936" width_o="2592" height_o="1936" data-src="https://freight.cargo.site/t/original/i/156d186066234f01f5ae4c93b6be8e53298700298857ffece1ca465f3d9376f9/IMG_5351_install2.jpeg" data-mid="59023540" border="0" src="https://freight.cargo.site/w/1000/i/156d186066234f01f5ae4c93b6be8e53298700298857ffece1ca465f3d9376f9/IMG_5351_install2.jpeg" /> <img width="2592" height="1936" width_o="2592" height_o="1936" data-src="https://freight.cargo.site/t/original/i/54f68463c2ba2974ffba74a23623736e67a7c7f76cf9dc87255593644e27f745/IMG_5358_install.jpg" data-mid="59023541" border="0" src="https://freight.cargo.site/w/1000/i/54f68463c2ba2974ffba74a23623736e67a7c7f76cf9dc87255593644e27f745/IMG_5358_install.jpg" /> <img width="2592" height="1936" width_o="2592" height_o="1936" data-src="https://freight.cargo.site/t/original/i/ca471ef09a823fdfbe136f8007de74f3c21e9b731f5869ff945a7fde17ad6246/IMG_5392.jpg" data-mid="59023542" border="0" src="https://freight.cargo.site/w/1000/i/ca471ef09a823fdfbe136f8007de74f3c21e9b731f5869ff945a7fde17ad6246/IMG_5392.jpg" /> <img width="2592" height="1936" width_o="2592" height_o="1936" data-src="https://freight.cargo.site/t/original/i/c6784458814d39d274e589a7456a1f83bbbbf6914fe5bf7b369fbb50d2697037/IMG_5403_ladder.jpeg" data-mid="59023666" border="0" src="https://freight.cargo.site/w/1000/i/c6784458814d39d274e589a7456a1f83bbbbf6914fe5bf7b369fbb50d2697037/IMG_5403_ladder.jpeg" /> Opening reception The James R. Herman Memorial Cruise Terminal at Pier 27 opened to the public in September of 2014. In March of 2015, the Tides of Change, the James R. Herman Memorial was officially unveiled to the public. Many friends, activists, politicians and supporters came to commemorate the occasion. Art Agnos, a longtime friend of Jimmy’s and the former mayor of San Francisco gave opening remarks. Video documentation of the opening ceremony unveiling the memorial to the public