grammar statistical graphics Building a in Clojure Kevin Lynagh 2012 November 9 Øredev Keming Labs Malmö, Sweden

Transcription

1 Building a grammar for statistical graphics in Clojure 2012 November 9 Kevin Lynagh Øredev Keming Malmö, Sweden

2 Agenda

3 Agenda Data Visualization

4 2 A Agenda Grammar of Graphics

5

6 Agenda Data Visualization what + why + how

7 Wind energy

8 Bioinformatics

9 Doc & patient, meet Data

10

11

12 (didn t make this, just it)

13 How (theory)

14 Data Visual

15 Length Width Orientation Intensity Size Shape Enclosure -D position

16

17 Time 2D Position Cost

18 2D Position

19 Width Flight duration

20 Width

21 2 Lessons

22 Some aesthetics are better than others -D position > Width > Size Length

23 Have a Thesis

24 How (practice)

25 Off the rack

26

27

28

29 Bespoke Photo by Scott Schuman, The Sartorialist

30 D3: Data Driven Documents (2011) Mike Bostock Jeffrey Heer Vadim Ogievetsky

31

32

33 Bespoke

34 Bespoke (map flight-data (fn [{:keys [price carrier depart arrive]}] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))

35 Bespoke (map flight-data (fn [{:keys [price carrier depart arrive]}] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]])) (map [[3 "3 a.m."] [6 "6 a.m."] [9 "9 a.m."] [12 "Noon"] [15 "3 p.m."] [18 "6 p.m."]] (fn [[t label]] [:div.tick {:style {:left (time-scale t)}} [:div.grid-line] [:span.label label]]))

36 Bespoke #flights.flight position: absolute z-index: 2 height: 100% -webkit-transit.label ease-out display: block.price position: relative position: absolut top: -1.3em text-align: right left: -2.5em width: 50px width: 5em height: 80% text-align: center top: 10% font-family: sans-serif left: -60px #axis.tick.grid-line position: absolute width: 1px height: 100% (map flight-data (fn [{:keys [price carrier depart arrive]}] top: 0px [:div.row background-color: hsl(0,0%,70%) [:button.price (str "$" price)] z-index: 1 [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]])).flight position: absolut height: 60% top: 20% text-align: cente border: 1px solid span color: white font-size: 0.8e font-family: sa (map [[3 "3 a.m."] [6 "6 a.m."] [9 "9 a.m."] [12 "Noon"] [15 "3 p.m."] [18 "6 carrier-colo (fn [[t label]] $color) [:div.tick {:style {:left (time-scale.flight[carrier=# t)}} [:div.grid-line] background-colo [:span.label label]]))

37 <canvas> Java2D D3.js <svg> Excel Highcharts General (hard to use) Specific (not expressive)

38 <canvas> Java2D D3.js <svg>? Excel Highcharts General (hard to use) Specific (not expressive)

39 2 A Agenda Grammar of Graphics

40 The Grammar of Graphics (1999) ggplot2 (2005)

41 Motor Trend cars dataset mpg cyl disp hp drat wt... Mazda RX Mazda RX4 Wag Datsun

42 ggplot(mtcars, aes(wt, mpg)) + geom_point() Exploratory

43 Exploratory ggplot(mtcars, aes(factor(cyl), mpg)) + geom_point(aes(colour = factor(cyl)))

44 Exploratory ggplot(mtcars, aes(wt, mpg)) + geom_boxplot()

45 Exploratory ggplot(mtcars, aes(qsec, wt)) + stat_smooth() + geom_point()

46

47

48

49

50 complected draw_scatterplot(data)

51 complected draw_scatterplot(data) calculate scale extents calculate tick marks curve fitting calculate statistics draw points draw guides draw labels...

52 Photo by Earth to Donna, Pintrest

53 Decomplect A graphic consists of: Data Geometry Aesthetic mappings Statistics Groupings Scales

54 {:data mtcars :geom :point :mapping {:y :mpg :x :wt}}

55 {:data mtcars :geom #point{:radius 4} :mapping {:y :mpg :x :wt}}

56 {:data mtcars :geom #point{:radius 4} :mapping {:y :mpg :x :cyl}}

57 {:data mtcars :geom :boxplot :mapping {:y :mpg :x :cyl}}

58 Data all the things

59 API Support {:data mtcars :mapping {:x :wt :y :mpg} :geom :point}

60 API Support {:data => mtcars, :mapping => {:x => :wt, :y => :mpg}, :geom => :point}

61 API Support {"data": mtcars, "mapping": {"x": "wt", "y": "mpg"}, "geom": "point"}

62 U can haz Programming

63 Spec --> Plot --> SVG/PDF/PNG {:data mtcars :mapping {:x :wt :y :mpg} :geom :point}

64 Spec --> Plot --> SVG/PDF/PNG {:height 500, :width 500, :title "", :layers ({:geoms (#point {:x 2.62, :y 21, :radius 10 :fill nil, :stroke nil} #point {:x 2.875, :y 21, :radius 10 :fill nil, :stroke nil}...), :mapping {:x :wt, :y :mpg}}), :scales {:x #linear{:domain [ ], :label :wt}, :y #linear{:domain [ ], :label :mpg}}}

65 Spec --> Plot --> SVG/PDF/PNG

66 Spec --> Plot --> SVG/PDF/PNG {:height 500, :width 500, :title "", :layers ({:geoms (#point {:x 2.62, :y 21, :radius 10 :fill nil, :stroke nil} #point {:x 2.875, :y 21, :radius 10 :fill nil, :stroke nil}...), :mapping {:x :wt, :y :mpg}}), :scales {:x #linear{:domain [ ], :label :wt}, :y #linear{:domain [ ], :label :mpg}}}

67 Spec --> Plot --> SVG/PDF/PNG --> Your code (-> {:data mtcars :mapping {:y :mpg, :x :wt} :geom :point} compile (assoc-in [:scales :y :domain] [0 40]) (assoc-in [:scales :x :label] "Vehicle Weight") render!)

68 Spec --> Plot --> SVG/PDF/PNG --> Your code

69 Decomplect A graphic consists of: Data Geometry Aesthetic mappings Statistics Groupings Scales

70 A grammar lets you say

71 A grammar lets you think

72 Kevin Lynagh Keming