react-d3-graphics

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

Here a live demo

Install

npm i react-d3-graphics

Screenshots

• SCREENSHOT 1 []
• SCREENSHOT 2 []
• SCREENSHOT 3 []

Available Scripts

In the project directory, you can run:

npm start

Runs the app in the development mode. Open 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

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

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

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}
      />
    )
  }
}