Introduction

The guiding principle behind this project is the transformation of numerical data through code and design into visual information and knowledge. When we look at data, we see numbers and complexity that are often inaccessible to the layman.

The challenge for a designer is to propose ideas and solutions for how data can be transformed from its raw format into a simple, elegant form to synthesise and reveal insights conveyed through meaningful narrative and experience. In a series of group exercises and followed by an individual project, students learn, analyse, visualise and interpret data using a number visualisation techniques and existing or self-generated datasets.

Keywords

Code, Data, Data Visualisation, Information Design, Sense-Making

1

Process

This class is divided into two parts. First, students undertake a series of exercises that deepen their understanding of the interrelation of data, code and design.

The exercises are conducted in groups to explore data and code together. Students then delve into their individual project to apply techniques, skills and knowledge they have learned before. It is through this project that they create a visual representation of a dataset to create an experience or narrative with a particular aim in mind.

2

Project

(De)coding Data​ is a self-directed project in which students start from a selected or generated data set to develop visual representations that provide access to and insights into the hidden patterns, details, information and meaning that the dataset can reveal.

Final Deliverable

Multi-page microsite containing final outcome, process and documentation.

3

1

This is week

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

The Digital Portfolio is a digital archive which you will use to document and archive your work on a weekly basis. A given folder structure tells you which documents are required. You should update your Digital Portfolio every week. There are two main elements that are required

1. Archive Exercises 

2. Project

After you have downloaded the Digital Portfolio template, you should see the following.

Folder structure

Available for download as .zip from Google Drive

Document your process and outcomes

Archive and organise materials for your deliverables

Read and follow the Digital Portfolio Guidelines

Keep(s) your work organised

In this section you will find resources for learning, curiosity and inspiration; a collection of links, works, artists, designers that will grow over the course of the semester.

Senseable City Lab

Accurat

Giorgia Lupi

Dear Data

Stefanie Posavec

George Galanakis

Moritz Stefaner

Federica Fragapane

Nathan Lau

Cole Nussbaumer Knaflic

Data Physicalization

data-to-viz.com

datavizproject.com

Conduct field trip

Collect data

Work in a group

Conduct field trip

Collect data

Work in a group

Urban Fieldworks is an exercise that investigates the ordinary happenings and encounters found within an urban landscape.

It offers participants the opportunity to observe and sense their environment through digital and analog means to then visualise numerical data and create an artefact from their findings.

The following will require you to take a number of steps to complete this exercise. These steps are explained in detail. Together with your group members have a focused read and give it a good thought before you may ask for clarification or help.

Field trip

Data

Artefact

Field trip

Data

Artefact

Description

Steps to take

Collecting data

Group work

Idea sparks

Activity fields

Activity plan

Data goal

Checklist

The pdf document describes in detail the steps for you required to take. In your group, do read through the pages carefully, then discuss together the approach you want to take to collect your data. If unclear, do consult with your lecturers.

The purpose behind the idea sparks is for you to define a scenario for your activity and then to collect and record data. These sparks are suggestions for you to go on a field trip with a purpose in mind, as a starting point to explore and pay closer attention to your surroundings.

The purpose of the activity fields is to define how you will conduct your data collection method during your field trip. This will help you narrow down what type of data you will collect, how you will collect it, and where you will collect it.

Based on your activity fields, formulate your activity plan in 100-200 words with your topic in mind. What are you going to do, what methods will you use to execute your plan?

What is your objective in collecting comparable numerical data? What will or can you do with the data you collect? This goal can be refined over time.

timestamp, latitude, longitude, numerical data

YYYY-MM-DD-hh-mm

2021-08-19-15-04

decimal

1.4365651667

integer or decimal

12 or 4.75

Individually or together where applicable / possible; once or over a period of different days with Covid restrictions and measures in mind.

Physical

Virtual In case of Covid restrictions.

