Creative

Computation
for Visual

Communication
Design

WEEK 4 DAY 1

Data as Material

Data

An average person produces 1.7MB of data every second.

That’s about 850 printed pages.

Data Science

Machine learning

"Neoplatonic" Data Science

“Primary qualities such as number, magnitude, position and extension can be expressed mathematically, whereas aspects which seem to us an inseparable part of phenomena are relegated to secondary qualities”

Dan McQuillan

IDEAL FORM

IMPERFECT THING

WORLD OF IDEAS

WORLD OF MATTER

Objectivity of data

Materiality of data

Representation of data

Mapping of data

Daina Taimiņa: Hyperbolic planes with crochet

Mapping of data

Kim Costantino: Students for Obama/Romney (2012)

Data visualisation

D3.js library for data visualisation

Information Design Courses

Data visualisation

Juuso Koponen & Jonatan Hildén: Tieto Näkyväksi (2016) Data visualization handbook (2019)

Data visualisation

“Jos tavoitteena ei ole konkreettisen tiedon viestintä, infografiikka ja visualisoinnit ovat vääriä välineitä tarkoitukseen.”

Koponen & Hildén

“If your main intent is not to communicate information in a concrete manner, you should not use infographics and data visualisation.”

Koponen & Hildén

Data visualisation

Barbara Hahn, Christine Zimmermann (2007)

Ryan MacEachern (2013)

Data visualisation or data art?

The Pyramid of Capitalist System (1919)

Data visualisation or data art?

“In collaboration with the Financial Times, Generative Hut and @Loackme have been commissioned by @electrifyww to create an artwork inspired by the post-pandemic financial markets data for the flagship FT Global Boardroom event. The result is an emotional and poetic artwork using unpredictable yet precise algorithms that tell the story of financial recovery in a more immersive way.”

Generative Hut (2020)

Disrupting Data?

Reddit: Data is ugly

Disrupting Data

Uncanny Valley Theory (1970) by Masahiro Mori

Uncanny Dimple Theory (2019) by Eevi Rutanen

Disrupting Data

Gut Flora (2017) by Eevi Rutanen

Disrupting Data

Eevi Rutanen (2019) ColourShapeThing

Eevi Rutanen (2020) StockPoetry

Collecting Data

PROBLEM: WHERE AND HOW TO GET DATA TO USE AS RAW MATERIAL?

Collecting Data

Dear Data Project (2015) by Giorgia Lupi and Stefanie Posavec

Tables

You can load tables in your sketch to access and parse the data
Formats like Microsoft Excel or Apple Numbers should be converted to CSV format first
Load the table in the preload() function using loadTable()
- You can use a local path or URL

let myData = loadTable("path/to/file");

JSON

JSON is a file format that makes it easy to save and transfer data in a structured way
- Structure consists of JavaScript objects and JavaScript arrays
- It uses JavaScript syntax but also works with other languages
Organised in a hierarchical manner
- The format makes it easy to create categories and subcategories for the data
Load JSON files in the preload() function using loadJSON()
- You can use a local path or URL

let myData = loadJSON("path/to/file");

APIs

An interface that allows one application to communicate with another application
Many companies and services provide APIs that allow developers to access their data and functionality
- Eg. displaying your Instagram feed, a custom Google Map, or weather data on your website
The data is retrieved by sending a request to a URL
- The request might contain details about your query, eg. search terms
APIs can often return data in different formats
- JSON, XML, HTML
Some APIs require authentication or payment
- You might have to sign up to get an API key to use the API

Resources for data

Project Gutenberg
- Thousands of free books with expired copyrights
Corpora
- Large collection of fun and random datasets in JSON format
Kaggle
- Datasets in different formats
Google Dataset Search
- Search engine for public datasets
API List
- Large collection of useful APIs
Public APIs
- A directory of many public APIs
Datamuse API: Free word finding API
- Versatile and free API for finding words that match search criteria
Working with JSON
- Examples of how to access different elements in a JSON object
Daniel Shiffman tutorial
- Good tutorial about JSON files, APIs and libraries

Weekly Reading IV

John-Patrick Hartnett (2017): The Programmed Designer. Eye Magazine, Summer 2017

