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
 
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 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 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

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
Product School
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
DanBrown980551
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Tobias Schneck
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
Paul Groth
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
DianaGray10
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
Ralf Eggert
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Jeffrey Haguewood
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
Abida Shariff
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Thierry Lestable
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
Frank van Harmelen
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
Product School
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
Guy Korland
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
Cheryl Hung
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
Kari Kakkonen
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
Alan Dix
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
OnBoard
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
Product School
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
BookNet Canada
 

Recently uploaded (20)

From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
From Daily Decisions to Bottom Line: Connecting Product Work to Revenue by VP...
 
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
LF Energy Webinar: Electrical Grid Modelling and Simulation Through PowSyBl -...
 
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
Kubernetes & AI - Beauty and the Beast !?! @KCD Istanbul 2024
 
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMsTo Graph or Not to Graph Knowledge Graph Architectures and LLMs
To Graph or Not to Graph Knowledge Graph Architectures and LLMs
 
UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3UiPath Test Automation using UiPath Test Suite series, part 3
UiPath Test Automation using UiPath Test Suite series, part 3
 
PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)PHP Frameworks: I want to break free (IPC Berlin 2024)
PHP Frameworks: I want to break free (IPC Berlin 2024)
 
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
Slack (or Teams) Automation for Bonterra Impact Management (fka Social Soluti...
 
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptxIOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
IOS-PENTESTING-BEGINNERS-PRACTICAL-GUIDE-.pptx
 
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdfFIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
FIDO Alliance Osaka Seminar: FIDO Security Aspects.pdf
 
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
Empowering NextGen Mobility via Large Action Model Infrastructure (LAMI): pav...
 
Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*Neuro-symbolic is not enough, we need neuro-*semantic*
Neuro-symbolic is not enough, we need neuro-*semantic*
 
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
AI for Every Business: Unlocking Your Product's Universal Potential by VP of ...
 
GraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge GraphGraphRAG is All You need? LLM & Knowledge Graph
GraphRAG is All You need? LLM & Knowledge Graph
 
Key Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdfKey Trends Shaping the Future of Infrastructure.pdf
Key Trends Shaping the Future of Infrastructure.pdf
 
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdfFIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
FIDO Alliance Osaka Seminar: Passkeys and the Road Ahead.pdf
 
DevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA ConnectDevOps and Testing slides at DASA Connect
DevOps and Testing slides at DASA Connect
 
Epistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI supportEpistemic Interaction - tuning interfaces to provide information for AI support
Epistemic Interaction - tuning interfaces to provide information for AI support
 
Leading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdfLeading Change strategies and insights for effective change management pdf 1.pdf
Leading Change strategies and insights for effective change management pdf 1.pdf
 
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
De-mystifying Zero to One: Design Informed Techniques for Greenfield Innovati...
 
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...Transcript: Selling digital books in 2024: Insights from industry leaders - T...
Transcript: Selling digital books in 2024: Insights from industry leaders - T...
 

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