squatsandsciencelabs / react-scatter-board

A reusable React library for interactive THREE.js 2d/3d scatter plots

react-scatter-board

A React implementation of THREE.js 2d/3d scatter plot. This library was created using the create-react-library CLI.

Install

npm install --save maayanlab/react-scatter-board

Usage

import React, { Component } from "react";
import { ScatterBoard, Lazy } from "react-scatter-board";
import "./App.css";

export default class App extends Component {
  render() {
    return (
      <Lazy loading={<div>Loading...</div>}>{() =>
        fetch('http://localhost:8080/GSE48968_tSNE_3.json').then(
          response => response.json()
        ).then(data => (
          <ScatterBoard
            data={data}
            shapeKey="strain"
            colorKey="description"
            labelKeys={["sample_id"]}
            is3d={true}
          />
        ))
      }</Lazy>
    );
  }
}

Examples

Please read the documentions.

Development

Local development is broken into two parts (ideally using two tabs).

First, run rollup to watch your src/ module and automatically recompile it into dist/ whenever you make changes.

npm start # runs rollup with watch flag

The second part will be running the example/ create-react-app that's linked to the local version of your module.

# (in another tab)
cd example
npm start # runs create-react-app dev server

Now, anytime you make a change to your library in src/ or to the example app's example/src, create-react-app will live-reload your local dev server so you can iterate on your component in real-time.

Deployment to GitHub Pages

npm run deploy

This creates a production build of the example create-react-app that showcases your library and then runs gh-pages to deploy the resulting bundle.

License

MIT © MaayanLab