Working With Data, Data Formats

Please note: to use these files locally on your own computer, you will need to load them from an address starting in "http://" rather than "localhost". The .csv file will not load in a browser without the proper address.
You can do this by starting a local server on your computer. We'll cover this process, and install node.js in class on March 25. Feel free to get started with node.js in the meantime if you already have it on your machine, or you are familiar with the command line. You can also start a local python server without having to install anything, by following the instructions at the link above.
If you're already familiar with using local server instances in Stack applications like MAMP, WAMP or XAMP, your htdocs folder in any of these should work for hosting this file, and loading the .csv into the sketches, as well.

a JavaScript object

JavaScript can work with data in multiple formats. We've looked at how single variables in JavaScript can hold strings, numbers, and boolean values (true/false). Objects in JavaScript are also data, in a very specific format of "key-value pairs".

p5.js, and many other libraries also have functions for dealing with data in different kinds of formats you might find it in, like .CSV or "tabular data"

Table Data

The table above is .CSV (comma separated value) data. When viewed in a program like excel or google sheets we tend to format it in tables for human readability. Excel and Google can read and export .csv files. When a computer reads it, it prefers to look at tabular data like this:

CSV Data

NOTE: These two files above show, and are, the same thing. The p5 examples in this page are adapted from Allison Parrish's p5.js CSV tutorial and work with this .csv file which lives in the "Data_PartI" folder. P5 has methods for loading and working with CSV data: loadTable().

Example 1: Plotting the values in the "TEMP" column over time. The value in each row (representing time) in the table of data above, for the TEMP column, plots a point in the canvas below.

Example 2: As above, plotting the values in the "TEMP" column over time. But this time we are scaling the range of temperatures to the height of the canvas (see lines 84, 85 and 95 in data_formats.js).

Example 3: This plots two columns of values. See the function colValsMinMax() on lines 127-133. This function creates an object containing the column name and min and max temperature for that column. It is run on lines 147 and 152, to create objects for the pm2.5 and temp columns. These objects and the underlying data are referenced in mapping the pmXpos, pmYpos and tempXpos, tempYpos to get the values to map to the graph at each point.