Untitled
✓ Published0🌍 Public
An interactive React-based Sankey diagram visualizes flow data from a remote JSON file, displaying nodes and links with color gradients between source and target. The chart uses D3.js's sankey layout algorithm for node positioning and link calculation, rendered as SVG paths and rectangles. A drag-and-drop interaction lets users reposition nodes in edit mode, while react-spring is available for potential animations. The visualization includes node labels and values, with a color scheme differentiating flow pathways.
AI-generated description# introduction
react library to draw sankey diagram
# installation
`npm i react-sankey-chart`
# Example
<img src='https://github.com/Salaheldinyoussry/react-sankey-chart/blob/master/example2.JPG?raw=true'>
<img src ='https://github.com/Salaheldinyoussry/react-sankey-chart/blob/master/example.JPG?raw=true' >
# usage
```js
import {Sankey} from "react-sankey-chart";
function App() {
return (
<div >
<Sankey graph={
[
{
level: 1, /// specifies which column
nodes: [
{
'id': '1',
"nodeLabel": "Facebook",
"color": 'red', // will be used in the edges gradient color
'image':'https://img.utdstc.com/icon/fe0/ab6/fe0ab67fa0de2b2681602db5708a076f50dd21106e0c2d38b9661875a37e235e:200', // icon for the node
"edges": [
{
"nodeId": "2",
"edgeWeight": 40
}
, {
"nodeId": "3",
"edgeWeight": 10
}
],
},
]
},
{
level: 2,
nodes: [
{
'id': '2',
"nodeLabel": "web",
"color": 'blue',
"edges": [
{
"nodeId": "5",
"edgeWeight": 5
}
],
},
{
'id': '3',
"nodeLabel": "any",
"color": 'green',
"edges": [
{
"nodeId": "4",
"edgeWeight": 20
},
{
"nodeId": "6",
"edgeWeight": 10
}
],
},
]
},
{
level: 3,
nodes: [
{
'id': '4',
"nodeLabel": "any2",
"color": 'yellow',
"edges": [
],
},
{
'id': '5',
"nodeLabel": "any2",
"color": 'yellow',
"edges": [
],
},
{
'id': '6',
"nodeLabel": "any2",
"color": 'yellow',
"edges": [
],
},
]
},
]
} height={400} width={500} />
</div>
);
}
export default App;
```
MIT Licensed