Your SlideShare is downloading. ×
Advanced D3 Charting
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Advanced D3 Charting

262
views

Published on

A presentation on creating reusable components with D3.js

A presentation on creating reusable components with D3.js


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
262
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
26
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Advanced D3 Charting Blake Dietz Daniel Ryan
  • 2. What is ?
  • 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. Why am I here?
  • 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. Getting Started
  • 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. Margin Conventions
  • 9. Coordinate System Quirks x axis yaxis
  • 10. Scales
  • 11. Linear vs Ordinal Range Interval .rangePoints() .rangeBands() .rangeBand()
  • 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. Selections
  • 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. Data
  • 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. Data Binding ! Datum Element
  • 18. Data Joins Enter Update Exit
  • 19. ! Boiler Plate: http://jsfiddle.net/blakedietz/72aFH/2/ ! Final Product: http://jsfiddle.net/blakedietz/zxX98/1/ ! !
  • 20. Divide Your Chart into Groupings (charts are like onions)
  • 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. Under the Covers (getting intimate with d3)
  • 23. Thanks! @dietztweetz @dcryan22