histoslider
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 :)