SlideShare a Scribd company logo
1 of 63
Download to read offline
Declarative web data
               visualization using
               ClojureScript




                      Kevin Lynagh       2012 July 20
                Keming Labs   @lynaghk       OSCON
Friday, July 20, 12
Agenda
Friday, July 20, 12
1 ?
                               Agenda



                      What      is
                      Visualization
Friday, July 20, 12
Agenda




  2
Friday, July 20, 12
                      doin’ it
                      on the
                      Internets
Agenda




  3
Friday, July 20, 12
                       an
                      Example
Agenda

                      Why

  4
Friday, July 20, 12
                      (not)

                      Clojure
Anti-Agenda




  0
                      Tech
                          Talk
                      ideas

Friday, July 20, 12
Friday, July 20, 12
1 ?                 What     is
                      Visualization
Friday, July 20, 12
Bioinformatics




Friday, July 20, 12
Wind energy




Friday, July 20, 12
Doc & patient,
                       meet



                      Data
Friday, 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

                 common
Friday, July 20, 12
Data

Friday, July 20, 12
                      Visual
Data: [17, 26, 53, 96]




                      0    25       50      75     100


Friday, 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       15
Friday, July 20, 12
Agenda




  2
Friday, 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";});



               DOM
Friday, July 20, 12
Awesome
                      Declarative
                       Easy to think, explore
                       Optimizable

                      Familiar representation
                       HTML, CSS, SVG; dev tools
                       No reinvented wheels
Friday, July 20, 12
Awesomer
                      Clojure(Script)
                       Rich data structures
                       Namespaces
                       Deliberate state/mutation



Friday, July 20, 12
Clojure
                       Philosophy
Friday, 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 Perlis
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";});




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




  3
Friday, 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/c2
Friday, July 20, 12
Advantages
                       of the

                      dataapproach
Friday, 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


                        uple
Friday, July 20, 12
                                      d
Agenda

                      Why

  4
Friday, July 20, 12
                      (not)

                      Clojure
Why Clojure


              Opinionated

Friday, July 20, 12
                      & Sane
Why Clojure

                Runtimes:
                      JVM   JavaScript

                      CLR   Lua   C
Friday, July 20, 12
Not
Friday, 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 GitHub




Friday, July 20, 12
Why not Clojure


                      Assembly is the #18 most
                      popular language on GitHub




Friday, July 20, 12
Why not Clojure



                      900+ forks


Friday, July 20, 12
Friday, July 20, 12
Kevin Lynagh
                 Keming Labs   @lynaghk




Friday, July 20, 12

More Related Content

Similar to Declarative web data visualization using ClojureScript

Mobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsMobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsJohn Cleveley
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)Oswald Campesato
 
Visual Api Training
Visual Api TrainingVisual Api Training
Visual Api TrainingSpark Summit
 

Similar to Declarative web data visualization using ClojureScript (7)

Googlevis examples
Googlevis examplesGooglevis examples
Googlevis examples
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
 
WebGL and three.js
WebGL and three.jsWebGL and three.js
WebGL and three.js
 
Mobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC NewsMobilism 2013: A story of how we built Responsive BBC News
Mobilism 2013: A story of how we built Responsive BBC News
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
 
SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)SVCC 2013 D3.js Presentation (10/05/2013)
SVCC 2013 D3.js Presentation (10/05/2013)
 
Visual Api Training
Visual Api TrainingVisual Api Training
Visual Api Training
 

More from OSCON Byrum

OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON Byrum
 
Protecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseProtecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseOSCON Byrum
 
Using Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataUsing Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataOSCON Byrum
 
Finite State Machines - Why the fear?
Finite State Machines - Why the fear?Finite State Machines - Why the fear?
Finite State Machines - Why the fear?OSCON Byrum
 
Open Source Automotive Development
Open Source Automotive DevelopmentOpen Source Automotive Development
Open Source Automotive DevelopmentOSCON Byrum
 
How we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenHow we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenOSCON Byrum
 
The Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonThe Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonOSCON Byrum
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with PythonOSCON Byrum
 
An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)OSCON Byrum
 
Oscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOSCON Byrum
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzOSCON Byrum
 
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON Byrum
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of usOSCON Byrum
 
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking OSCON Byrum
 
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...OSCON Byrum
 
A Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsA Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsOSCON Byrum
 
Life After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudLife After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudOSCON Byrum
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesOSCON Byrum
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platformsOSCON Byrum
 
Building an Ecosystem of FLOSS to Educate Students with Disabilities
Building an Ecosystem of FLOSS to Educate Students with DisabilitiesBuilding an Ecosystem of FLOSS to Educate Students with Disabilities
Building an Ecosystem of FLOSS to Educate Students with DisabilitiesOSCON Byrum
 

More from OSCON Byrum (20)

OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom FifieldOSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
OSCON 2013 - Planning an OpenStack Cloud - Tom Fifield
 
Protecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent LicenseProtecting Open Innovation with the Defensive Patent License
Protecting Open Innovation with the Defensive Patent License
 
Using Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open DataUsing Cascalog to build an app with City of Palo Alto Open Data
Using Cascalog to build an app with City of Palo Alto Open Data
 
Finite State Machines - Why the fear?
Finite State Machines - Why the fear?Finite State Machines - Why the fear?
Finite State Machines - Why the fear?
 
