A React implementation of THREE.js 2d/3d scatter plot. This library was created using the create-react-library CLI.
npm install --save maayanlab/react-scatter-board
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>
);
}
}
Please read the documentions.
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.
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.
MIT © MaayanLab