Read the article. Consider the impact of digital tools in your practice. (It's up to you how you define a tool in this context.)
- Which tools do you use?
- How do you use them?
- Why do you use them?
- Who has created the tools?
- Who owns the tools?
- Are the tools free or open source? If not, what is the profit model?
Answer some or all of these questions on the Week 4 Forum in approx. 3-10 sentences.
Reply to someone else's post.

Coding Workshop 4.1

Basic concepts in computation

MEMORY
- Storing data and accessing it later
  - Variables, arrays, objects
SEQUENCE
- Running instructions in order
  - Functions, algorithms
SELECTION
- Making choices
  - Conditionals and logic (if, else, and, or, not)
REPETITION
- Doing the same thing more than once
  - Loops (for, while)

Arrays

PROBLEM:
HOW TO STORE AND ACCESS A LARGE NUMBER OF VALUES?

Arrays

An array is a variable that stores a list of data
Each item on the list is identified with its index number
- Index describes the item’s position in
  the array
- Indexes start from 0
The length and contents of an array can be modified

0

1

2

item

Array syntax

const myArray = [];

const myArray = [item0, item1, item2];

Use const in stead of let when declaring arrays.

Declare an empty array:

Declare an array with contained items:

An array can contain any type of data!

Numbers, strings, colours, images, other arrays...

array name (arbitrary)

square brackets

list of items, separated with commas

Accessing and changing arrays

const foods = ["pizza","burger","falafel"];
foods[0] //returns "pizza"
print(foods[2]); //prints "falafel"

foods[1] = "pasta";
//foods array is now ["pizza","pasta","falafel"]

Array items are accessed with their index

Array items can be changed using their index

ARRAY INDEXES ALWAYS START FROM 0!

Array length

const foods = ["pizza","pasta","falafel","burger"];
foods.length //returns 4

foods[foods.length-1]
//returns burger (the last element)

The length property returns the number of array items

Because the first item has index 0, the last item in the array always has index length-1

ARRAY INDEXES ALWAYS START FROM 0!

Array methods

const foods = ["pizza","burger"];
foods.push("salad"); //array is now ["pizza","burger","salad"]

New elements can be added to the end of array using push

Elements can be removed from the end of array using pop

const foods = ["pizza","burger","salad","risotto"];
foods.pop(); //array is now ["pizza","burger","salad"]

Elements can be removed from the beginning using shift

const foods = ["pizza","burger","salad","risotto"];
foods.shift(); //array is now ["burger","salad","risotto" ]

Stack = Last In First Out

Last item is on the top

First item is at the bottom

PUSH

POP

SHIFT

Array methods

const foods = ["pizza","burger","salad","risotto"];
let randomFood = random(foods);

Return a random element from the array using random

There’s also multiple other methods for arrays!
- Sorting, searching, removing, replacing, combining etc.
- If you can imagine it, it probably exists!

Arrays and loops

ARRAYS AND LOOPS
GO HAND IN HAND!

Arrays and loops

//looping through all the items in the array
for(let i=0; i<myArray.length; i++){
    print(myArray[i]); //print item at index i
}

For-loop can be used to traverse the array
- Accessing all the elements in the array one by one
  - Using or modifying the elements

Exercise 1: Artist name generator

Exercise 2: Array worm

VARIATION:

Draw the worm using interconnected lines:

Loop through the coordinates only until the second to last coordinate
Draw a line from each coordinate to the next

Exercise 3: Moving bars

VARIATION: Exercise 4: Bouncing balls

Recap

//declare an array containing items
const foods = ["pizza","burger","salad","risotto"];
//acces elements in the array using indexes
let mySecondFood = foods[1]; //"burger"
//add a new element to end of array
foods.push("falafel");
//remove the last element
foods.pop();
//remove the first element
foods.shift();
//get a random item from array
let randomFood = random(foods);
//looping through all the items in the array
for(let i=0; i<myArray.length; i++){
    print(myArray[i]); //print item at index i
}

CC_w4_d1 OLD

By eevirutanen

Creative

Computation for Visual

Communication Design

Data as Material

Data

Data

An average person produces 1.7MB of data every second.

That’s about 850 printed pages.

Data Science

Machine learning

"Neoplatonic" Data Science

Objectivity of data

Materiality of data

Representation of data

Mapping of data

Mapping of data

Data visualisation

Information Design Courses

AXM-E2006 - Design and Data 12.1.2023-17.2.2023

AXM-E0301 - Information Design Studio 1.3.2023-2.6.2023

AXM-C0103 - Information Design Studio 8.11.2022-1.12.2022

AXM-E2004 - Introduction to Information Design

Data visualisation

Data visualisation

Data visualisation

Data visualisation or data art?

Data visualisation or data art?

Data visualisation or data art?

Disrupting Data?

Disrupting Data

Disrupting Data

Disrupting Data

Collecting Data

Collecting Data

Tables

JSON

APIs

Resources for data

Weekly Reading IV

Coding Workshop 4.1

Basic concepts in computation

Arrays

Arrays

0

1

2

Array syntax

Accessing and changing arrays

Array length

Array methods

Stack = Last In First Out

Array methods

Arrays and loops

Arrays and loops

Exercise 1: Artist name generator

Exercise 2: Array worm

Exercise 3: Moving bars

VARIATION: Exercise 4: Bouncing balls

Recap

CC_w4_d1 OLD

More from eevirutanen

Computation
for Visual

Communication
Design