Document your field trip(s) by taking photos, videos, audio recordings if applicable, these can later be used for documentation and the making of the artefact

Collect at least 30 individual data entries per group, a data entry consists of a timestamp, geo location, numerical data see previous slides

There is a spreadsheet template that you should use to record your data see previous slides

Breakout into individual groups using Google Meet, students to organise amongst themelves

Zoom meeting remains open

Students can request for assistance in the Zoom chat where they provide their Google Meet link and message their lecturers

until 5:15pm

Field trip to collect numerical data based un Urban Fieldworks pdf

Spreadsheet use the provided template to tabulate numerical data

Field trip documentation can include images, videos, sound recordings, notes

Wrapping up this first session

Any questions regarding exercise or Digital Portfolio

Review field trip

Visualise data graph and map

Prepare for Artefact

Work in a group

Review field trip

Visualise data graph and map

Prepare for Artefact

Work in a group

In this session we will review your field trips in your respective classes with your respective lecturers first.

Select up to 3 images (or videos, sounds, notes) that you took on your field trip and share your experience with your lecturer and peers.

Following the sharing session we will take and visualise your data as a graph and on a map.

At the end of this session each group will have created two visualisation using code.

1

2

In preparation for next week, you will be introduced to a series of examples to create an artefact that expresses your topic and data visually.

3

Each group to select up to 3 images (or videos, sounds, notes) that you took on your field trip and share your experience with your peers.

together with and in your respective class until 3:10pm

1

What went well, what did not go as planned? Briefly explain what your plan and goal was in gathering your numerical data? What can or will you do with this data?

Following the sharing session we will take and visualize your data as a graph and on a map.

2

We will do so by transferring your spreadsheet to a .csv formatted file and then upload that file to a series of prepared p5js sketches that you can use as a starting point.

together with your group until 4:30pm

First step, spreadsheet to .csv

First step, spreadsheet to .csv

First step, spreadsheet to .csv

2 Graphs

Today we look at 2 basic graphs, the Line Graph and the Bar Graph

But of course there are many more graphs for different purposes and datasets. 2 great starting points are the dataviz-project and the from Data to Viz websites.

Upload .csv to a p5js sketch

At this point you should have converted your spreadsheet to a .csv file. After you have downloaded the .csv file, rename it to data.csv and upload it to the p5js sketches shared with in the next slide.

Do remember that you can duplicate a sketch and save it to your own p5js account.

Graphs required per group until 4:30pm

1

2

3

4

In your group plan and prepare to create an artefact from one of the 4 suggested techniques 1 Drawing Data, 2 Data Physicalization, 3 Generative Code and 4 Sound.

It is best to start soon so that you can complete the artefact in class the following week. Keep time management and feasibility in mind within the given time frame.

Do review and study the References we have prepared for your.

Artefact ideation until 5:30pm

Complete coded graphs archive your graph sketches, images, svg files

Decide on a technique for your artefact drawing or dataphys or generative or sound

Identify and bring materials if required for artefact production

Finalise artefact

Checklist

Presentation preparation

3 mins presentation

In this session you will finalise your Urban Fieldworks artefact during the first 90 minutes which will be part 1 for today.

We then continue with the second part that concludes the Urban Fieldworks exercise with a short presentation by each group within their respective class.

The presentation should be kept to 3 minutes only, more details in the following slides.

1

2

Finalise artefact

Checklist

Presentation preparation

3 mins presentation

Complete your artefact

group work until 4:00pm

1

Take a series of photos of your final artefact. Here focus on simple, minimal aesthetics to present your artefact in the best possible way. See samples in the next 3 slides.

2

Check Checklist

group work until 4:30pm

1

Prepare to address the following 4 points in your presentation later

2

Give a brief overview of places visited and data collected (verbally, map if available)

1

What could be observed from the data when visualised? What information can be extracted from the data?

From a series of 6 images give a meaningful visual impression of your field trip (select 3 images), data visualised (2) and the artefact (1)

