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, and nodeInnerPadding props, respectively. You can also set the opacity and border width of nodes using the nodeOpacity and nodeBorderWidth props, respectively.
• Link size: You can adjust the opacity and gradient of links using the linkOpacity, linkHoverOthersOpacity, and enableLinkGradient props. You can also set the curvature and thickness of links using the linkCurvature and linkThickness props, respectively.
• Labels: You can customize the position, orientation, and style of node labels using the labelPosition, labelOrientation, labelPadding, and labelTextColor props. You can also enable/disable node and link labels using the enableNodeLabels and enableLinkLabels props, respectively.
• Animation: You can enable/disable animation and adjust its stiffness and damping using the animate, motionStiffness, and motionDamping 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.