# 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 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

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.