CPD Final Project (WCS): Data Visualization – Interactive Map – Jingyi Zhu

Project: Data Visualization – Interactive Map

Date: 05/22/2019

Background

WCS is working on a research about juvenile sand tiger sharks in Great South Bay. Great South Bay is an ideal nursery ground for sand tiger sharks and juvenile sand tiger sharks migrates to Great South Bay as their summer location. Sand tiger sharks are vulnerable species according to the conservation status. They usually stay in shallow waters (<20 m) during the day.

WCS would like to better understand sand tiger sharks and Great South Bay as their habitat from the research. Their goal is to make the marine world around New York City visible to the citizens.

Idea and Concept

My final project idea is to visualize the sand tiger shark detection data that WCS provided on an interactive digital map. In this way, more information can be extracted from the data and the data can be more easily understood.

The datasets I received are of two juvenile sand tiger sharks in Great South Bay, New York. The sharks are tagged with signal emitters and the detection are done by signal receivers in fixed locations. Therefore the datasets are only about shark occurrences at each receiver.

Since WCS also would like to see what dataset overlapping can tell us about Great South Bay, I came up with an idea of overlapping human activity data with shark detection data to see how humans and sharks coexist in Great South Bay. I did some research and found that potential threats to sharks in general are by-catching and noise pollution which are related to vessel activities in addition to commercial fishing. Therefore I decided to incorporate vessel position data into the map.

I based my data visualization ideas on the datasets and WCS’s objectives. My goal of the data visualization project is to make the huge datasets visible and understandable for non-professional users, thus helping them to learn about sand tiger sharks in Great South Bay.

Process

1> Data Scraping and Processing

I first scraped data from Robots4Whales with Python Beautifulsoup module. But after studying the scraped data, I found that all the data points are at the same location, thus it is not suitable for visualization on a map. 

I downloaded vessel position data from marinecadastre.gov. Then I cleaned the vessel data and the shark data and converted them into json files with python.

As I prototype with the josn files, I continued to reprocess the data into structures that better suit my algorithms for data visualization.

2> Map Making

I used HTML, CSS and JavaScript to make the map. I first drew squares on the map to represent receiver locations.

i) Animated Map

I first made an animated map to look at the movement of every data point, so as to briefly understand the relationship between shark movements, vessel movements and time. One unexpected effect is that when animated, the map made obvious the entrance point of the sharks and the speed of each movement, and clearly show that sharks stay around one place for a long time.

ii) Static Map

My ideas of making a static map are to draw circles of different sizes to represent the cumulative occurrences and to draw translucent lines to represent the sharks’ simplified movement from one receiver to another so that the lines can layer upon one another to create the effect of a heat map to show the frequency of sharks taking each path and staying in each area. When the users choose to show the circles, they can hover on the receivers and read the exact number of occurrences.

I chose to visualize the vessel positions as dots instead of drawing vessel routes because the data points are dense enough to show the routes and drawing lines make the whole picture unreadable.

iii) User Interface

For the user interface, my idea is to make it as intuitive as possible. I made a side bar for users to show or hide the chosen datasets. I also made a timeline where users can choose the time range by month. Both control palettes only appear when the users hover on either side of the window. The background color of each choice are set to the corresponding color on the map and I used gray scale to distinguish chosen from unchosen.

Both animated and static maps have a user guide button and an explore button. The user guide automatically appears when users first open the map. When the explore button is clicked, screenshots of my findings about the datasets will appear, which is intended to show users some examples of the useful information hidden in the map and to encourage them to explore more.

In the animated status, users can use a drag box to adjust the speed of animation or to pause it.

iv) Introduction and Credits Page

In order to provide users with the basic background knowledge, I made an introduction page which briefly introduces my data visualization ideas, Great South Bay, sand tiger sharks and WCS’s shark detection methods, accompanied with links to more resources. I also put links to the two maps on the introduction page. All the credits are listed on the credits page.

Challenges and Further Developments

The available datasets are limited and many of the vessel datasets are incomplete. Thus, it took me more time than expected to extract the useful data. The shark datasets are not the best ones for visualization on a map since the receivers don’t follow the sharks but only wait for the sharks to come.

I didn’t receive photos or videos of the sharks from WCS, but I would like to include more media into the maps if available so that the maps can be more informative and educational.

The algorithms and data structures that I used to build the maps are not efficient enough, so it results in heavy computation. I would like to solve this issue in the future.

CPD: Final Project (Whale Walk) – Ann(Candy Bi)

