☰
Navigation :

/—
title: «Data and Javascript»
description: «»
weight: 0
alwaysopen: false
—/

Today we’ll cover two main concepts through a mix of activities at the computer:

  1. Seeing data all around
  2. Making websites interactive using JavaScript

Seeing data all around

Most people end up working with «data» because they have stories to tell or problems to solve.

Those stories or problems mostly start out as a question, for example «How many of my friends like this type of food?» or «How do people in my community access the internet?»

In order to answer these types of questions, lists of text, numbers, and images could come in helpful: you could take photos of all the different ways people access a web site for example, or ask all your friends what they like to eat and record what everyone says.

Based on the Food Servies (?) game, a question could be:
- How many people perferred foraged foods?
- How healthy was everyone in a particular round?
- How many total purchases did shoppers make?
- … what are some other questions about the game that you all had??

So, to help answer these questions we need to work with data, but what is it exactly?
Let’s take an example of a recipe, what kinds of things can we say about a recipe?
- It is used by people to prepare food
- A recipe has a name
- It might be made mostly on certain holidays
- It has a set of ingredients
- It has instructions for ways to prepare food: chopping, cutting, stirring
- It might be the favourite of some peoples’ but not others

Just like a recipe, we also have data that people could attach to us:
- a names
- when were born
- how old we are
- hair colour
- how many siblings we have
- a favourite foods!

From the above we see two major types of data: Qualitative and Quantitative

Qualitative data (often text and images) is «everything that refers to the quality of something: A description of colours, texture, and feel of an object, a description of experiences, and interviews are all qualitative data»

Quantitative data (often numbers) is data that refers to a number, e.g., the number of ingredients, the price, a score, the size

Activity: Seeing data as categories 🏃🏾‍♀️

[Introduce data set from game, ask people to identify «categories» for the data from above]

[Category] [Descriptor]
Player Number of players

Activity: Data for humans versus Data for computers 💻

We have been mostly talking about data that is easy for humans to understand, rather than data that is easy for computers to understand.

Computers like «structured» data that is machine-readable as opposed to humans, who also can use «unstructured» data like above. What is the difference?

A sentence with all the data embedded in it:

[TODO: Change this!]

One of my favourite recipes is Pumpkin Pie, it is usually made in Canada using the fall, traditionally during the harvest season, and sometimes at special holidays including Canadian Thanksgiving and Christmas. To make pumpkin pie the main ingredients are a pumpkin that is roasted, pureed and strained, milk, many spices including cinnamon and nutmeg, a pie crust made with flour, shortening or butter, salt, and water. The crust has to be made first, rolled out and placed in a pie plate, with the pumpkin filling all mixed together until smooth and poured overtop. Then it is put in the oven for a long time to cook.

This sentence has all of the details about recipes we talked about above, but not in any particular order, and all of the details are mixed together. We are able to read it and pick out the details that are similar, but for a computer it would be more difficult! Other things that are difficult for computers to «read» or interpret the details in are images.

So if we want to share the data in a way that computers can understand it, we have to translate those details into formats thats are easy for computers to interpret:
- A SPREADSHEET OR TABLE, usually with the file format of a .csv «comma-seperated values» (CSV) or .xls Microsoft Excel Spreadsheet.
- A LIST OF KEYS AND VALUES, can have many formats, but a popular one is .json or «JavaScript Object Notation» (JSON)

How about we translate the data from the game using the categories we have above, into a form that will be easier for computers to interpret?

Making websites interact with data using JavaScript

Now that we have data for computers, let’s use it with our web page!

Activity: Add JSON data to a web page 💻

Activity: Checking our work in the browser 💻

.