advanced d3 charting
DESCRIPTION
A presentation on creating reusable components with D3.jsTRANSCRIPT
![Page 1: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/1.jpg)
Advanced D3 Charting
Blake Dietz Daniel Ryan
![Page 2: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/2.jpg)
What is ?
![Page 3: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/3.jpg)
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.
![Page 4: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/4.jpg)
Why am I here?
![Page 5: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/5.jpg)
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
![Page 6: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/6.jpg)
Getting Started
![Page 7: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/7.jpg)
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
![Page 8: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/8.jpg)
Margin Conventions
![Page 9: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/9.jpg)
Coordinate System Quirksx axis
y ax
is
![Page 10: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/10.jpg)
Scales
![Page 11: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/11.jpg)
Linear vs Ordinal
Range Interval
.rangePoints()
.rangeBands()
.rangeBand()
![Page 12: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/12.jpg)
CSS for SVG/* typical CSS */ div { background: blue; } !/* SVG CSS */ rects { fill: blue; shape-rendering: crisp-edges; }
SVG elements use unique CSS
styles
![Page 13: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/13.jpg)
Selections
![Page 14: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/14.jpg)
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)
![Page 15: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/15.jpg)
Data
![Page 16: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/16.jpg)
Data are Arrays (that's not a mistake data is the plural form of datum)
Selections are arrays, data are arrays. Coincidence? Nope.
![Page 17: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/17.jpg)
Data Binding !Datum Element
![Page 18: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/18.jpg)
Data Joins
Enter Update Exit
![Page 19: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/19.jpg)
!
Boiler Plate: http://jsfiddle.net/blakedietz/72aFH/2/
!
Final Product: http://jsfiddle.net/blakedietz/zxX98/1/
!
!
![Page 20: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/20.jpg)
Divide Your Chart into Groupings
(charts are like onions)
![Page 21: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/21.jpg)
Layers
Axes
Data
TextInterface
<svg> <g id="Axes"></g> <g id="Data"></g> <g id="Text"></g> <g id="Interface"></g> </svg>
![Page 22: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/22.jpg)
Under the Covers (getting intimate with d3)
![Page 23: Advanced D3 Charting](https://reader034.vdocuments.site/reader034/viewer/2022042515/554bc010b4c9053a298b5061/html5/thumbnails/23.jpg)
Thanks!@dietztweetz @dcryan22