SlideShare a Scribd company logo

Make Your Own Charting Library with d3

•
•
yieldbot
yieldbot

This document outlines a talk about making reusable charting libraries with D3.js. It will show an example of wrapping D3 code into a jQuery plugin and discuss the relevant technologies. Attendees will learn steps to set up a sample project, see code examples, and get references for further learning. The goal is to remove barriers to reusing D3 visualizations.

Related slideshows

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
 
1 of 11
Download to read offline
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

More Related Content

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