• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Declarative web data visualization using ClojureScript
 

Declarative web data visualization using ClojureScript

on

  • 1,923 views

 

Statistics

Views

Total Views
1,923
Views on SlideShare
1,870
Embed Views
53

Actions

Likes
4
Downloads
17
Comments
0

1 Embed 53

http://lanyrd.com 53

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    Declarative web data visualization using ClojureScript Declarative web data visualization using ClojureScript Presentation Transcript

    • Declarative web data visualization using ClojureScript Kevin Lynagh 2012 July 20 Keming Labs @lynaghk OSCONFriday, July 20, 12
    • AgendaFriday, July 20, 12
    • 1 ? Agenda What is VisualizationFriday, July 20, 12
    • 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, 12
    • 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 15 10 5 0 0 3 6 9 12 15Friday, July 20, 12
    • Agenda 2Friday, July 20, 12 doin’ it on the Internets
    • D3: Data Driven Documents (2011) Mike Bostock Jeffrey Heer Vadim Ogievetsky +Friday, July 20, 12
    • 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
    • Awesome Declarative Easy to think, explore Optimizable Familiar representation HTML, CSS, SVG; dev tools No reinvented wheelsFriday, July 20, 12
    • Awesomer Clojure(Script) Rich data structures Namespaces Deliberate state/mutationFriday, July 20, 12
    • Clojure PhilosophyFriday, July 20, 12
    • 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
    • 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
    • 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
    • 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
    • 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} {: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
    • Friday, July 20, 12
    • Friday, July 20, 12
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • (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
    • 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.price (str "$" price)] [:div.flight {:style {:left (time-scale depart) :width (time-scale (- arrive depart))} :carrier carrier} [:span carrier]]])Friday, July 20, 12
    • 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
    • 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
    • De co 1) construction 2) rendering upleFriday, July 20, 12 d
    • Agenda Why 4Friday, July 20, 12 (not) Clojure
    • Why Clojure OpinionatedFriday, July 20, 12 & Sane
    • Why Clojure Runtimes: JVM JavaScript CLR Lua CFriday, July 20, 12
    • 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 20, 12
    • Why not Clojure Assembly is the #18 most popular language on GitHubFriday, July 20, 12
    • Why not Clojure 900+ forksFriday, July 20, 12
    • Friday, July 20, 12
    • Kevin Lynagh Keming Labs @lynaghkFriday, July 20, 12