SlideShare une entreprise Scribd logo
1  sur  11
Télécharger pour lire hors ligne
BOSTON D3.JS
MAKE YOUR OWN CHARTING LIBRARY WITH D3
          Created by Erik Solen / @eriksolen
WHAT WE'LL DO TONIGHT
Show an example of wrapping up d3 code as a jQuery
   plugin and discuss the technologies involved.
Dig into the d3 code and mess around with different
                   parts of the viz.
WHY WE'RE DOING IT
Examples for d3 code can be excellent in what they do,
but often lack an opinion on how to package the viz for
                      general use.
I'm trying to remove the packaging as a barrier to entry
   and allow innovation with d3 to be more reusable.
BIG PICTURE
Lots of libraries
And frameworks
Used where appropriate
Makes a Serious Front End Stack
BIG PICTURE
TONIGHT'S FOCUS
SNEAK PEEK
STEPS TO GET SETUP
Repo https://github.com/solenoid/d3-plugin-talk
   1. Clone the Repo
   2. $ c d - l g n t l
          d 3pui-ak
   3. $ p t o - S m l H T S r e
          yhn m ipeTPevr
      Instructions are in the README.md
CODE EXAMPLES
   Potential for Success
     IMPORTANT FILES
examples/bike.html
examples/bike-config.js ( docs )
examples/bike-main.js ( docs )
plugins/matrix.js ( docs )
REFERENCES
D3.js
jQuery
jQuery UI
RequireJS
Lo-Dash (Underscore.js replacement)
THANKS
           ERIK SOLEN
           yieldbot.com
code and slides available on github

Contenu connexe

En vedette

Data as Currency - OPS
Data as Currency - OPSData as Currency - OPS
Data as Currency - OPSyieldbot
 
Instructions by the symbol ppt
Instructions by the symbol pptInstructions by the symbol ppt
Instructions by the symbol pptkamatchipmu
 
2011 bel 4kl
2011 bel 4kl2011 bel 4kl
2011 bel 4klRosislide
 
2012 ch p_vo-4kl
2012 ch p_vo-4kl2012 ch p_vo-4kl
2012 ch p_vo-4klRosislide
 
Zuch 2014 presentation GD12/11/2013
Zuch 2014 presentation GD12/11/2013Zuch 2014 presentation GD12/11/2013
Zuch 2014 presentation GD12/11/2013Andrey Hrutba
 
"Здоровый город" в Новосибирске
"Здоровый город" в Новосибирске"Здоровый город" в Новосибирске
"Здоровый город" в НовосибирскеАлексей Алексеев
 
Ch p 4-kl_12_maj_2010_test_klyuch
Ch p 4-kl_12_maj_2010_test_klyuchCh p 4-kl_12_maj_2010_test_klyuch
Ch p 4-kl_12_maj_2010_test_klyuchRosislide
 
Inventory management
Inventory managementInventory management
Inventory managementLarona Moleje
 
4kl ch p_test-2008
4kl ch p_test-20084kl ch p_test-2008
4kl ch p_test-2008Rosislide
 
Real-time Intent Beyond Search
Real-time Intent Beyond SearchReal-time Intent Beyond Search
Real-time Intent Beyond Searchyieldbot
 
Bel 4 kl-10_maj_2010-test_klyuchove
Bel 4 kl-10_maj_2010-test_klyuchoveBel 4 kl-10_maj_2010-test_klyuchove
Bel 4 kl-10_maj_2010-test_klyuchoveRosislide
 
Звук и буква Оо, По телефона
Звук и буква Оо, По телефонаЗвук и буква Оо, По телефона
Звук и буква Оо, По телефонаRosislide
 
Building a Lambda Architecture with Elasticsearch at Yieldbot
Building a Lambda Architecture with Elasticsearch at YieldbotBuilding a Lambda Architecture with Elasticsearch at Yieldbot
Building a Lambda Architecture with Elasticsearch at Yieldbotyieldbot
 
Подробен преразказ на разказ
Подробен преразказ на разказПодробен преразказ на разказ
Подробен преразказ на разказRosislide
 

En vedette (17)

Data as Currency - OPS
Data as Currency - OPSData as Currency - OPS
Data as Currency - OPS
 
Instructions by the symbol ppt
Instructions by the symbol pptInstructions by the symbol ppt
Instructions by the symbol ppt
 
