React-d3-hexbin NPM

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 (
      <div className="App">
        <HexbinPlot points={ data }
                    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,
                    }}/>
      </div>
    );
  }
}

export default App;