D3 tips & tricks (PDF)

Intro
Prerequisites
HTML
Javascript
CSS
Web servers
PHP
other
Starters - a basic graph
HTML
CSS
D3 javascript
wrapup
Basic graph features
Axis labels
Titles
Line smoothing
Grid lines
Dashed lines
Filling area under graph
Text with drop shadows
Multiple lines on a graph
Labeling multiple lines
Multiple axes
Rotating text labels
Time/date axis formats
Dynamic data updates
Elements, attributes, styles
Framework
Elements
  • Circles
  • Ellipses
  • Rectangles
  • Lines
  • Polylines
  • Polygons
  • Paths
  • Clipped Paths
  • Text
Attributes
  • x,y
  • x1,y1,x2,y2
  • points
  • cx,cy
  • r
  • rx,ry
  • translate, scale, rotate
  • width, height
  • text-anchor
  • dx,dy
  • textLength
  • lengthAdjust
Styles
  • fill
  • stroke
  • opacity
  • fill-opacity
  • stroke-opacity
  • stroke-width
  • stroke-dasharray
  • stroke-linecap
  • stroke-linejoin
  • writing-mode
  • glyph-orientation-vertical
  • styles & CSS
Assorted tips & tricks
Line chart -> scatter plot
Tooltips
Predefined colors
Selecting subsets of objects
Selecting objects with IF
Color gradients
Show/hide elements based on clicks
Export images to SVG or bitmap
HTML inputs
HTML tables
HTML tables, enhanced
Web links
JSON
Yahoo query language
Plunker hosting
Bar charts
Data
Code
Discussion
Tree diagrams
Intro
Simple example
Node styles
Vertical tree diagrams
Trees from 'flat' data
Trees from external data
Trees from CSV data
Interactive trees
Force layout diagrams
Definition
Examples
Bullet charts
Intro
Code
Changing chart components
Mapping
Examples
GeoJSON, TopoJSON
Simple map
Zooming & panning
Point display
d3.js with leaflet.js
Examples, explained
Historical stock records
Linux processes
Multiline graphs
Tooltip methods
Event data
Difference chart
Data discovery
Crossfilters
dc.js
Barebones structure
Adding a bar chart
Adding a line chart
Adding tooltips
Adding a row chart
Adding a pie chart
Resetting filters
Reset all charts
Bootstrap and d3.js
What is it?
Incorporating bootstrap
Multiple graphs on one page
Bootstrap grid layout
Working with Github, Gist, bl.ocks.org
bl.ocks.org
bl.ocks.org plugin installation
Loading thumbnails to Gist