datapoetics-cph2019

[datapoetics-cph2019]

Day 4: References

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

https://www.slideshare.net/visualisingdata/the-design-of-time?ref=https://www.visualisingdata.com/category/articles/page/7/

[datapoetics-cph2019]

#day1 #geena #charlotte

[datapoetics-cph2019]

My grandma and me

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

Add age  => wrinkles are drawn (1 wrinkle added for each 10 ys starting from 10)

[datapoetics-cph2019]

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.

Question: I’d like the triangle to move along the ring with an increment of X degree. Can I use variable to do that?

[datapoetics-cph2019]

human eye

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.

Demo: https://editor.p5js.org/tjark_m/present/cb_A6-W-R

[datapoetics-cph2019]

When you type a name, at the first letter, the white diamond shape appears. The country creates a pupil based on the length of the country name and gives it a random color. The color of the eye will be your own eye color (standard blue, brown etc).

[datapoetics-cph2019]

Male-Female-Diverse

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....

[datapoetics-cph2019]

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.

#day4 #thehuman #geena

[datapoetics-cph2019]

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. 

Question: How do I get them to come from opposite sides?

[datapoetics-cph2019]

General Resources

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

Statistical Modeling, Causal Inference, and Social Science by Andrew Gelman

[datapoetics-cph2019]

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. 

Question: I used if, then, else if, else structure to make the 3 step execution. But how can I scale this? There must be a way I don’t have to keep going with else if, else if... 

[datapoetics-cph2019]

Spinning Cone

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

Difficulty: when i got the cone to work it deleted all my text. I now know how to fix it, but it will take a while - so now I have to work on that.

[datapoetics-cph2019]

SUMMERS (not really)

Win: Using p5.js for making a poster

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

Question: How do I know the exact coordinates?

[datapoetics-cph2019]

Moire P5

WIN: Nice optical effect with little effort FAIL: Coudn’t get the Instruction text to reapear after canvas wipe QUESTION: Why is the text not showing up again? DEMO: https://editor.p5js.org/tjark_m/present/KmK6vEtzI

[datapoetics-cph2019]

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 :)

#day3 #thealgorithm #sabrina

[datapoetics-cph2019]

Visual Music

Win: Using the font of my selection

Frustration: Not really understanding the function drawWords

Question: How do I make more variations?

[datapoetics-cph2019]

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

#day3 #Light #andrea #ksenia #andrea #prima