Open Source Automotive Development
Open Source Automotive DevelopmentOpen Source Automotive Development
Open Source Automotive Development
 
How we built our community using Github - Uri Cohen
How we built our community using Github - Uri CohenHow we built our community using Github - Uri Cohen
How we built our community using Github - Uri Cohen
 
The Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in PythonThe Vanishing Pattern: from iterators to generators in Python
The Vanishing Pattern: from iterators to generators in Python
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with Python
 
An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)An overview of open source in East Asia (China, Japan, Korea)
An overview of open source in East Asia (China, Japan, Korea)
 
Oscon 2013 Jesse Anderson
Oscon 2013 Jesse AndersonOscon 2013 Jesse Anderson
Oscon 2013 Jesse Anderson
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David Mertz
 
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
OSCON 2012 US Patriot Act Implications for Cloud Computing - Diane Mueller, A...
 
Big Data for each one of us
Big Data for each one of usBig Data for each one of us
Big Data for each one of us
 
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
BodyTrack: Open Source Tools for Health Empowerment through Self-Tracking
 
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...Using and Building Open Source in Google Corporate Engineering - Justin McWil...
Using and Building Open Source in Google Corporate Engineering - Justin McWil...
 
A Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed ApplicationsA Look at the Network: Searching for Truth in Distributed Applications
A Look at the Network: Searching for Truth in Distributed Applications
 
Life After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data CloudLife After Sharding: Monitoring and Management of a Complex Data Cloud
Life After Sharding: Monitoring and Management of a Complex Data Cloud
 
Faster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypesFaster! Faster! Accelerate your business with blazing prototypes
Faster! Faster! Accelerate your business with blazing prototypes
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platforms
 
Building an Ecosystem of FLOSS to Educate Students with Disabilities
Building an Ecosystem of FLOSS to Educate Students with DisabilitiesBuilding an Ecosystem of FLOSS to Educate Students with Disabilities
Building an Ecosystem of FLOSS to Educate Students with Disabilities
 

Recently uploaded

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...CzechDreamin
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCzechDreamin
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfEasyPrinterHelp
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekCzechDreamin
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka DoktorováCzechDreamin
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyJohn Staveley
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfChristopherTHyatt
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераMark Opanasiuk
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...FIDO Alliance
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?Mark Billinghurst
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfFIDO Alliance
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Julian Hyde
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlPeter Udo Diehl
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...CzechDreamin
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1DianaGray10
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024Stephanie Beckett
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaCzechDreamin
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKUXDXConf
 

Recently uploaded (20)

Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
Integrating Telephony Systems with Salesforce: Insights and Considerations, B...
 
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya HalderCustom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
Custom Approval Process: A New Perspective, Pavel Hrbacek & Anindya Halder
 
Buy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdfBuy Epson EcoTank L3210 Colour Printer Online.pdf
Buy Epson EcoTank L3210 Colour Printer Online.pdf
 
AI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří KarpíšekAI revolution and Salesforce, Jiří Karpíšek
AI revolution and Salesforce, Jiří Karpíšek
 
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová10 Differences between Sales Cloud and CPQ, Blanka Doktorová
10 Differences between Sales Cloud and CPQ, Blanka Doktorová
 
Demystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John StaveleyDemystifying gRPC in .Net by John Staveley
Demystifying gRPC in .Net by John Staveley
 
Agentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdfAgentic RAG What it is its types applications and implementation.pdf
Agentic RAG What it is its types applications and implementation.pdf
 
Intro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджераIntro in Product Management - Коротко про професію продакт менеджера
Intro in Product Management - Коротко про професію продакт менеджера
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
The Metaverse: Are We There Yet?
The  Metaverse:    Are   We  There  Yet?The  Metaverse:    Are   We  There  Yet?
The Metaverse: Are We There Yet?
 
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdfIntroduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
Introduction to FDO and How It works Applications _ Richard at FIDO Alliance.pdf
 
Syngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdfSyngulon - Selection technology May 2024.pdf
Syngulon - Selection technology May 2024.pdf
 
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
Measures in SQL (a talk at SF Distributed Systems meetup, 2024-05-22)
 
Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024Enterprise Knowledge Graphs - Data Summit 2024
Enterprise Knowledge Graphs - Data Summit 2024
 
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo DiehlFuture Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
Future Visions: Predictions to Guide and Time Tech Innovation, Peter Udo Diehl
 
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
Behind the Scenes From the Manager's Chair: Decoding the Secrets of Successfu...
 
UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1UiPath Test Automation using UiPath Test Suite series, part 1
UiPath Test Automation using UiPath Test Suite series, part 1
 
What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024What's New in Teams Calling, Meetings and Devices April 2024
What's New in Teams Calling, Meetings and Devices April 2024
 
Powerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara LaskowskaPowerful Start- the Key to Project Success, Barbara Laskowska
Powerful Start- the Key to Project Success, Barbara Laskowska
 
Connecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAKConnecting the Dots in Product Design at KAYAK
Connecting the Dots in Product Design at KAYAK
 

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
  • 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
  • 9. 1 ? What is Visualization Friday, July 20, 12
  • 12. Doc & patient, meet Data 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
  • 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
  • 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
  • 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
  • 63. Kevin Lynagh Keming Labs @lynaghk Friday, July 20, 12