Successfully reported this slideshow.
Your SlideShare is downloading. ×

Declarative web data visualization using ClojureScript

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Loading in …3
×

Check these out next

1 of 63 Ad
Advertisement

More Related Content

More from OSCON Byrum (20)

Advertisement

Declarative web data visualization using ClojureScript

  1. Declarative web data visualization using ClojureScript Kevin Lynagh 2012 July 20 Keming Labs @lynaghk OSCON Friday, July 20, 12
  2. Agenda Friday, July 20, 12
  3. 1 ? Agenda What is Visualization Friday, July 20, 12
  4. Agenda 2 Friday, July 20, 12 doin’ it on the Internets
  5. Agenda 3 Friday, July 20, 12 an Example
  6. Agenda Why 4 Friday, July 20, 12 (not) Clojure
  7. Anti-Agenda 0 Tech Talk ideas Friday, July 20, 12
  8. Friday, July 20, 12
  9. 1 ? What is Visualization Friday, July 20, 12
  10. Bioinformatics Friday, July 20, 12
  11. Wind energy Friday, July 20, 12
  12. Doc & patient, meet Data Friday, July 20, 12
  13. Friday, July 20, 12
  14. Friday, July 20, 12
  15. (didn’t make this, just ♥ it) Friday, July 20, 12
  16. ? What do these things have in common Friday, July 20, 12
  17. Data Friday, July 20, 12 Visual
  18. Data: [17, 26, 53, 96] 0 25 50 75 100 Friday, July 20, 12
  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 15 Friday, July 20, 12
  20. Agenda 2 Friday, July 20, 12 doin’ it on the Internets
  21. D3: Data Driven Documents (2011) Mike Bostock Jeffrey Heer Vadim Ogievetsky + Friday, July 20, 12
  22. D3 (JavaScript) d3.select("body").selectAll("div")   .data([17, 26, 53, 96])   .enter().append("div")   .style("width", function(d){d+"px";}); DOM Friday, July 20, 12
  23. Awesome Declarative Easy to think, explore Optimizable Familiar representation HTML, CSS, SVG; dev tools No reinvented wheels Friday, July 20, 12
  24. Awesomer Clojure(Script) Rich data structures Namespaces Deliberate state/mutation Friday, July 20, 12
  25. Clojure Philosophy Friday, July 20, 12
  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 Perlis Friday, July 20, 12
  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. 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. 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. Agenda 3 Friday, July 20, 12 an Example
  31. Friday, July 20, 12
  32. Friday, July 20, 12
  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. Friday, July 20, 12
  35. Friday, July 20, 12
  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. (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. (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. (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. (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. (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. (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. (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. (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. (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. (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. (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. C2 http://keminglabs.com/c2 http://github.com/lynaghk/c2 Friday, July 20, 12
  49. Advantages of the dataapproach Friday, July 20, 12
  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. 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. 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. De co 1) construction 2) rendering uple Friday, July 20, 12 d
  54. Agenda Why 4 Friday, July 20, 12 (not) Clojure
  55. Why Clojure Opinionated Friday, July 20, 12 & Sane
  56. Why Clojure Runtimes: JVM JavaScript CLR Lua C Friday, July 20, 12
  57. Not Friday, July 20, 12 Clojure
  58. Why not Clojure WTF is Clojure? Friday, July 20, 12
  59. Why not Clojure Clojure is the #23 most popular language on GitHub Friday, July 20, 12
  60. Why not Clojure Assembly is the #18 most popular language on GitHub Friday, July 20, 12
  61. Why not Clojure 900+ forks Friday, July 20, 12
  62. Friday, July 20, 12
  63. Kevin Lynagh Keming Labs @lynaghk Friday, July 20, 12

×