Link: https://drive.google.com/open?id=1EwXfkyi-ZoXZtg6_UaRKJT_4vE0iwg6g

Date: 05.21.2019

Processor: Ann Chen

Partners: Maike Prewett

Description:

The Shanghai Whale Walk is an educational opportunity for participants to better visualize the North Atlantic right whale, its undersea habitat, and the threats it faces, using interactions with the surrounding urban landscape as a measuring tool. It is mapped on Shanghai lujiazui skywalk from Lujiazui Station(exit 1) to Lujiazui Central Green.
It is a demo for the Wildlife Conservation Society, and meant to eventually be adapted to the city of New York and its landmarks.
It runs over thirteen minutes long.

Continue reading “CPD: Final Project (Whale Walk) – Ann(Candy Bi)”

CPD Final Documentation | Sabrina Goodman

For our final project, Ashley, Vicky, Theresa, and I worked with the Sapporo Upopo Hozonkai Preservation Society to develop a website that is both functional and sustainable in the long-term. The website is comprised of seven main pages: Home, About, Events, Identity, Culture, Game, and Contact. The Home, About, and Contact pages we deemed necessary for any website. The Events, Identity, Culture, and Game pages were specifically tailored towards the Preservation Society.

The purpose of the project was to produce something functional, which they might continuously use and provide links to, and something sustainable, which they might update in the future without additional help from our class. I assisted with some design elements of the website as well as the titles of the main pages, however my primary role was to produce content for the Identity page based on the interviews we conducted at NYU Shanghai. I created five short videos based on the interviews as well as the provided footage given to us by the group. I also incorporated some relatively trendy music choices into the piece in order to provide a modern feel to the videos. I had a lot of trouble beginning the editing process, as I had to sit with a friend outside of class for about three hours straight to translate each interview. Apart from that, there weren’t a lot of challenges during the editing and post-production processes.

Throughout this project, I realized that communication is key, not only amongst team members, but also amongst those partner organizations that you decide to work with. Translation during the interviews at NYU Shanghai was quite hectic, as Roslynn was the only individual present who spoke fluent Japanese and we had to share amongst both Ainu teams in order to translate what was going on. Apart from that, I think the development of the project went rather smoothly. Not much changed from our initial project proposal, apart from perhaps the titles of our pages. Rather than “Textures of the Ainu” and “Sounds of the Ainu,” we created overarching pages with tabs underneath each of these themes. I edited the interviews down with the preferred content based on in-class feedback, and also ended up incorporating a lot more provided footage in order lessen the serious tone of the videos. I felt the project was quite successful as a result of the changes we made based on feedback. The one thing I would change is the color scheme, but as it was chosen by the Preservation Society, it was necessary to work with their preferences. But overall I think the project worked out very well.

CPD: Final Project + WCS Interactive Website – Carlo (Chen)

Professor Ann Chen 

Carlo Gabriel 

Final Project WCS – Interactive Website 

Monday, May 20th, 2019 

Project Description 

Trashley’s Journey is an interactive website that features a fictional character of a trash bag called Trashley. Just like her any other trash bag fellows, Trashley is there to help human carry their stuff before she ends up floating around the harbor of New York City.  Throughout her journey exploring the depth of the sea, Trashley encounters many other sea creatures she has never met before in the above-ground world including Prince Louis who just comes back from a 60-year-long trip in Europe. Performing other characters such as Baggy the rookie, Trashley’s Journey will take kids of 6-10 years old on a journey to learn about marine creatures, plastic waste and more. Trashley’s Journey hopes to inspire the younger generation to help reduce future plastic waste while educating children on the impact of human activities on marine lives. 

Purpose

The purpose of this interactive website is mainly to help kids of 6-10 years old understand the current situation of sea world as well as learning about sea creatures. To provide a fun learning experience, the website incorporates a scroll-up/down feature to navigate through the depth of the sea (website). As they explore each section of the website, they can learn different facts pertaining to sea creatures, plastic waste, and solution to reducing plastic waste in the sea. The goal of this interactive website is to raise their awareness about sea pollution and hopefully drive them to take actions to save our sea. 

Roles 

At the beginning of the project, we all helped each other build basic idea. As we solidified our idea and planned out the project, I started to focus more on the graphics part of the website. I helped the team create characters and draw them using Adobe Illustrator to meet our desired looks of each character. I also made some changes based on the feedback from my classmates and professor.  Below are the roles of each member. 

Story Boarding – Sebastian Lau

Research – Katherine Li

Graphic – Carlo G

