Assignment 4: Data Visualization

Concept

For this assignment, I chose to try and do either a line or bar graph based on a set of data. I retrieved a data set from datahub.io, it was a data set showing the mean global temperate yearly from 1880 to 2016. I referenced the class example, The Coding Train, and various other YouTube videos to help me.

Code Highlight

let dataMin, dataMax = 0;

function minMax() {
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) > dataMax) {
      dataMax = table.getNum(i, 1);
    }
  }
  dataMin = dataMax;
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) < dataMin) {
      dataMin = table.getNum(i, 1);
    }
  }

  print("max value " + dataMax + "min value " + dataMin); // checks if finding the min and max value works
  
}

This part of my code finds the maximum and minimum average global temperature. To make sure it worked, I printed the max and min value.

Image

No image

// IIM Michael Shiloh
// October 4, 2022 Assignment 4 Data Visualization
// Abigail Mata-Hernandez

// Description: This code attempts to create a data visualization about annual global temperature means in celcius from 1880 to the present. My goal is to create either a line or bar graph showing the how the global temperature changes over time.

// I chose this data set randomly from https://datahub.io/core/global-temp

// Inspiration: Class, The Coding Train,

let table;
let numRows, numCols;
let date = [];
mean = [];
let diagramX, diagramY; // x and y coordinates

function preload() {
  table = loadTable("annual_csv.csv", "csv", "header");
}

function setup() {
  createCanvas(400, 400);
  background(220);

// print(table); // check if loads table

  numRows = table.getRowCount();
  numCols = table.getColumnCount();

//print("rows:" + numRows + "cols;"+ numCols) check number of rows and columns

// load data

  for (let r = 0; r < table.getRowCount(); r++) {
    date[r] = table.getString(r, 0);
    mean[r] = table.getNum(r, 1);

// print(date[r] + " " + mean[r]) check if I get the date and mean, the date  points needed on the graph
    
  }

  // const name = table.getString(r, "Source");
  // const year = table.getNum(r, "Year");
  // const x = random(0, width);
  // const y = random(0, height);
  // text(name, x, y);
  // console.log(name);
  // the above code was a different attempt at drawing the graph using a different way but I did not understand it and stopped
  
  minMax(); //minMax function found below
}

function draw() {
  background(240);
  
  diagramX = width/2;
  diagramY = height/2;
  
 // When I tried to actually use the points to visualize the data is when I got stuck. I tried to follow videos such as https://www.youtube.com/watch?v=hokTcLVtZs8 but it was very different than what I was doing
  
}
  
  

let dataMin, dataMax = 0;

function minMax() {
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) > dataMax) {
      dataMax = table.getNum(i, 1);
    }
  }
  dataMin = dataMax;
  for (let i = 0; i < numRows; i++) {
    if (table.getNum(i, 1) < dataMin) {
      dataMin = table.getNum(i, 1);
    }
  }

  print("max value " + dataMax + "min value " + dataMin); // checks if finding the min and max value works
  
}

It wasn’t until I got to the actual data visualization part where I had trouble. The code before attempting to draw the line or bar chart had already taken me quite some time, more than I would have liked. I thought however that because I already loaded and figured out how to get some values, it would be easier to get the rest of the values I needed and plot them on a line graph. I know there is a solution which is why I kept trying, but I kept failing.

Reflection

I don’t think looking at just examples or videos is helping me. I tend to try and do almost the exact same thing as the examples, but the code that I had made on my own from what I understand is obviously too different to fit into what the examples do. I plan on taking more time to practice coding outside of the assignments assigned.