0
Declarative web data               visualization using               ClojureScript                      Kevin Lynagh      ...
AgendaFriday, July 20, 12
1 ?                               Agenda                      What      is                      VisualizationFriday, July ...
Agenda  2Friday, July 20, 12                      doin’ it                      on the                      Internets
Agenda  3Friday, July 20, 12                       an                      Example
Agenda                      Why  4Friday, July 20, 12                      (not)                      Clojure
Anti-Agenda  0                      Tech                          Talk                      ideasFriday, July 20, 12
Friday, July 20, 12
1 ?                 What     is                      VisualizationFriday, July 20, 12
BioinformaticsFriday, July 20, 12
Wind energyFriday, July 20, 12
Doc & patient,                       meet                      DataFriday, July 20, 12
Friday, July 20, 12
Friday, July 20, 12
(didn’t make this,                           just ♥ it)Friday, July 20, 12
?        What                      do these things                           have in                 commonFriday, July 20...
DataFriday, July 20, 12                      Visual
Data: [17, 26, 53, 96]                      0    25       50      75     100Friday, July 20, 12
Data: [[1, 2] [3, 4] [5, 5] [6, 8]                                      [8, 13] [9, 16] [11, 18]]                      20 ...
Agenda  2Friday, July 20, 12                      doin’ it                      on the                      Internets
D3: Data Driven Documents (2011)                       Mike Bostock Jeffrey Heer   Vadim Ogievetsky                       ...
D3 (JavaScript)                      d3.select("body").selectAll("div")                        .data([17, 26, 53, 96])    ...
Awesome                      Declarative                       Easy to think, explore                       Optimizable   ...
Awesomer                      Clojure(Script)                       Rich data structures                       Namespaces ...
Clojure                       PhilosophyFriday, July 20, 12
Treat your                      data like            Data                       It is better to have 100 functions operate...
D3 (JavaScript)                      d3.select("body").selectAll("div")                        .data([17, 26, 53, 96])    ...
D3 (JavaScript)                      d3.select("body").selectAll("div")                        .data([17, 26, 53, 96])    ...
D3 (JavaScript)                      d3.select("body").selectAll("div")                        .data([17, 26, 53, 96])    ...
Agenda  3Friday, July 20, 12                       an                      Example
Friday, July 20, 12
Friday, July 20, 12
Start with your data          [{:flight-no 2, :price 106, :carrier "Alaska"            :depart 16.91, :arrive 21.42}      ...
Friday, July 20, 12
Friday, July 20, 12
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn(let [time-scale carrier depart :domain [0 24]          [{:keys [price (scale/linear a...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]} idx]         [:div.row           [:button.pric...
(unify! "#chart" flight-data     (fn [{:keys [price carrier depart arrive]}]         [:div.row           [:button.price (s...
(map flight-data     (fn [{:keys [price carrier depart arrive]}]         [:div.row           [:button.price (str "$" price...
(map flight-data     (fn [{:keys [price carrier depart arrive]}]         [:div.row           [:button.price (str "$" price...
C2                      http://keminglabs.com/c2                      http://github.com/lynaghk/c2Friday, July 20, 12
Advantages                       of the                      dataapproachFriday, July 20, 12
Declarative            (fn [{:keys [price carrier depart arrive]}]                [:div.row                  [:button.pric...
Declarative            (fn [{:keys [price carrier depart arrive]}]                [:div.row                  [:button.pric...
Declarative            (fn [{:keys [price carrier depart arrive]}]                [:div.row                  [:button.pric...
De                       co                            1) construction                            2) rendering            ...
Agenda                      Why  4Friday, July 20, 12                      (not)                      Clojure
Why Clojure              OpinionatedFriday, July 20, 12                      & Sane
Why Clojure                Runtimes:                      JVM   JavaScript                      CLR   Lua   CFriday, July ...
NotFriday, July 20, 12                      Clojure
Why not Clojure                      WTF                       is Clojure?Friday, July 20, 12
Why not Clojure                      Clojure is the #23 most                      popular language on GitHubFriday, July 2...
Why not Clojure                      Assembly is the #18 most                      popular language on GitHubFriday, July ...
Why not Clojure                      900+ forksFriday, July 20, 12
Friday, July 20, 12
Kevin Lynagh                 Keming Labs   @lynaghkFriday, July 20, 12
Upcoming SlideShare
Loading in...5
×

Declarative web data visualization using ClojureScript

2,599

Published on

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

No Downloads
Views
Total Views
2,599
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
30
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide

Transcript of "Declarative web data visualization using ClojureScript"

  1. 1. Declarative web data visualization using ClojureScript Kevin Lynagh 2012 July 20 Keming Labs @lynaghk OSCONFriday, July 20, 12
  2. 2. AgendaFriday, July 20, 12
  3. 3. 1 ? Agenda What is VisualizationFriday, July 20, 12
  4. 4. Agenda 2Friday, July 20, 12 doin’ it on the Internets
  5. 5. Agenda 3Friday, July 20, 12 an Example
  6. 6. Agenda Why 4Friday, July 20, 12 (not) Clojure
  7. 7. Anti-Agenda 0 Tech Talk ideasFriday, July 20, 12
  8. 8. Friday, July 20, 12
  9. 9. 1 ? What is VisualizationFriday, July 20, 12
  10. 10. BioinformaticsFriday, July 20, 12
  11. 11. Wind energyFriday, July 20, 12
  12. 12. Doc & patient, meet DataFriday, July 20, 12
  13. 13. Friday, July 20, 12
  14. 14. Friday, July 20, 12
  15. 15. (didn’t make this, just ♥ it)Friday, July 20, 12
  16. 16. ? What do these things have in commonFriday, July 20, 12
  17. 17. DataFriday, July 20, 12 Visual
  18. 18. Data: [17, 26, 53, 96] 0 25 50 75 100Friday, July 20, 12
  19. 19. Data: [[1, 2] [3, 4] [5, 5] [6, 8] [8, 13] [9, 16] [11, 18]] 20 15 10 5 0 0 3 6 9 12 15Friday, July 20, 12
  20. 20. Agenda 2Friday, July 20, 12 doin’ it on the Internets
  21. 21. D3: Data Driven Documents (2011) Mike Bostock Jeffrey Heer Vadim Ogievetsky +Friday, July 20, 12
  22. 22. D3 (JavaScript) d3.select("body").selectAll("div")   .data([17, 26, 53, 96])   .enter().append("div")   .style("width", function(d){d+"px";}); DOMFriday, July 20, 12
  23. 23. Awesome Declarative Easy to think, explore Optimizable Familiar representation HTML, CSS, SVG; dev tools No reinvented wheelsFriday, July 20, 12
  24. 24. Awesomer Clojure(Script) Rich data structures Namespaces Deliberate state/mutationFriday, July 20, 12
  25. 25. Clojure PhilosophyFriday, July 20, 12
  26. 26. Treat your data like Data It is better to have 100 functions operate on one data structure than 10 functions on 10 data structures. Alan PerlisFriday, July 20, 12
  27. 27. D3 (JavaScript) d3.select("body").selectAll("div")   .data([17, 26, 53, 96])   .enter().append("div")   .style("width", function(d){d+"px";});Friday, July 20, 12
  28. 28. D3 (JavaScript) d3.select("body").selectAll("div")   .data([17, 26, 53, 96])   .enter().append("div")   .style("width", function(d){d+"px";});Friday, July 20, 12
  29. 29. D3 (JavaScript) d3.select("body").selectAll("div")   .data([17, 26, 53, 96])   .enter().append("div")   .style("width", function(d){d+"px";}); Can we do better?Friday, July 20, 12
  30. 30. Agenda 3Friday, July 20, 12 an Example
  31. 31. Friday, July 20, 12
  32. 32. Friday, July 20, 12
  33. 33. Start with your data [{:flight-no 2, :price 106, :carrier "Alaska" :depart 16.91, :arrive 21.42} {:flight-no 1, :price 190, :carrier "United" :depart 6.20, :arrive 10.87} {:flight-no 5, :price 213, :carrier "United" :depart 4.73, :arrive 9.48} ... ]Friday, July 20, 12
  34. 34. Friday, July 20, 12
  35. 35. Friday, July 20, 12
  36. 36. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  37. 37. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  38. 38. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  39. 39. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  40. 40. (unify! "#chart" flight-data (fn(let [time-scale carrier depart :domain [0 24] [{:keys [price (scale/linear arrive]} idx] [:div.row :range :percent)] [:button.price (str "$" price)] [:div.flight ;=> “0%” (time-scale 0) {:style {:left (time-scale depart) (time-scale 12) ;=> “50%” :width (time-scale (- arrive depart))} (time-scale 24) ;=> “100%” ) :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  41. 41. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  42. 42. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  43. 43. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  44. 44. (unify! "#chart" flight-data (fn [{:keys [price carrier depart arrive]} idx] [:div.row [:button.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]]))Friday, July 20, 12
  45. 45. (unify! "#chart" 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]]]))Friday, July 20, 12
  46. 46. (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]]]))Friday, July 20, 12
  47. 47. (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]]]))Friday, July 20, 12
  48. 48. C2 http://keminglabs.com/c2 http://github.com/lynaghk/c2Friday, July 20, 12
  49. 49. Advantages of the dataapproachFriday, July 20, 12
  50. 50. Declarative (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]]])Friday, July 20, 12
  51. 51. Declarative (fn [{:keys [price carrier depart arrive]}] [:div.row [:button.price (str "$" price)] [:div.flight {:style (flight-style depart arrive) :carrier carrier} [:span carrier]]])Friday, July 20, 12
  52. 52. Declarative (fn [{:keys [price carrier depart arrive]}] [:div.row [:button.price (str "$" price)] [:div.flight {:style (merge {:background-color "blue"} (flight-style depart arrive)) :carrier carrier} [:span carrier]]])Friday, July 20, 12
  53. 53. De co 1) construction 2) rendering upleFriday, July 20, 12 d
  54. 54. Agenda Why 4Friday, July 20, 12 (not) Clojure
  55. 55. Why Clojure OpinionatedFriday, July 20, 12 & Sane
  56. 56. Why Clojure Runtimes: JVM JavaScript CLR Lua CFriday, July 20, 12
  57. 57. NotFriday, July 20, 12 Clojure
  58. 58. Why not Clojure WTF is Clojure?Friday, July 20, 12
  59. 59. Why not Clojure Clojure is the #23 most popular language on GitHubFriday, July 20, 12
  60. 60. Why not Clojure Assembly is the #18 most popular language on GitHubFriday, July 20, 12
  61. 61. Why not Clojure 900+ forksFriday, July 20, 12
  62. 62. Friday, July 20, 12
  63. 63. Kevin Lynagh Keming Labs @lynaghkFriday, July 20, 12
  1. A particular slide catching your eye?

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

×