ICM Media Final Project -First Part
Visualizing Hurricane Data
This sketch is a work in progress for the final project of ICM media. In it, I visualize the strength of the winds of several storms from 2016 and 2017.
Process
Introduction
In this project, I want to tackle something that I’ve wanted to try for a long time: data visualization. Although this is my first programming class, I would like to continue to use data in the future and I want to start to understand how to do it. For this exploration, I am using a data set of tropical storm systems, mostly hurricanes.
CSV tabular data
I explored a CSV data set of Hurricanes of 159 storms samples from 2016 and 2017, originally sourced from a larger data set (ibtracs.last3years.list.v04r00.csv) from NOAA /Index of /data.
But before starting to work with the hurricane data I first followed Dan Shiffman’s video tutorial about CSV files.
After a long period of trial and error, I managed to see the table and manipulated it. One of the things that confused me during this process was the use of async, await, fetch and the fact that the tutorial is inside the HTML.
Reduce the size of the sample
After working with the tutorial I started to work with the hurricanes data, but first I reduced the size of the table because of the limited space of the storage on the P5 WebEditor, and I wanted to keep working in the editor, just because I could verify if the code is working easily. Some hurricanes can have more than 150 rows of readings of different information such as wind, pressure, location, direction, and others.
Starting with the table
After getting the table and get each row of the table (steps from the tutorial), I have to start to understand which are the steps that I had to do to be able to get data that I need. For this exercise, I had to write some of the steps and actually struggled to visualize the steps that I have to do.
After getting all the names of the table rows (with repetition and Not_name storms) added into an array and then: get all the names into a new array without repetition, and eliminate NOT_NAMED storms (tropical storms are given names when they display a rotating circulation pattern and wind speeds of 39 miles per hour).
Reusing previous code
For this sketch, I am creating 159 continuous buttons each one a few pixels thick. For the creation of buttons I used and modified the code for a buttons class that I had for a previous assignment.
However, my original idea with the creation of buttons was to make an array of the section of the table of each hurricane and put it inside that button. When I tried this, nothing happened in the code and concluded that the process has to be too big. So, I decided to call the array of the hurricane, just when it is needed, in this case, when the button is pressed. This worked fine.
Problems and confusion
It is hard to remember when I encounter a problem and how I solve it. Usually, I have a bunch of step by step problems that I manage in different ways (searching on the internet, asking questions, guessing, or just looking).
But I’m still confused about the use of the async function, await and fetch.
Visualization
I am not sure yet how I want to visualize the hurricanes. But so far I am thinking of creating an interface to interact with different values per hurricane. The person would see one storm at the time and see the evolution of the system. Probably the visualization would not have the traditional circular shape. I’ve started to experiment with vectors.
