react-d3-hexbin

![NPM](https://npmjs.org/package/react-d3-hexbin)

> An easily customisable, responsive react hexbin plot component

Installation

npm i react-d3-hexbin --save or yarn add react-d3-hexbin

Usage

```import React, { Component } from 'react'; import { randomNormal } from 'd3-random'; import { range } from 'd3-array'; import HexbinPlot from 'react-d3-hexbin';

class App extends Component { render() { const randomX = randomNormal(0, 1); const randomY = randomNormal(0, 1); const data = range(20000).map(() => [randomX(), randomY()] ); return (


                            width={ 600 }
                    height={ 600 }
                    radius={ 10 }
                    title={{
                      text: "Title",
                      font: 30,
                      color: '#ff1234',
                    }}
                    xLabel={{
                      text: "x-label",
                      font: 20,
                      color: '#000000',
                    }}
                    yLabel={{
                      text: "y-label",
                      font: 20,
                      color: '#000000',
                    }}
                    defaultColor="steelblue"
                    colorFilters={{
                      "red": (x, y) => y > x*x,
                      "green": (x, y) => y > 1/x,
                    }}/>


    );
  }
}

export default App;``

`Required properties`

* points * width * height * radius * defaultColor

`Optional properties`

* title * xLabel * yLabel * colorFilters * horizontalLines * verticalLines * grid * filter

`Demo`

https://react-d3-hexbin.firebaseapp.com/

To run demo on your own computer:

* Clone this repository *npm install*npm start`
* Visit http://localhost:3000/

Authors

* Hobin Ryu (hobincar@kaist.ac.kr)

License

Usage

```


import React, { Component } from 'react';
import { randomNormal } from 'd3-random';
import { range } from 'd3-array';
import HexbinPlot from 'react-d3-hexbin';

class App extends Component {
  render() {
    const randomX = randomNormal(0, 1);
    const randomY = randomNormal(0, 1);
    const data = range(20000).map(() => [randomX(), randomY()] );
    return (


                            width={ 600 }
                    height={ 600 }
                    radius={ 10 }
                    title={{
                      text: "Title",
                      font: 30,
                      color: '#ff1234',
                    }}
                    xLabel={{
                      text: "x-label",
                      font: 20,
                      color: '#000000',
                    }}
                    yLabel={{
                      text: "y-label",
                      font: 20,
                      color: '#000000',
                    }}
                    defaultColor="steelblue"
                    colorFilters={{
                      "red": (x, y) => y > x*x,
                      "green": (x, y) => y > 1/x,
                    }}/>

);
}
}

export default App;