Data Poetics Copenhagen 2019

GIORGIA LUPI

http://giorgialupi.com/data-humanism-my-manifesto-for-a-new-data-wold

+DATA JOURNALING

https://www.brainpickings.org/2016/09/07/dear-data-book/

DATA SKETCHING WITH CODE

https://vimeo.com/45851523

This is my grandma:

And this is me:

To start with you only see a yellow circle

Add eye colour => eyes are drawn

Add 1st name => nose is drawn (length = nr of characters)

Add last name  => mouth is drawn (length = nr of characters)

Add gender  => gender symbol is added

The size of ring represents the length of the name. Color of eyes is represented by the black triangle. Its position changes according to the colors (black, blue, brown). Age is represented by the size of the other triangle.

Win: I’m able to understand and construct this set of codes.

Frustration: Not able to do more.

How to read:

The main color of the circle is of course the eye color. The name is displayed as a network of the surrounding letters. each word in the name as an own line. The sequence of the letters is indicated by an increasing transparancy of the line. The red arc on the outside represents the country by showing the distance to denmark.

With p5JS I´ve created a little form where the users have to type in their gender. They can type in male, female and diverse. By typing in different variables different shapes will be displayed.

WIN: learned how to do conditions

FRUSTRATION: I´ve lost a lot of time because the rectangle was not displayed, then I´ve realized I´ve forgotten a measure....

HAND AND HEIGHT

I created an Input for the information whether you are LEFTHANDED or RIGHTHANDED. A circle shows up accordingly.

In the second collum you can type in your height in cm. As your height gets bigger, the colour of the background changes from red to purple.

I combined two given examples and adjusted them regarding the given data and colour as well as postion of the shape.

My win was managing to create something that works for multiple inputs.

My frustration were a lot of things, since every time i changed something, i created a new problem. The core problem was the order i placed the code in, because the background constantly painted over the text i wanted to show.

Moving circles

Win: Getting multiple moving circles in the frame together

Frustration: I don’t understand how xdirection and ydirection, got that from an example. Want to know how that works. 

Great Things to Read

Visual Explanations, e.g. Chp. 2 Challenger shuttle, by E. Tufte

A Tour through the Visualization Zoo by J. Heer

Bad Data Guide by Quartz data team

39 Studies About Human Perception in 30 Minutes by K. Elliot

The Architecture of a Data Visualization, Accurat Studio.

The Power of Representation (Chp. 3), Things That Make Us Smart by Norman, D.

Visualization Practitioners/Teams

Office of Creative Research

Fathom Information Design

Moritz Stefaner

Wattenberg and Viégas / Flowing Media

Accurat Studio

University of Washington Interactive Data Lab

Lev Manovich / Software Studies Lab

Stamen Studio

Pitch Interactive

FiveThiryEight

Google Arts & Culture team

Google Big Picture group

Distill.pub

Amanda Cox / NYTimes Upshot

R2D3

The Pudding

MIT Senseable City Lab

Periscopic

Visualization Podcasts

Data Stories

Visualization Blogs and Publishers

Flowing Data

Information Aesthetics

Visual Complexity

Information is Beautiful Awards

Visual.ly

Visualizing Data

Visualcomplexity

The r/dataisbeautiful subreddit

The Economist - Graphic Detail

The New York Times’ interactives

New York Times - The Upshot

Visualoop

FiveThirtyEight

LA Times

Wall Street Journal

Washington Post

Quartz

The Guardian’s interactives

Data Canvas

Lapham’s Quaterly Charts and Graphs

The list of 2017 visualization lists

Edward Tufte: Ask E.T. Forum

Visual Business Intelligence by Stephen Few

Tic-tac-toe using MousePress

Circle first appears on the canvas. X appears upon mouse click. And next mouse click brings up the second O. 

Win: I coded!

Difficulty: Couldn’t figure out how to make MousePress work initially. Eventually learnt that I need to create a variable to count number of mouse click and create a conditional instruction. 

Spinning Cone

1 win: I got my 3D cone to work!

SUMMERS (not really)

Win: Using p5.js for making a poster

Frustration: Positioning of elements, Also, it does not feel like summertime

Hello, Copenhagen! Happiness Meter

Win: I wasn’t sure what to create but this sketch just developed out of playing around with the elements.

Frustration: I tried to put an actual “submit” button (even if the submission wouldn’t go anywhere) but I couldn’t figure out how to customize the look and position of the button.

Code Question: How do I customize the submit button? The first of a million questions :)

Visual Music

Win: Using the font of my selection

Frustration: Not really understanding the function drawWords

Day 3: Continued post on Light -  with video :) Topic: Light      Sense: Movement