Your Name

Project #9 Kitchen Data Visualization

Description

For this project, I collect for a week the time and duration that I spend in the kitchen. For me, the kitchen is the center of my home. From gathering with family and friends, cooking or chatting, to walking around looking for nothing and sitting at night working on a project. During these times I found myself spending more time in the kitchen, and I wanted to find patterns from through the days. I collected and organized my data on a JSON file. The data was structured in a way that could be easy to access and code. I found that the way that I organized the data on JSON was similar to a CLASS on javascript. I created a visualization of every day in the kitchen. Using the following information: The day (Monday to Sunday) sets the Y-axis on the canvas. The start time sets the X-axis on the canvas The time spending in the kitchen sets the duration, which divided by to represents the size value of each shape. I separate the graphics into two, circles for before noon activities, and squares for afternoon activities. The color of the shapes depends on the size, x, and y values, creating a variety of colors for each shape, but still consistently based on the day.

Instructions on how to read the visualization:

The shapes will appear in order of day and time, one by one with a one-second difference between each other.

Design Process

To create my visualization, I downloaded the collected information located on the JSON file. On the canvas, set a variable ‘myData’ which is my JSON file, and downloaded it in my sketch canvas. Then, set an array for activities, and create a class for activities. My goal in creating the array and the class is to have an organized structure and access to the information of each day. Each day is a key to my dictionary that contains an array of dictionaries… Confusing ah?. The information of my JSON will be the parameters for my data visualization. The array ‘myActivities’ contains the number of dictionaries that I have inside of each day. Each dictionary contains the values of the name of the activity, start time, and duration time in the kitchen. On function Setup, I built the following: Access to the dictionary (the day’s names and day information in my JSON data Built padding between the Y-axis (between one day to another) Access to the array and pushing the array in the instance of the class Created the function that works as a callback, going through the length of the array, and draws one by one each of the shapes of the data visualization. This function is part of the setInterval that loops the information and animates the visualization.






























Reflection

JSON file organization will affect the way I code. I found effective to organized my code through classes or functions, so that I could access to the information and create the visualization.