This document discusses data visualization using Processing and introduces different data formats like CSV, JSON, and XML. It explains how to get data into Processing, parse it into useful objects, and render those objects on screen. CSV stores data in comma-separated values, JSON stores data as JavaScript objects, and XML stores nested nodes to define flexible data structures. The document demonstrates parsing JSON data into objects using JSONObject and JSONArray classes and storing objects in ArrayLists to render on screen with properties like position, size, color, and rotation.

2. “this is going to be AWESOME!"

3. & Data Visualization

4. Why ?

5. complex
interactive
exploratory
novel

6. 1. Get the data into Processing

7. 1. Get the data into Processing
2. Parse the data into useful Objects

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

9. CSV, JSON, XML

10. 1. Get the data into Processing

11. JSON
XML
CSV
Flexible
Structured
Easy

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

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

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

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

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

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

18. {
Curly Braces - OBJECT
};

19. [ Square Brackets - ARRAY ]

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

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

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

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

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

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

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

27. 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.”);
}

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

29. 2. Parse the data into useful Objects

30. class Patient {
XML String name;
int age;
JSON String gender; ArrayList<Patient> patientList
boolean smoker;
CSV
Patient();
}

31. ArrayList: Store lists of objects
HashMap: Keep counts of categories

32. Arrays vs. ArrayLists

33. Arrays
fast
easy to use
good for known quantities

34. ArrayLists
flexible
full-featured
good for changing quantities

35. Basic ArrayLists
ArrayList myList = new ArrayList();
CheeseBurger cb = new CheeseBurger();
myList.add(cb);

36. Basic ArrayLists
CheeseBurger cb = myList.get(0);
cb.eat();

37. Basic ArrayLists
CheeseBurger cb = myList.get(0);
X cb.eat();

38. Basic ArrayLists
CheeseBurger cb = (CheeseBurger) myList.get(0);
cb.eat();

39. ArrayLists w/ Generics
ArrayList<CheeseBurger> myList = new ArrayList();
CheeseBurger cb = new CheeseBurger();
myList.add(cb);

40. ArrayLists w/ Generics
CheeseBurger cb = myList.get(0);
√ cb.eat();

41. HashMaps

42. HashMaps
Store objects by a key
Helpful for keeping counts of categories
Useful for keeping checklists

43. HashMaps
HashMap<keyType, valueType>
myMap = new HashMap();
CustomObject o = new CustomObject();
myMap.put(key, o);
CustomObject o = myMap.get(key)

44. 3. Render the objects on screen

45. <insert wisdom here>

46. position
size
# colour
rotation
sound
?

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

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

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

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