Skip to content

ToucanToco/sparklines

Repository files navigation

Sparklines

Trendy graphs

Circle CI

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.

<script async src="//assets.codepen.io/assets/embed/ei.js"></script>

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

Test suite

Explore the test suite

How to run the tests? npm test or npm run tdd