Website Coding – Hope Myers

Process

    1. Brainstorming
      • First, we brainstormed to come up with ideas. After we had a few ideas, we started to filter out the ones that we thought were not feasible and doable to do given the time and our technical skills. 
    2. Story Boarding and Research
      • After we derived the idea, we started to create a rough storyboard to kind of have a starting point and what to expect from each of us. After that, we began to break down which parts need to be done first and which parts can be done later. Meticulous research was also done at this point to support our preliminary facts. We also researched as to the species of marine creatures that are often found in NYC harbor for our next process, character building. 
    3. Character Building
      • After creating a rough storyboarding, we began to create the characters for the website. We brainstormed their personality and appearances. This part is really crucial for me as character building determined my work in drawing their reactions for the story. The characters were assigned based on the research done in the previous section. 
    4. Graphic
      • I began to draw all the characters. What I did first was to make a sketch of each character. After that, I started drawing the first look of the characters and adding some details. After that, my team and I presented our work to receive feedback then make some adjustments based on the feedback. Below are the characters that I drew after multiple feedback from my teammates, classmates, and professor.
        •    
    5. Website Development
      • As for website development, we actually already had the rough version of the website ready right after the storyboarding process. We developed the website throughout the process. 
    6. Final product
      • Finally, we managed to present our final product after about 7 weeks of work. 

Below is the link to our website demo: 

Trashley’s Journey

Challenges 

Throughout this project, each of us encountered different challenges. As for me, my challenges came in a form of understanding the features of Adobe Illustrator as I was not quite familiar with that. After watching a few tutorials, I kinda got myself familiar with its features. One feature that I really like is the layering feature. This feature helps me put every drawing in layers. I used this feature a lot when I colored my drawings. So I made the outlines of the drawings first and group all them together and put them all in a different layer from the color ones. That way, I can color the drawings without having to worry that my color would go beyond my outlines. 

What I’ve learned 

From this project, I learned a few new things. First off, I learned about WCS’s existence and works in preserving marine creatures as well as tackling sea pollutions. Their works and projects have helped me understand marine creatures and the way they behave in a polluted environment. One example is of how turtles often mistake plastic bags for jellyfish. I also learned many new facts about plastic waste in our sea such as a large number of microbeads in the sea that is damaging the existence of marine creatures.

Second off, I got to work with amazing teammates from different classes. I learned how to bring together different ideas and tailor them into one polished idea. I also learned to pick up good communication with my teammates and WCS, to make sure that every work is aligned with what WCS expects from us and to make every group member be on the same page. 

Final Project Documentation: Trashley’s Journey – Sebastian Lau

Our project was an interactive comic about trash and how it affects sea wildlife. We wanted the comic to appeal to younger ages because we believed that it would be more impactful if we nudged the next generation in the right direction since they are more impressionable. Furthermore, they have more time to implement these practices. The interactive comic featured a trash bag named Trashley who would explore the sea and encounter different pieces of trash or animals. We thought characters that users could identify with would help pass on the message we wanted to convey and make it more palatable. 

My role was primarily to storyboard and help with the script. I wrote out the general structure of the story first so that we could draft up characters so that Carlo could draw them. I also wrote some preliminary lines for the script so that they could get an idea of what each character was supposed to represent and how they contributed to our story and idea. The storyboards would help people who were unfamiliar with the project understand what we were trying to achieve and how we were going to achieve it. I included things like what each character was meant to say (in terms of the message) and the website’s functionalities. I feel like this in-depth understanding of the website and story was instrumental in creating the presentation. 

One of the challenges was to create the storyboard as I had a different perception of how it was meant to be. I think once I got the hang of it the storyboards were created quite quickly. Another challenge was a bit of miscoordination. Sometimes characters would be added to the website and then I would have to retroactively add them to the storyboard which I guess wouldn’t really matter for WCS, but made it difficult for me since I am still not very proficient in InDesign. 

I realized how early on we should start working and even more important how important a framework or outline is. I feel like a general framework could have helped our group as a whole. It did work in the first couple of weeks when we first made it, but I guess we forgot to make another one and as a result, I personally felt a bit confused on what could or should have been done during those weeks. While I don’t think we should have made an overarching outline for the whole semester, I do think that making another one after we finished the first one would have been helpful. 

I don’t think our project really changed from our initial proposal. The main ideas of what we wanted to do were there, Easter Eggs, interactive comics, and a trash bag as the main character. All in all our final product was more or less what I, and I believe the rest of the team, envisioned.