What is the message that the artefact communicates?

2

3

4

Each group to present their outcomes in a 3 minutes presentation. The presentation does not have to be in powerpoint format but you can share your work by showing data and images on your screen.

groups to present in their respective classes from 4:30pm to 5:30pm

1

This concludes the Urban Fieldworks exercise, take a look at the next slide for homework details.

2

As a group, organise materials see Digital Portfolio folder exercise-1-urban-fieldworks

Update your Digital Portfolio

Review your p5js skills start with Getting Started with p5js and last year's slides

In today's session we will look at three types of graphs: line, bar and donut. 

3 Graphs

In the first part, each group will conduct a short study of these three graphs and their characteristics. We conclude this part with a short sharing session in each respective class.

1

2

Graph from Data

The second part requires each group to visualise one provided data set using code and pen and paper where necessary.

3

group work until 3:45pm

Discuss and describe each graph in 30-70 words. Then, what kind of data 1) in your opinion would be a good fit for each? discuss in your group and give examples.

1

Extract pros and cons for each graph from the referenced websites to your best knowledge and understanding.

2

From the referenced websites, which graph other than line, bar, pie is the most interesting, appealing to you? Elaborate 2) on this with images and written words.

3

You can use a Google docs document here, organise and design your document as you see fit.

If you have questions, do approach your lecturers.

Use p5js to create a graph from a data set that is provided with the links to the left. Select a data set that sparks your interest.

1

Review the data set you find most interesting and download the data as .csv file. Then, extract the data that you want to visualise. You can use a Googgle Spreadsheet. Here, organise the data into their respective columns.

2

Download the spreasheet as .csv and transfer .csv data to your p5js sketch and visualise data. See how-to video in the next slide

3

Take inspiration from one of the references shared with you in the previous slides. Use p5js and pen and paper to enhance your datavis.

4

Spreadsheet to .csv

Design and aesthetics

Readability

Message communicated

Sufficient data present

group work until 5:15pm

If you have questions, do approach your lecturers.

Recap

Review graph sketch

Interpretation of a graph

Show-and-tell

We looked at 3 types of graphs last week:

Line, Bar and Donut graph. Some takeaway points:

Shares of a whole, good for small amount of data which totals to 100%

May be difficult to read and analyse data because of angles

boring vs. visually pleasing

readability vs. cluttered, decorative, chartjunk

message communicated?

Donut

Good for time related data and trends

Very common and familiar to users, suitable for comparing data

The clean uniformity of data as blocks imposes simplicity on complex topics

Can be visually boring

Line

Bar

We looked at 3 types of graphs last week:

Line, Bar and Donut graph. How do we find the right balance and make the right choices?

group work until 3:45pm

Each group to review their graph sketch

What does the graph tell you and what should it tell the user?

What is missing from the graph as currently shown in your p5js sketch?

Sketch on paper what improvements can be made to improve the readability of your graph? Make adjustments in code or later in the following step, in software.

Then, export the graph as .svg or .png and add improvements in software

1

2

3

4

Activity 1

group work until 3:45pm

The following outcomes are required:

group work until 3:45pm

.svg or .jpg file with additions made in Illustrator or Photoshop

Revised p5js sketch, update spreadsheet column E

1

2

Activity 1

Based on the topic, the data set you chose, and the graph you created, how would you express visually and through code the underlying message, insights gained, and/or conclusions drawn?

This is a purely visual exercise. Think of the approach here as a coded illustration, a sketch that can be explored interactively, or a data visualization that can be considered visually appealing.

group work until 5:15pm

Activity 2

The following outcomes are required:

p5js sketch, update spreadsheet column F

1

group work until 5:10pm

Activity 2

Last week we revisited your data graph sketches and you were then tasked to create a second p5js sketch that interprets findings from the data when visualised.

If you have not updated the group findings spreadsheet yet please do so before class ends today.

