More Related Content Similar to Declarative web data visualization using ClojureScript (7) More from OSCON Byrum (20) Declarative web data visualization using ClojureScript1. Declarative web data
visualization using
ClojureScript
Kevin Lynagh 2012 July 20
Keming Labs @lynaghk OSCON
Friday, July 20, 12
3. 1 ?
Agenda
What is
Visualization
Friday, July 20, 12
6. Agenda
Why
4
Friday, July 20, 12
(not)
Clojure
9. 1 ? What is
Visualization
Friday, July 20, 12
16. ?
What
do these things
have in
common
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
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
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
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
56. Why Clojure
Runtimes:
JVM JavaScript
CLR Lua C
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