2011 bel 4kl
2011 bel 4kl2011 bel 4kl
2011 bel 4kl
 
2012 ch p_vo-4kl
2012 ch p_vo-4kl2012 ch p_vo-4kl
2012 ch p_vo-4kl
 
Zuch 2014 presentation GD12/11/2013
Zuch 2014 presentation GD12/11/2013Zuch 2014 presentation GD12/11/2013
Zuch 2014 presentation GD12/11/2013
 
"Здоровый город" в Новосибирске
"Здоровый город" в Новосибирске"Здоровый город" в Новосибирске
"Здоровый город" в Новосибирске
 
Mapa capitulo 4 con audio
Mapa capitulo 4 con audioMapa capitulo 4 con audio
Mapa capitulo 4 con audio
 
CORINTHIANS
CORINTHIANSCORINTHIANS
CORINTHIANS
 
Ch p 4-kl_12_maj_2010_test_klyuch
Ch p 4-kl_12_maj_2010_test_klyuchCh p 4-kl_12_maj_2010_test_klyuch
Ch p 4-kl_12_maj_2010_test_klyuch
 
Inventory management
Inventory managementInventory management
Inventory management
 
4kl ch p_test-2008
4kl ch p_test-20084kl ch p_test-2008
4kl ch p_test-2008
 
Real-time Intent Beyond Search
Real-time Intent Beyond SearchReal-time Intent Beyond Search
Real-time Intent Beyond Search
 
Bel 4 kl-10_maj_2010-test_klyuchove
Bel 4 kl-10_maj_2010-test_klyuchoveBel 4 kl-10_maj_2010-test_klyuchove
Bel 4 kl-10_maj_2010-test_klyuchove
 
Звук и буква Оо, По телефона
Звук и буква Оо, По телефонаЗвук и буква Оо, По телефона
Звук и буква Оо, По телефона
 
Building a Lambda Architecture with Elasticsearch at Yieldbot
Building a Lambda Architecture with Elasticsearch at YieldbotBuilding a Lambda Architecture with Elasticsearch at Yieldbot
Building a Lambda Architecture with Elasticsearch at Yieldbot
 
Vietnamese cuisine
Vietnamese cuisineVietnamese cuisine
Vietnamese cuisine
 
Подробен преразказ на разказ
Подробен преразказ на разказПодробен преразказ на разказ
Подробен преразказ на разказ
 

Similaire à Make Your Own Charting Library with d3

API Doc Smackdown
API Doc SmackdownAPI Doc Smackdown
API Doc SmackdownTed Husted
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworksYuri Visser
 
Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014jlbaldwin
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.jsShakti Shrestha
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015Brian Coffey
 
Code analysis for a better future
Code analysis for a better futureCode analysis for a better future
Code analysis for a better futuregilforcada
 
Node.js Anti Patterns
Node.js Anti PatternsNode.js Anti Patterns
Node.js Anti PatternsBen Hall
 
Technology Trends
Technology TrendsTechnology Trends
Technology TrendsHenry Jacob
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1benDesigning
 
Microsoft, java and you!
Microsoft, java and you!Microsoft, java and you!
Microsoft, java and you!George Adams
 
Accurate and efficient software microbenchmarks
Accurate and efficient software microbenchmarksAccurate and efficient software microbenchmarks
Accurate and efficient software microbenchmarksDaniel Lemire
 
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdf
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdfs2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdf
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdfS2C Limited
 
Docker experience @inbotapp
Docker experience @inbotappDocker experience @inbotapp
Docker experience @inbotappJilles van Gurp
 
State of Akka 2017 - The best is yet to come
State of Akka 2017 - The best is yet to comeState of Akka 2017 - The best is yet to come
State of Akka 2017 - The best is yet to comeKonrad Malawski
 
Deploying deep learning models with Docker and Kubernetes
Deploying deep learning models with Docker and KubernetesDeploying deep learning models with Docker and Kubernetes
Deploying deep learning models with Docker and KubernetesPetteriTeikariPhD
 
React, D3 and the dataviz ecosystem
React, D3 and the dataviz ecosystemReact, D3 and the dataviz ecosystem
React, D3 and the dataviz ecosystemMarcos Iglesias
 
