Sparklines
Trendy graphs
Called on a selection of element, this component creates a sparkline for each member of the selection, based on data already bind to it.
The whole selection behaves like a group, which means the scales and the selection are coherent.
Example
See this CodePen
See the Pen d3 sparklines by David Nowinsky (@davinov) on CodePen.
Requirements
d3.js
and lodash
<!-- Dependencies -->
Usage
Import the library
Generate your sparkline creator
var sparklines = d3toucan ;
Apply it to some d3 selection that have it's data already bound
d3 ;
Customization
Options
dateSelector
valueSelector
width
height
transitionDuration
unit
dateFormat
: optional formatting of dates in tooltipvalueFormat
: optional formatting of values in tooltipforceLexicalOrder
: optional, default true, set to false to force lexical reordering of ordinal datescommonScatter
: false by default, use the same scatter for all sparklines (y axis)selectionTimeout
: default 2000, time before tooltip disappears, 0 to disabletooltipYOffset
: default 0, offset of the tooltip ⚠️ The tooltip must be positioned in the<svg>
element bounds
Get/set an option
Options are get/set in d3 style:
Get an option by passing no arguments
// Get the dateSelector valuesparklines;// -> 'date'
Setting a value using the setter.
// Set the dateSelector valuesparklines;
The setters returns the object so it's easy to chain options.
// Set the dateSelector valuesparklines height80 width250;
Bulk setting options on creation
Options can also be set once using an object.
var sparklines = d3toucan;