# react-d3-graphics

A small library wirth d3 graphs to use in your application.

[Here a live demo](https://vldvel.github.io/react-d3-graphics/build/index.html)


### Install

`npm i react-d3-graphics`


### Screenshots


- SCREENSHOT 1
[![react-d3-graphics TreeMap](https://github.com/vldvel/react-d3-graphics/blob/master/public/TreeMap.png?raw=true)]
- SCREENSHOT 2
[![react-d3-graphics LineChart](https://github.com/vldvel/react-d3-graphics/blob/master/public/LineChart.png?raw=true)]
- SCREENSHOT 3
[![react-d3-graphics MultiLineChart](https://github.com/vldvel/react-d3-graphics/blob/master/public/MultiLineChart.png?raw=true)]

## Available Scripts

In the project directory, you can run:

### `npm start`

Runs the app in the development mode.<br>
Open [http://localhost:3000](http://localhost:3000) to view it in the browser.

### `npm run build`

Builds the demo page to the `build` folder.


## How to use

### Using TreeMap

```javascript
import { TreeMap } from 'react-d3-graphics'

class SomeComponent extends React.Component {
  render() {
    
    const data = {
      name: 'GraphName',
      children: [
        {
          name: 'Children 1',
          rate: 1,
          size: 100
        },
        {
          name: 'Children 2',
          rate: 0,
          size: 50
        },
        {
          name: 'Children 3',
          rate: 5,
          size: 400
        }
      ]
    }

    return (
      <TreeMap
        data={data}
        width={window.innerWidth}
        height={window.innerHeight}
      />
    )
  }
}
```


### Using LineChart

```javascript
import { LineChart } from 'react-d3-graphics'

class SomeComponent extends React.Component {
  render() {
    
    const data = [
      {
        date: new Date(1009999999999),
        value: 95.35
      },
      {
        date: new Date(1019999999999),
        value: 120.35
      },
      {
        date: new Date(1029999999999),
        value: 85.35
      },
      {
        date: new Date(1039999999999),
        value: 109.35
      },
      {
        date: new Date(1049999999999),
        value: 195.35
      }
    ]

    return (
      <LineChart
        data={data}
        width={window.innerWidth}
        height={window.innerHeight}
      />
    )
  }
}
```


### Using MultiLineChart

```javascript
import { MultiLineChart } from 'react-d3-graphics'

class SomeComponent extends React.Component {
  render() {
    
    const data = {
      y: '% Value',
      series: [
        {
          name: 'Apple',
          values: [2.6, 2.7, 2.7, 2.7, 2.8]
        },
        {
          name: 'IBM',
          values: [2.1, 2.2, 2.3, 2.4, 2.2]
        },
        {
          name: 'Microsoft',
          values: [2.8, 2.7, 2.6, 2.5, 2.6]
        },
        {
          name: 'Google',
          values: [1.9, 2.4, 2, 2.1, 2.5]
        },
        {
          name: 'Sony',
          values: [2, 2.4, 1.8, 2.3, 2.1]
        }
      ],
      dates: [
        new Date(1019999999999),
        new Date(1029999999999),
        new Date(1039999999999),
        new Date(1049999999999),
        new Date(1059999999999)
      ]
    }

    return (
      <MultiLineChart
        data={data}
        width={window.innerWidth}
        height={window.innerHeight}
      />
    )
  }
}
```