Docker @ FOSS4G 2016, Bonn
Docker @ FOSS4G 2016, BonnDocker @ FOSS4G 2016, Bonn
Docker @ FOSS4G 2016, BonnDaniel Nüst
 
Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019Matt Raible
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor FesenkoFwdays
 

Similaire à Make Your Own Charting Library with d3 (20)

API Doc Smackdown
API Doc SmackdownAPI Doc Smackdown
API Doc Smackdown
 
Lunch and learn as3_frameworks
Lunch and learn as3_frameworksLunch and learn as3_frameworks
Lunch and learn as3_frameworks
 
Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014Visdjango presentation django_boston_oct_2014
Visdjango presentation django_boston_oct_2014
 
Organized web app development using backbone.js
Organized web app development using backbone.jsOrganized web app development using backbone.js
Organized web app development using backbone.js
 
D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015D3 in Jupyter : PyData NYC 2015
D3 in Jupyter : PyData NYC 2015
 
Code analysis for a better future
Code analysis for a better futureCode analysis for a better future
Code analysis for a better future
 
Node.js Anti Patterns
Node.js Anti PatternsNode.js Anti Patterns
Node.js Anti Patterns
 
Fewd week4 slides
Fewd week4 slidesFewd week4 slides
Fewd week4 slides
 
Technology Trends
Technology TrendsTechnology Trends
Technology Trends
 
Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1Hacking the Kinect with GAFFTA Day 1
Hacking the Kinect with GAFFTA Day 1
 
Microsoft, java and you!
Microsoft, java and you!Microsoft, java and you!
Microsoft, java and you!
 
Accurate and efficient software microbenchmarks
Accurate and efficient software microbenchmarksAccurate and efficient software microbenchmarks
Accurate and efficient software microbenchmarks
 
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdf
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdfs2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdf
s2c-prototypical-the-emergence-of-fpga-based-prototyping-for-soc-design.pdf
 
Docker experience @inbotapp
Docker experience @inbotappDocker experience @inbotapp
Docker experience @inbotapp
 
State of Akka 2017 - The best is yet to come
State of Akka 2017 - The best is yet to comeState of Akka 2017 - The best is yet to come
State of Akka 2017 - The best is yet to come
 
Deploying deep learning models with Docker and Kubernetes
Deploying deep learning models with Docker and KubernetesDeploying deep learning models with Docker and Kubernetes
Deploying deep learning models with Docker and Kubernetes
 
React, D3 and the dataviz ecosystem
React, D3 and the dataviz ecosystemReact, D3 and the dataviz ecosystem
React, D3 and the dataviz ecosystem
 
Docker @ FOSS4G 2016, Bonn
Docker @ FOSS4G 2016, BonnDocker @ FOSS4G 2016, Bonn
Docker @ FOSS4G 2016, Bonn
 
Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019Front End Development for Back End Java Developers - South West Java 2019
Front End Development for Back End Java Developers - South West Java 2019
 
"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko"Platform Engineering with Development Containers", Igor Fesenko
"Platform Engineering with Development Containers", Igor Fesenko
 

Make Your Own Charting Library with d3

  • 1. BOSTON D3.JS MAKE YOUR OWN CHARTING LIBRARY WITH D3 Created by Erik Solen / @eriksolen
  • 2. WHAT WE'LL DO TONIGHT Show an example of wrapping up d3 code as a jQuery plugin and discuss the technologies involved. Dig into the d3 code and mess around with different parts of the viz.
  • 3. WHY WE'RE DOING IT Examples for d3 code can be excellent in what they do, but often lack an opinion on how to package the viz for general use. I'm trying to remove the packaging as a barrier to entry and allow innovation with d3 to be more reusable.
  • 4. BIG PICTURE Lots of libraries And frameworks Used where appropriate Makes a Serious Front End Stack
  • 8. STEPS TO GET SETUP Repo https://github.com/solenoid/d3-plugin-talk 1. Clone the Repo 2. $ c d - l g n t l d 3pui-ak 3. $ p t o - S m l H T S r e yhn m ipeTPevr Instructions are in the README.md
  • 9. CODE EXAMPLES Potential for Success IMPORTANT FILES examples/bike.html examples/bike-config.js ( docs ) examples/bike-main.js ( docs ) plugins/matrix.js ( docs )
  • 11. THANKS ERIK SOLEN yieldbot.com code and slides available on github