0
“this is going to be AWESOME!"
& Data Visualization
Why   ?
complex interactiveexploratory    novel
1. Get the data into Processing
1. Get the data into Processing2. Parse the data into useful Objects
1. Get the data into Processing2. Parse the data into useful Objects3. Render the objects on screen
CSV, JSON, XML
1. Get the data into Processing
JSON               XML                CSV   FlexibleStructured      Easy
CSV (Comma-Separated Values)  • Values (columns) are typically delimited by commas  • Rows are typically delimited by carr...
4,14,26,17,98,35,128,362,9,18,45       dave,28,male,no       erica,28,female,no       roger,52,male,yes
XML (eXtensible Markup Language)  • Data is stored in nested nodes  • Structure of data is extremely flexible to define    b...
<patients> <patient name=”dave” age=28 gender=”male” smoker=”no”/> <patient name=”erica” age=28 gender=”female” smoker=”no...
JSON (JavaScript Object Notation)   • Data is as JavaScript Objects   • Extraordinarily flexible and lightweight   • Lack o...
{    patients:[       {name:”dave”, age:28, gender:”male”, smoker:false},       {name:”erica”, age:28, gender:”female”, sm...
{     Curly Braces - OBJECT};
[ Square Brackets - ARRAY ]
{     name:”Peter”,     age:18,     smoker:false,     friends:[“April”, “Ron”, “Valerie”]};
{     name:”Peter”,     age:18,     smoker:false,     friends:[“April”, “Ron”, “Valerie”]};        myJSONObject.age
{     name:”Peter”,     age:18,     smoker:false,     friends:[“April”, “Ron”, “Valerie”]};     myJSONObject.friends[1]
{     name:”Peter”,     age:18,     smoker:false,     friends:[“April”, “Ron”, “Valerie”]};     myJSONObject.getInt(“age”);
{          name:”Peter”,          age:18,          smoker:false,          friends:[“April”, “Ron”, “Valerie”]     };JSONAr...
myJSONObject = new JSONObject(stringData);JSONArray a = myJSONObject.getJSONArray[“friends”];println(a.getString(1));
try {  myJSONObject = new JSONObject(stringData);  JSONArray a = myJSONObject.getJSONArray[“friends”];  println(a.getStrin...
try {   String url = “http://test.com/?getStuff”;  String stringData = join(loadStrings(url), “”);  myJSONObject = new JSO...
http://www.blprnt.com/processing/json.zip
2. Parse the data into useful Objects
class Patient { XML        String name;            int age;JSON        String gender;    ArrayList<Patient> patientList   ...
ArrayList: Store lists of objectsHashMap: Keep counts of categories
Arrays vs. ArrayLists
Arrays           fast       easy to usegood for known quantities
ArrayLists          flexible       full-featuredgood for changing quantities
Basic ArrayLists    ArrayList myList = new ArrayList();    CheeseBurger cb = new CheeseBurger();    myList.add(cb);
Basic ArrayLists    CheeseBurger cb = myList.get(0);    cb.eat();
Basic ArrayLists    CheeseBurger cb = myList.get(0);X   cb.eat();
Basic ArrayLists    CheeseBurger cb = (CheeseBurger) myList.get(0);    cb.eat();
ArrayLists w/ Generics    ArrayList<CheeseBurger> myList = new ArrayList();    CheeseBurger cb = new CheeseBurger();    my...
ArrayLists w/ Generics    CheeseBurger cb = myList.get(0);√   cb.eat();
HashMaps
HashMapsStore objects by a keyHelpful for keeping counts of categoriesUseful for keeping checklists
HashMapsHashMap<keyType, valueType>myMap = new HashMap();CustomObject o = new CustomObject();myMap.put(key, o);CustomObjec...
3. Render the objects on screen
<insert wisdom here>
position      size#    colour    rotation     sound        ?
position              size#   map()    colour            rotation             sound                ?
map(5,0,10,0,100)   50
map(5,0,10,0,1000)   500
map(5,0,10,20,30)   25
Processing & Dataviz
Processing & Dataviz
Processing & Dataviz
Upcoming SlideShare
Loading in...5
×

Processing & Dataviz

1,103

Published on

Slides from my Processing & Data VIsualization workshop. Probably won't make a great deal of sense to those of you who haven't attended.

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,103
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "Processing & Dataviz"

    1. 1. “this is going to be AWESOME!"
    2. 2. & Data Visualization
    3. 3. Why ?
    4. 4. complex interactiveexploratory novel
    5. 5. 1. Get the data into Processing
    6. 6. 1. Get the data into Processing2. Parse the data into useful Objects
    7. 7. 1. Get the data into Processing2. Parse the data into useful Objects3. Render the objects on screen
    8. 8. CSV, JSON, XML
    9. 9. 1. Get the data into Processing
    10. 10. JSON XML CSV FlexibleStructured Easy
    11. 11. 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
    12. 12. 4,14,26,17,98,35,128,362,9,18,45 dave,28,male,no erica,28,female,no roger,52,male,yes
    13. 13. 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
    14. 14. <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>
    15. 15. 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
    16. 16. { patients:[ {name:”dave”, age:28, gender:”male”, smoker:false}, {name:”erica”, age:28, gender:”female”, smoker:false}, {name:”roger”, age:52, gender:”male”, true} ]}
    17. 17. { Curly Braces - OBJECT};
    18. 18. [ Square Brackets - ARRAY ]
    19. 19. { name:”Peter”, age:18, smoker:false, friends:[“April”, “Ron”, “Valerie”]};
    20. 20. { name:”Peter”, age:18, smoker:false, friends:[“April”, “Ron”, “Valerie”]}; myJSONObject.age
    21. 21. { name:”Peter”, age:18, smoker:false, friends:[“April”, “Ron”, “Valerie”]}; myJSONObject.friends[1]
    22. 22. { name:”Peter”, age:18, smoker:false, friends:[“April”, “Ron”, “Valerie”]}; myJSONObject.getInt(“age”);
    23. 23. { name:”Peter”, age:18, smoker:false, friends:[“April”, “Ron”, “Valerie”] };JSONArray a = myJSONObject.getJSONArray[“friends”];a.getString(1);
    24. 24. myJSONObject = new JSONObject(stringData);JSONArray a = myJSONObject.getJSONArray[“friends”];println(a.getString(1));
    25. 25. try { myJSONObject = new JSONObject(stringData); JSONArray a = myJSONObject.getJSONArray[“friends”]; println(a.getString(1));} catch (Exception e) { println(“JSON LOAD FAILED.”);}
    26. 26. 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.”);}
    27. 27. http://www.blprnt.com/processing/json.zip
    28. 28. 2. Parse the data into useful Objects
    29. 29. class Patient { XML String name; int age;JSON String gender; ArrayList<Patient> patientList boolean smoker; CSV Patient(); }
    30. 30. ArrayList: Store lists of objectsHashMap: Keep counts of categories
    31. 31. Arrays vs. ArrayLists
    32. 32. Arrays fast easy to usegood for known quantities
    33. 33. ArrayLists flexible full-featuredgood for changing quantities
    34. 34. Basic ArrayLists ArrayList myList = new ArrayList(); CheeseBurger cb = new CheeseBurger(); myList.add(cb);
    35. 35. Basic ArrayLists CheeseBurger cb = myList.get(0); cb.eat();
    36. 36. Basic ArrayLists CheeseBurger cb = myList.get(0);X cb.eat();
    37. 37. Basic ArrayLists CheeseBurger cb = (CheeseBurger) myList.get(0); cb.eat();
    38. 38. ArrayLists w/ Generics ArrayList<CheeseBurger> myList = new ArrayList(); CheeseBurger cb = new CheeseBurger(); myList.add(cb);
    39. 39. ArrayLists w/ Generics CheeseBurger cb = myList.get(0);√ cb.eat();
    40. 40. HashMaps
    41. 41. HashMapsStore objects by a keyHelpful for keeping counts of categoriesUseful for keeping checklists
    42. 42. HashMapsHashMap<keyType, valueType>myMap = new HashMap();CustomObject o = new CustomObject();myMap.put(key, o);CustomObject o = myMap.get(key)
    43. 43. 3. Render the objects on screen
    44. 44. <insert wisdom here>
    45. 45. position size# colour rotation sound ?
    46. 46. position size# map() colour rotation sound ?
    47. 47. map(5,0,10,0,100) 50
    48. 48. map(5,0,10,0,1000) 500
    49. 49. map(5,0,10,20,30) 25
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×