Course notes for my ITP Data Representation Class. Probably not overly useful for people who didn't listen to the lecture.

1. Data Viz 101

2. 1. Get the data

3. 1. Get the data
2. Parse the data into useful Objects

4. 1. Get the data
2. Parse the data into useful Objects
3. Render the objects on screen

5. 1. Get the data

6. CSV, JSON, XML

7. JSON
XML
CSV
Flexible
Structured
Easy

8. CSV (Comma-Separated Values)
• Values (columns) are typically delimited by commas
• Rows are typically delimited by carriage returns
• Works for most data that can go
in a simple spreadsheet
• Not good for any kind of complex or relational data
• Processing doesn’t have built in support for CSV
but we can use JAVA libraries like opencsv

9. 4,14,26,17,98,35,128,362,9,18,45
dave,28,male,no
erica,28,female,no
roger,52,male,yes

10. XML (eXtensible Markup Language)
• Data is stored in nested nodes
• Structure of data is extremely flexible to define
but not as flexible to change
• Processing has built-in support for XML
• Many APIs will return data in XML format

11. <patients>
<patient name=”dave” age=28 gender=”male” smoker=”no”/>
<patient name=”erica” age=28 gender=”female” smoker=”no”/>
<patient name=”roger” age=52 gender=”male” smoker=”yes”/>
</patients>

12. JSON (JavaScript Object Notation)
• Data is as JavaScript Objects
• Extraordinarily flexible and lightweight
• Lack of named structures can make stored data
difficult to understand
• JAVA and JavaScript do not play as nicely as you
might think

13. {
patients:[
{name:”dave”, age:28, gender:”male”, smoker:false},
{name:”erica”, age:28, gender:”female”, smoker:false},
{name:”roger”, age:52, gender:”male”, true}
]
}

14. JSON JAVA

15. {
Curly Braces - OBJECT
};

16. [ Square Brackets - ARRAY ]

17. {
name:”Peter”,
age:18,
smoker:false,
friends:[“April”, “Ron”, “Valerie”]
};

18. {
name:”Peter”,
age:18,
smoker:false,
friends:[“April”, “Ron”, “Valerie”]
};
myJSONObject.age

19. {
name:”Peter”,
age:18,
smoker:false,
friends:[“April”, “Ron”, “Valerie”]
};
myJSONObject.friends[1]

20. {
name:”Peter”,
age:18,
smoker:false,
friends:[“April”, “Ron”, “Valerie”]
};
myJSONObject.getInt(“age”);

21. {
name:”Peter”,
age:18,
smoker:false,
friends:[“April”, “Ron”, “Valerie”]
};
JSONArray a = myJSONObject.getJSONArray[“friends”];
a.getString(1);

22. myJSONObject = new JSONObject(stringData);
JSONArray a = myJSONObject.getJSONArray[“friends”];
println(a.getString(1));

23. try {
myJSONObject = new JSONObject(stringData);
JSONArray a = myJSONObject.getJSONArray[“friends”];
println(a.getString(1));
} catch (Exception e) {
println(“JSON LOAD FAILED.”);
}

24. try {
String url = “http://test.com/?getStuff”;
String stringData = join(loadStrings(url), “”);
myJSONObject = new JSONObject(stringData);
JSONArray a = myJSONObject.getJSONArray[“friends”];
println(a.getString(1));
} catch (Exception e) {
println(“JSON LOAD FAILED.”);
}

25. http://www.blprnt.com/processing/json.zip

26. Where’s the data?

27. 1. Find some data
2. Ask some questions

28. 1. Ask some questions
2. Find some data

29. 3. Render the objects on screen

30. <insert wisdom here>

31. position
size
# colour
rotation
sound
?

32. position
size
# map() colour
rotation
sound
?

33. map(5,0,10,0,100) 50

34. map(5,0,10,0,1000) 500

35. map(5,0,10,20,30) 25