SlideShare a Scribd company logo
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

Googlevis examples
Googlevis examplesGooglevis examples
Googlevis examples
Dr. Volkan OBAN
 
JQuery Flot
JQuery FlotJQuery Flot
JQuery Flot
Arshavski Alexander
 
WebGL and three.js
WebGL and three.jsWebGL and three.js
WebGL and three.js
Anton Narusberg
 
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
John Cleveley
 
Svcc 2013-d3
Svcc 2013-d3Svcc 2013-d3
Svcc 2013-d3
Oswald Campesato
 
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 Training
Spark 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 Fifield
OSCON 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 License
OSCON 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 Data
OSCON 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 Development
OSCON 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 Cohen
OSCON 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 Python
OSCON Byrum
 
Distributed Coordination with Python
Distributed Coordination with PythonDistributed Coordination with Python
Distributed Coordination with Python
OSCON 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 Anderson
OSCON Byrum
 
US Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David MertzUS Patriot Act OSCON2012 David Mertz
US Patriot Act OSCON2012 David Mertz
OSCON 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 us
OSCON 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 Applications
OSCON 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 Cloud
OSCON 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 prototypes
OSCON Byrum
 
Comparing open source private cloud platforms
Comparing open source private cloud platformsComparing open source private cloud platforms
Comparing open source private cloud platforms
OSCON 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 Disabilities
OSCON 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

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
Neo4j
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
Daiki Mogmet Ito
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
Neo4j
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
kumardaparthi1024
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Paige Cruz
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
danishmna97
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
Neo4j
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
DianaGray10
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
名前 です男
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
Neo4j
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
Quotidiano Piemontese
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
shyamraj55
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
Kumud Singh
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
Mariano Tinti
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
Alpen-Adria-Universität
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
SOFTTECHHUB
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
IndexBug
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
panagenda
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
Octavian Nadolu
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
Zilliz
 

Recently uploaded (20)

GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
GraphSummit Singapore | Enhancing Changi Airport Group's Passenger Experience...
 
How to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For FlutterHow to use Firebase Data Connect For Flutter
How to use Firebase Data Connect For Flutter
 
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
GraphSummit Singapore | Graphing Success: Revolutionising Organisational Stru...
 
GenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizationsGenAI Pilot Implementation in the organizations
GenAI Pilot Implementation in the organizations
 
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdfObservability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
Observability Concepts EVERY Developer Should Know -- DeveloperWeek Europe.pdf
 
How to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptxHow to Get CNIC Information System with Paksim Ga.pptx
How to Get CNIC Information System with Paksim Ga.pptx
 
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
GraphSummit Singapore | The Future of Agility: Supercharging Digital Transfor...
 
UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6UiPath Test Automation using UiPath Test Suite series, part 6
UiPath Test Automation using UiPath Test Suite series, part 6
 
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
みなさんこんにちはこれ何文字まで入るの?40文字以下不可とか本当に意味わからないけどこれ限界文字数書いてないからマジでやばい文字数いけるんじゃないの?えこ...
 
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
GraphSummit Singapore | Neo4j Product Vision & Roadmap - Q2 2024
 
National Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practicesNational Security Agency - NSA mobile device best practices
National Security Agency - NSA mobile device best practices
 
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with SlackLet's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
Let's Integrate MuleSoft RPA, COMPOSER, APM with AWS IDP along with Slack
 
Mind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AIMind map of terminologies used in context of Generative AI
Mind map of terminologies used in context of Generative AI
 
Mariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceXMariano G Tinti - Decoding SpaceX
Mariano G Tinti - Decoding SpaceX
 
Video Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the FutureVideo Streaming: Then, Now, and in the Future
Video Streaming: Then, Now, and in the Future
 
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
Why You Should Replace Windows 11 with Nitrux Linux 3.5.0 for enhanced perfor...
 
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial IntelligenceAI 101: An Introduction to the Basics and Impact of Artificial Intelligence
AI 101: An Introduction to the Basics and Impact of Artificial Intelligence
 
HCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAUHCL Notes and Domino License Cost Reduction in the World of DLAU
HCL Notes and Domino License Cost Reduction in the World of DLAU
 
Artificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopmentArtificial Intelligence for XMLDevelopment
Artificial Intelligence for XMLDevelopment
 
Full-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalizationFull-RAG: A modern architecture for hyper-personalization
Full-RAG: A modern architecture for hyper-personalization
 

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