Slide 1

Slide 1 text

Keeping the YouTube Generation Engaged with Rich Media, Visualization & Animation Irene Ros @ireneros Bocoup | @bocoup http://bocoup.com Wednesday, October 2, 13

Slide 2

Slide 2 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 3

Slide 3 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 4

Slide 4 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 5

Slide 5 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup http://ireneros.com/projects.html Wednesday, October 2, 13

Slide 6

Slide 6 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 7

Slide 7 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 8

Slide 8 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 9

Slide 9 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Data Structured Unstructured Wednesday, October 2, 13

Slide 10

Slide 10 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Visual Forms Shapes Colors Sizes + Data Structured Unstructured Wednesday, October 2, 13

Slide 11

Slide 11 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Visual Forms Shapes Colors Sizes + Data Structured Unstructured Narrative Structure + Interaction Wednesday, October 2, 13

Slide 12

Slide 12 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Data Wednesday, October 2, 13

Slide 13

Slide 13 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Category Q1 Q2 Coats 30,000 40,000 Pants 400,000 500,000 Unstructured Information Structured Information Wednesday, October 2, 13

Slide 14

Slide 14 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Visual Forms Wednesday, October 2, 13

Slide 15

Slide 15 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup What is data visualization? Yes, but... Wednesday, October 2, 13

Slide 16

Slide 16 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup Visual Forms Relationship The way in which two or more dimensions are connected. scatter plot matrix chart network diagram Distribution The way in which something is shared out among a group or spread over an area. histogram Comparison An evaluation of the similarities and differences of two or more things bar graph line chart stack graph maps bubble chart Composition The arrangements of parts in relation to each other and the whole. pie chart treemap Wednesday, October 2, 13

Slide 17

Slide 17 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup What is data visualization? Wednesday, October 2, 13

Slide 18

Slide 18 text

http://vis.stanford.edu/files/2010-Narrative-InfoVis.pdf Narrative Structure Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 19

Slide 19 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup 1. Magazine Style ‣single frame ‣written narrative ‣often one or two figures ‣usually static Wednesday, October 2, 13

Slide 20

Slide 20 text

E. Cadora and L. Kurgan. Architecture and Justice (Brooklyn Crime Blocks). Columbia University’s Spatial Information Design Lab, 2006. http://www.spatialinformationdesignlab.org/MEDIA/PDF_04.pdf Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 21

Slide 21 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup 2. Annotated Chart ‣Usually single chart ‣Some data points highlighted ‣textual explanation for those points ‣occasionally remainder interactive too Wednesday, October 2, 13

Slide 22

Slide 22 text

Guardian Interactive Team http://www.guardian.co.uk/world/interactive/2013/feb/12/state-of-the-union-reading-level Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 23

Slide 23 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup 3. Flow Chart (infographics) ‣Guided story ‣Broken down into steps ‣Has one or more possible paths Wednesday, October 2, 13

Slide 24

Slide 24 text

http://awesome.goodmagazine.com/transparency/usersubmissions/financialcrisis/klimiuk/ Good Magazine Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 25

Slide 25 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup 4. Slide Show ‣Simple guided experience ‣Usually single linear path ‣Next/Previous buttons ‣Each slide builds on the previous Wednesday, October 2, 13

Slide 26

Slide 26 text

Grace Hopper Conference 2013 | Irene Ros | Bocoup http://www.nytimes.com/interactive/2012/02/12/us/entitlement-map.html Grace Hopper Conference 2013 | Irene Ros | Bocoup Wednesday, October 2, 13

Slide 27

Slide 27 text

http://d3js.org/ http://misoproject.com/ Code: Tools: http://many-eyes.com/ http://openrefine.org/ Grace Hopper Conference 2013 | Irene Ros | Bocoup * * Wednesday, October 2, 13

Slide 28

Slide 28 text

Irene Ros irene@bocoup.com @ireneros | iros on github Open Source Data Visualization Fellowship Program Job Opportunities @bocoup | http://bocoup.com Wednesday, October 2, 13