A simple component to render a sparkline with D3

by React

d3-react-sparkline

A simple component to render a sparkline with D3 using react-faux-dom.

Usage

If you're working on this repository you can use make to set everything up.

# Fetch the dependencies
make bootstrap

# Start the development server
# http://localhost:3000
make start

If you're using this component as an end user you can simply import the component and give it some data.

<Sparkline width={180} height={60} data={[10, 16, 5, 22, 3, 11]} />

You can also specify interpolation as [one of D3s own][interpos] or a custom function. It maps directly to the .interpolate() method within the D3 API.

Style it with something like this (presuming you set a className to visitors):

.visitors .sparkline {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}

Want to work on this for your day job?

This project was created by the Engineering team at [Qubit][]. As we use open source libraries, we make our projects public where possible.

We're currently looking to grow our team, so if you're a JavaScript engineer and keen on ES2016 React+Redux applications and Node micro services, why not get in touch? Work with like minded engineers in an environment that has fantastic perks, including an annual ski trip, yoga, a competitive foosball league, and copious amounts of yogurt.

Find more details on our [Engineering site][eng]. Don’t have an up to date CV? Just link us your GitHub profile! Better yet, send us a pull request that improves this project.

GitHub