react-ab-scatter
v1.0.1
Published
React component for comparing scatter plots
Downloads
5
Readme
react-ab-scatter
React component for comparing scatter plots.
Demo: https://a-zhang1.github.io/home/
Install
npm install --save react-ab-scatter
Usage
import React, { Component } from 'react'
import Viz from 'react-ab-scatter'
class Example extends Component {
render() {
return <Viz data = {mockData}
WIDTH = {1000} // scatter plot width
HEIGHT = {600} // scatter plot height
Y_TRANSFORM = {20} // position on canvas - y
X_TRANSFORM = {100}/> // position on canvas - x
}
}
Input data schema :
mockData = {
"nodes": [
{
"idx": 0, //index of node, Number
"id": "id0", // UID of node
"group": 1 //group tag of node
},
{
"idx": 0,
"id": "id1",
"group": 2
}
],
"metricsA" : [
{// model1 score of nodes[0], Number
"x": ...,
"y": ...
},
{// model1 score of nodes[1], Number
"x": ...,
"y": ...
}
],
"metricsB" : [
{// model2 score of nodes[0], Number
"x": ...,
"y": ...
},
{// model2 score of nodes[1], Number
"x": ...,
"y": ...
}
]
}
See ./example/src/ for a complete example.
Contribution
npm install # install dependencies in package.json
npm run build # create bundle in dist.js
npm start # watch watches the src/ and recompiles it into the dist/ folder when you make changes.
cd example/src && npm run build
npm start # runs the example app that links to your package.
The project will be running on http://localhost:3000/
License
MIT © A-ZHANG1