If you have used and modified code that you found online, do give credit to the original author. You can do so by adding a comment on top of the sketch including name and original URL.

For the session in week 7 you should prepare the following materials which you will then document in a website format provided as a template.

1. Field trip documentation 

2. Activity fields and Data goal

3. Data

4. Artefact

5. p5js sketches (map, graph)

6. Short description derived from your presentation

7. Title

Urban Fieldworks

1. Google docs document 3 graphs  

2. Data

3. p5js sketches (graph, interpretation)

4. Short description of findings in the data

5. Reflection on reasoning behind your data interpretation sketch

6. Title

Code and Data

With today's session we will conclude the group exercises. From week 9 onwards you will work on your individual project.

The methodology will be very similar to that used in the previous weeks. Your individual project will revolve around the topics and techniques we have covered so far. The last step we will take today is to document exercises in a website format.

The template provides you with a multi-page website. The following changes should be made to the HTML files here:

Images

Text

Stylesheets

Brackets Editor

Browser

Share the workload.

Images

Text

Code

There will be issues, html.

You will have to make change to the existing code blocks in html and as a second step you will have to copy and paste code blocks from the html documents to add more content.

When facing issues, error messages, or things don't work, try to analyse and understand first what might be the cause.

Did you copy paste wrongly? This may have caused the html structure to be mixed up and to display wrongly. Try to go back by using the undo function.

There will be issues, css.

You are not able to make changes to the design? Did you make changes to the styles.css file? this is where  the html elements are styled (designed), here you can make changes to font styles and color.

To add style changes in html, you have to make changes to an html elements class attribute in order for a style to apply, see code below

When in doubt or stuck, consult your lecturers to help.

You can do so by posting a message in the chat and we can look at the problem over Zoom. Or, lecturers can assist you face to face (with necessary social-distancing). 

Issues aside.

You and your group should be able to make changes to the content (text, images, links, p5js sketches) by replacing the existing placeholders. The next step is to make changes to the css styles to adjust colors and fonts to your preference. Based on last semester's website exercise, you should have a basic technical understanding of this exercise. 

Sharing content

Use Google Drive to share all files and images, use Google Docs to share text and links amongst your group.

Share the link to your website in this Spreadsheet under column G

Complete your group website

Update your Digital Portfolio

(De)coding Data is a self-directed project in which students start from a selected or generated data set to develop visual representations that provide access to and insights into the hidden patterns, details, information and meaning that the dataset can reveal.

For this project, you will create a multi-page website that visualises, contextualises, and interprets a dataset of your choosing.

Following the exercises conducted in term 1, you will work either with data you have collected yourself, such as in the Urban Fieldworks project, or with a dataset available from an online resource, as practiced in the Code and Data exercise.

After you have selected the data you want to work with, the next steps will involve visualising the data in the form of one or more charts, as practiced in the earlier sessions.

You will analyse the data and its context and elaborate your findings visually and in writing. Based on your findings, you then create an artefact that interprets your results.

Choose data set

Visualise data

Analyse data

Interpret data

1

2

3

4

document and share

5

Week 9

by Week 10

by Week 11

by Week 12

by Week 13

Visual design

Code and aesthetics

Context and narrative

Visual design

Code and aesthetics

Context and narrative

Andreas Kian Peng

Clara Vikas

Yasser Olivia

Choose data set

Visualise data

Analyse data

Interpret data

1

2

3

4

document and share

5

Week 9

by Week 10

by Week 11

by Week 12

by Week 13

Now that you have collected your own data or used a data set from an online resource, you should format the data you want to work with and convert it to a spreadsheet.

Then use a p5js sketch or other tools to visualize your data. Pay attention to your design choices. Use Illustrator or other tools you feel comfortable with to refine your design outcomes. You may consider making your datavis interactive.

Choose data set

Visualise data

Analyse data

Interpret data

1

2

3

4

document and share

5

Week 9

by Week 10

by Week 11

by Week 12