🔔 Alert..!! Get 2 Month Free Cloud Hosting With $200 Bonus From Digital Ocean ACTIVATE DEAL

histoslider is a D3 based histogram slider component for React. Useful for exploring distributions of things within data visualizations.

Chart_Graph React

Documentation

histoslider Circle CI

Greenkeeper badge

A D3 based histogram slider component for React. Useful for exploring distributions of things within data visualisations.

Usage

histoslider has a few peer dependencies. Make sure these are installed before you go any further.

  • react
  • react-dom
  • d3-array
  • d3-format
  • d3-scale

Then, to install, either

npm install histoslider --save

or

yarn add histoslider

Yay, glad we got that out of the way.

Component API

  <Histoslider     // An array of objects to create the histogram     data={[       {         x0: 0,    // Start of the bucket         x: 1,     // End of the bucket         y: 100    // Value       },       {         x0: 1,    // Start of the bucket         x: 2,     // End of the bucket         y: 120    // Value       },       ...     ]}     // How much to pad the slider and histogram by, defaults to 20     padding={20}     // The extent of the selection, this doesn't have to be sorted (and you shouldn't sort it to store it)     selection={[number, number]}     // A function to handle a change in the selection     onChange={array => { console.log(array) }}   />

more docs to come

Development

yarn start

Hack away :)


You May Also Like