JavaScript CoffeeScript HTML CSS
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
dist
examples
src
test
.gitignore
LICENSE
README.md
bower.json
gulpfile.coffee
gulpfile.js
index.html
package.json
tests.html

README.md

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 ⚠️ 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