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.
See this CodePen
See the Pen d3 sparklines by David Nowinsky (@davinov) on CodePen.
<script async src="//assets.codepen.io/assets/embed/ei.js"></script>
d3.js
and lodash
<!-- Dependencies -->
<script src="lodash.js"></script>
<script src="d3.js"></script>
Import the library
<link href="dist/tc-sparklines.css" rel="stylesheet">
<script src="tc-sparklines.js"></script>
Generate your sparkline creator
var sparklines = d3.toucan.sparklines()
.setSomeOptions(...);
Apply it to some d3 selection that have it's data already bound
d3.selectAll('.sparkline-element')
.call(sparklines);
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 :warning: The tooltip must be positioned in the<svg>
element bounds
Options are get/set in d3 style:
Get an option by passing no arguments
// Get the dateSelector value
sparklines.dateSelector();
// -> 'date'
Setting a value using the setter.
// Set the dateSelector value
sparklines.dateSelector('months');
The setters returns the object so it's easy to chain options.
// Set the dateSelector value
sparklines
.dateSelector('months')
.height(80)
.width(250);
Options can also be set once using an object.
var sparklines = d3.toucan.sparklines({
height: 80,
width: 250
});
How to run the tests? npm test
or npm run tdd