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

Requirements

d3.js and lodash

<!-- Dependencies -->
<script src="lodash.js"></script>
<script src="d3.js"></script>

Usage

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);

Customization

Options

• dateSelector
• valueSelector
• width
• height
• transitionDuration
• unit
• dateFormat: optional formatting of dates in tooltip
• valueFormat: optional formatting of values in tooltip
• forceLexicalOrder: optional, default true, set to false to force lexical reordering of ordinal dates
• commonScatter: false by default, use the same scatter for all sparklines (y axis)
• selectionTimeout: default 2000, time before tooltip disappears, 0 to disable
• tooltipYOffset: default 0, offset of the tooltip :warning: 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 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);

Bulk setting options on creation

Options can also be set once using an object.

var sparklines = d3.toucan.sparklines({
  height: 80,
  width: 250
});