nivo sankey react
Nivo Sankey React
I recently worked on a data visualization project where I was required to use a Sankey diagram to show the flow of data between different entities. After some research, I came across Nivo Sankey React, which is a React-based library for creating Sankey diagrams.
The library provides a simple and easy-to-use API for creating customizable Sankey diagrams. It offers different customization options such as node and link colors, padding, and label styling.
Installation
To get started with Nivo Sankey React, you need to install it using npm or yarn. Here's how to do it:
// using npm
npm install @nivo/sankey
// using yarn
yarn add @nivo/sankey
Usage
Once you have installed the package, you can import it in your React component and use it like this:
import React from 'react';
import { ResponsiveSankey } from '@nivo/sankey';
const data = [
{
id: 'A',
label: 'Node A',
},
{
id: 'B',
label: 'Node B',
},
{
id: 'C',
label: 'Node C',
},
{
id: 'D',
label: 'Node D',
},
{
id: 'E',
label: 'Node E',
},
{
id: 'F',
label: 'Node F',
},
];
const links = [
{
source: 'A',
target: 'B',
value: 10,
},
{
source: 'A',
target: 'C',
value: 15,
},
{
source: 'B',
target: 'D',
value: 12,
},
{
source: 'C',
target: 'D',
value: 10,
},
{
source: 'B',
target: 'E',
value: 5,
},
{
source: 'C',
target: 'E',
value: 8,
},
{
source: 'D',
target: 'F',
value: 20,
},
{
source: 'E',
target: 'F',
value: 7,
},
];
const MySankey = () => (
<ResponsiveSankey
data={{ nodes: data, links }}
margin={{ top: 40, right: 160, bottom: 40, left: 50 }}
colors={{ scheme: 'nivo' }}
nodeOpacity={1}
nodeThickness={18}
nodeInnerPadding={3}
nodeSpacing={24}
nodeBorderWidth={0}
linkOpacity={0.5}
linkHoverOthersOpacity={0.1}
enableLinkGradient={true}
labelPosition="outside"
labelOrientation="vertical"
labelPadding={16}
labelTextColor={{ from: 'color', modifiers: [ ['darker', 1.6] ] }}
animate={true}
motionStiffness={140}
motionDamping={13}
/>
);
export default MySankey;
The above code renders a Sankey diagram with the provided data and customization props. The ResponsiveSankey
component is responsible for rendering the chart and it automatically adjusts to the size of its container. The data
prop is an object that contains two properties: nodes
and links
, which are arrays of objects representing the nodes and links in the Sankey diagram, respectively.
Customization
As mentioned earlier, Nivo Sankey React provides several customization options to tweak the appearance and behavior of the Sankey diagram. Here are some examples:
- Colors: You can specify a color scheme for nodes and links using the
colors
prop. There are several pre-defined color schemes available, or you can define your own using a color array. - Node size: You can adjust the thickness, spacing, and padding of nodes using the
nodeThickness
,nodeSpacing
, andnodeInnerPadding
props, respectively. You can also set the opacity and border width of nodes using thenodeOpacity
andnodeBorderWidth
props, respectively. - Link size: You can adjust the opacity and gradient of links using the
linkOpacity
,linkHoverOthersOpacity
, andenableLinkGradient
props. You can also set the curvature and thickness of links using thelinkCurvature
andlinkThickness
props, respectively. - Labels: You can customize the position, orientation, and style of node labels using the
labelPosition
,labelOrientation
,labelPadding
, andlabelTextColor
props. You can also enable/disable node and link labels using theenableNodeLabels
andenableLinkLabels
props, respectively. - Animation: You can enable/disable animation and adjust its stiffness and damping using the
animate
,motionStiffness
, andmotionDamping
props, respectively.
Here's an example of how to use some of these props:
<ResponsiveSankey
data={{ nodes: data, links }}
margin={{ top: 40, right: 160, bottom: 40, left: 50 }}
colors={{ scheme: 'set2' }}
nodeOpacity={0.8}
nodeThickness={24}
nodeInnerPadding={5}
nodeSpacing={32}
nodeBorderWidth={1}
linkOpacity={0.6}
linkHoverOthersOpacity={0.1}
enableLinkGradient={false}
labelPosition="inside"
labelOrientation="horizontal"
labelPadding={12}
labelTextColor={{ from: 'color', modifiers: [ ['darker', 1.6] ] }}
enableNodeLabels={true}
enableLinkLabels={true}
animate={true}
motionStiffness={120}
motionDamping={9}
/>
This Sankey diagram has thicker and more spaced-out nodes, with node labels positioned inside and oriented horizontally. Link labels are also enabled in this example.
Conclusion
Nivo Sankey React is a powerful and flexible library for creating Sankey diagrams in React. It provides a rich set of customization options and is easy to use with its simple API. If you need to visualize flow of data or any other type of flow, Sankey diagrams are a great way to do it.