Advanced D3 Charting

627 views

Published on

A presentation on creating reusable components with D3.js

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
627
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Advanced D3 Charting

  1. 1. Advanced D3 Charting Blake Dietz Daniel Ryan
  2. 2. What is ?
  3. 3. What is D3? • http://d3js.org/ • D3.js is a JavaScript library for manipulating for binding data to your documents. • D3 helps you bring data to life using HTML, canvas, SVG and CSS.
  4. 4. Why am I here?
  5. 5. Why am I here? ! • Learn how to make your D3 code cleaner • How to build reusable components • Get a better grasp of D3 by understanding the pattern it's built upon
  6. 6. Getting Started
  7. 7. Getting Started • SVG Conventions • Coordinate system • Selecting elements in the D.O.M. • d3.select() • Binding the data to elements • .selectAll('<element>').data(<your data>).enter() • CSS
  8. 8. Margin Conventions
  9. 9. Coordinate System Quirks x axis yaxis
  10. 10. Scales
  11. 11. Linear vs Ordinal Range Interval .rangePoints() .rangeBands() .rangeBand()
  12. 12. CSS for SVG /* typical CSS */ div { background: blue; } ! /* SVG CSS */ rects { fill: blue; shape-rendering: crisp-edges; } SVG elements use unique CSS styles
  13. 13. Selections
  14. 14. Selections are the basic data type in D3 ! // select all <rect> elements var rects = d3.selectAll("rect"); ! // set some attributes and styles rects.attr("height", 50); rects.attr("width", 20); rects.style("fill", “blue"); Applies the attributes and styles as a whole! (similar to jQuery)
  15. 15. Data
  16. 16. Data are Arrays (that's not a mistake data is the plural form of datum) Selections are arrays, data are arrays. Coincidence? Nope.
  17. 17. Data Binding ! Datum Element
  18. 18. Data Joins Enter Update Exit
  19. 19. ! Boiler Plate: http://jsfiddle.net/blakedietz/72aFH/2/ ! Final Product: http://jsfiddle.net/blakedietz/zxX98/1/ ! !
  20. 20. Divide Your Chart into Groupings (charts are like onions)
  21. 21. Layers Axes Data Text Interface <svg> <g id="Axes"></g> <g id="Data"></g> <g id="Text"></g> <g id="Interface"></g> </svg>
  22. 22. Under the Covers (getting intimate with d3)
  23. 23. Thanks! @dietztweetz @dcryan22

×