mr-wellick / react-d3-ggplot

react and d3 for data visualizations on the web

react d3 ggplot

Using React.js and D3.js to build simple and reusable components for data visualizations on the web.

Demos

Getting Started

Install

# yarn
yarn add react-d3-ggplot

# npm
npm install react-d3-ggplot

Quick Start

Props	Description
data	An array of objects
aes (aesthetics)	An array with two strings
dimensions	An object: width, height, padding

import React from 'react';
import { useState } from 'react';
import { GEOMS } from 'react-d3-ggplot';
import { XAxis } from 'react-d3-ggplot';
import { YAxis } from 'react-d3-ggplot';
import { Line } from 'react-d3-ggplot';

const LineChart = () => {
  const [state, setState] = useState({
    data: [{ x: 0, y: 0 }, { x: 10, y: 10 }],
    aes: ['x', 'y'],
    dimensions: { width: 500, height: 300, padding: 50 }
  });

  return (
    <GEOMS {...state}>
      <XAxis />
      <YAxis />
      <Line />
    </GEOMS>
  );
};

Live Example

• https://codesandbox.io/s/p9wrv4moz7