All Projects → samhogg → histoslider

samhogg / histoslider

Licence: MIT license
📊 A D3 based histogram slider component for React.

Programming Languages

javascript
184084 projects - #8 most used programming language
HTML
75241 projects

Projects that are alternatives of or similar to histoslider

tiny-ui
⚛️ A friendly UI component set for React.js
Stars: ✭ 202 (+551.61%)
Mutual labels:  react-component
react-table-filter
Create Filters on table column items(like Excel)
Stars: ✭ 54 (+74.19%)
Mutual labels:  react-component
react-crossfade-image
react-crossfade-image - Simple React component for crossfading images - No CSS needed
Stars: ✭ 33 (+6.45%)
Mutual labels:  react-component
react-simple-image-slider
simple image slider component for react
Stars: ✭ 127 (+309.68%)
Mutual labels:  react-component
esn
这是一个常用js小型工具库
Stars: ✭ 15 (-51.61%)
Mutual labels:  react-component
react-drag-list
A simple draggable list component。
Stars: ✭ 30 (-3.23%)
Mutual labels:  react-component
ansible
Ansible playbook automation for pfelk
Stars: ✭ 23 (-25.81%)
Mutual labels:  dashboards
react-material-datetimepicker
Material DateTime Picker для React.js
Stars: ✭ 12 (-61.29%)
Mutual labels:  react-component
react-parallax-card
[wip] React component for a 3D card with parallax effects similar to Apple TV app icons.
Stars: ✭ 21 (-32.26%)
Mutual labels:  react-component
react-credit-cards
Beautiful credit cards for your payment forms
Stars: ✭ 2,386 (+7596.77%)
Mutual labels:  react-component
react-infinite-scroller
⏬ Infinite scroll component for React in ES6
Stars: ✭ 3,064 (+9783.87%)
Mutual labels:  react-component
fhir-questionnaire-render-react
Render FHIR Questionnaire as a web form using FHIRFormJS
Stars: ✭ 18 (-41.94%)
Mutual labels:  react-component
rspark
▁▂▆▇▁▄█▁ Sparklines for Rust apps
Stars: ✭ 50 (+61.29%)
Mutual labels:  histogram
VOSviewer-Online
VOSviewer Online is a tool for network visualization. It is a web-based version of VOSviewer, a popular tool for constructing and visualizing bibliometric networks.
Stars: ✭ 44 (+41.94%)
Mutual labels:  react-component
fluent-windows
🌈 React components that inspired by Microsoft's Fluent Design System.
Stars: ✭ 122 (+293.55%)
Mutual labels:  react-component
react-mathjax-preview
The MathJax React component you were looking for.
Stars: ✭ 46 (+48.39%)
Mutual labels:  react-component
neuro-lab.github.io
📊 NĖURO is 100% pure frontend dashboard
Stars: ✭ 17 (-45.16%)
Mutual labels:  dashboards
dash.js
⚒️ Reactive UI components and framework for modular dashboards.
Stars: ✭ 74 (+138.71%)
Mutual labels:  dashboards
react-crud-icons
57 SVG icons for CRUD applications, packaged as a React component with light & dark themes and tooltip.
Stars: ✭ 19 (-38.71%)
Mutual labels:  react-component
react-timepicker
React timepicker in Android KitKat style
Stars: ✭ 23 (-25.81%)
Mutual labels:  react-component

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

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].