Sankey Chart

Sankey diagrams in REAVIZ provide a powerful way to visualize and analyze flows of energy, materials, or costs within a system. They help in identifying major transfers and understanding resource distribution, making them a valuable tool for data visualization.

Where to use:

Visualize Flow Quantities: Ideal for displaying flows of energy, materials, or costs.
Highlight Major Transfers: Useful for emphasizing significant transfers within a system.
Analyze Resource Distribution: Great for analyzing how resources are distributed and transferred.

Quick Start

To create Sankey Chart, import the Sankey, SankeyNode and SankeyLink and then define the nodes and then links. The chart will automatically configure itself with the default options exposed via props.



import {
  Sankey,
  SankeyNode,
  SankeyLink
} from 'reaviz';


export default function App() {
  return (
    <Sankey
      height={400}
      width={300}
      nodes={[
        <SankeyNode title="A1" id="1" />,
        <SankeyNode title="A2" id="2" />,
        <SankeyNode title="B1" id="3" />,
        <SankeyNode title="B2" id="4" />
      ]}
      links={[
        <SankeyLink source="1" target="3" value="8" />,
        <SankeyLink source="2" target="4" value="4" />,
        <SankeyLink source="1" target="4" value="2" />
      ]}
    />
  );
}


import {
  Sankey,
  SankeyNode,
  SankeyLink
} from 'reaviz';

export default function App() {
  return (
    <Sankey
      height={400}
      width={300}
      nodes={[
        <SankeyNode title="A1" id="1" />,
        <SankeyNode title="A2" id="2" />,
        <SankeyNode title="B1" id="3" />,
        <SankeyNode title="B2" id="4" />
      ]}
      links={[
        <SankeyLink source="1" target="3" value="8" />,
        <SankeyLink source="2" target="4" value="4" />,
        <SankeyLink source="1" target="4" value="2" />
      ]}
    />
  );
}

As default, the Sankey chart shows the link/flow with gradation based on the given colorScheme. You can turn off the gradation by passing false to SankeyLink component's gradient property (e.g. gradient={false}).

Configuration

To render, the nodes and links of the Sankey component are required and colorScheme is optianal but is recommended to spacify to make Sankeys easier to interpret.

Nodes: Define the nodes using the SankeyNode component. Each node can have a title and id.
Links: Define the links using the SankeyLink component. Each link requires source, target, and value properties. The source and target can be the index of the nodes array or the node's id

Examples

API

Sankey (opens in a new tab)

Prop	Description	Default
`animated`	Whether to animate the enter/update/exit. Set internally by `SankeyNode` and `SankeyLink`. `boolean`	`true`
`colorScheme`	Color scheme for the nodes. Set internally by `SankeyNode`. `ColorSchemeType`
`justification`	The node alignment method. `Justification`	`justify`
`nodeWidth`	Width of the node. `number`	`15`
`nodePadding`	Vertical padding between nodes in the same column. `number`	`10`
`labelPosition`	Label position. `SankeyLabelPosition`
`nodeSort`	Sort function for the nodes. If sort is specified, sets the node sort method and returns this Sankey generator. If sort is not specified, returns the current node sort method, which defaults to undefined, indicating that vertical order of nodes within each column will be determined automatically by the layout. If sort is null, the order is fixed by the input. Otherwise, the specified sort function determines the order; the function is passed two nodes, and must return a value less than 0 if the first node should be above the second, and a value greater than 0 if the second node should be above the first, or 0 if the order is not specified. Reference: https://github.com/d3/d3-sankey#sankey_nodeSort `(a: any, b: any) => number`
`nodes` *	Nodes that are rendered. `NodeElement[]`
`links` *	Links that are rendered. `LinkElement[]`
`id`	Id of the chart. `string`
`width`	Width of the chart. If not provided will autosize. `number`
`height`	Height of the chart. If not provided will autosize. `number`
`margins`	Margins for the chart. `Margins`
`className`	Classnames for the chart. `string`
`containerClassName`	Classnames for the chart. `string`
`style`	Additional css styles. `StyleHTMLAttributes<SVGSVGElement>`
`center`	Center the chart. Used mainly internally. `boolean`
`centerX`	Center chart on X Axis only. Used mainly internally. `boolean`
`centerY`	Center chart on Y Axis only. Used mainly internally. `boolean`

SankeyLink (opens in a new tab)

Prop	Description	Default
`color`	Color of the link. `string`
`active`	Whether the element is active or not. Set internally by `Sankey`. `boolean`	`false`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`chartId`	Id of Sankey chart. Set internally by `Sankey`. `string`
`className`	CSS class to apply. `string`
`disabled`	Whether the node is disabled. Set internally by `Sankey`. `boolean`	`false`
`gradient`	Whether to use gradient or not. `boolean`	`true`
`opacity`	Opacity callback for the link. `(active: boolean, disabled: boolean) => number`	`(active, disabled) => (active ? 0.5 : disabled ? 0.1 : 0.35)`
`style`	CSS styles to apply. `object`
`tooltip`	Tooltip element. `ReactElement<TooltipProps, FC<TooltipProps>>`	`( <Tooltip theme={tooltipTheme} followCursor={true} modifiers={[offset(5)]} /> )`
`width`	Width of the link. Set internally by `Sankey`. `number`	`0`
`onClick`	Event for when the link is clicked. `(event: MouseEvent<SVGPathElement, MouseEvent>) => void`
`onMouseEnter`	Event for when the link has mouse enter. `(event: MouseEvent<SVGPathElement, MouseEvent>) => void`
`onMouseLeave`	Event for when the link has mouse leave. `(event: MouseEvent<SVGPathElement, MouseEvent>) => void`
`source`	Link's source node. For convenience, when initializing a Sankey layout using the default node id accessor, source may be the zero-based index of the corresponding node in the nodes array returned by the nodes accessor of the Sankey layout generator rather than object references. Alternatively, the Sankey layout can be configured with a custom node ID accessor to resolve the source node of the link upon initialization. Once the Sankey generator is invoked to return the Sankey graph object, the numeric index will be replaced with the corresponding source node object. `string \| number \| SankeyNode<NodeExtra, LinkExtra>`
`target`	Link's target node. For convenience, when initializing a Sankey layout using the default node id accessor, target may be the zero-based index of the corresponding node in the nodes array returned by the nodes accessor of the Sankey layout generator rather than object references. Alternatively, the Sankey layout can be configured with a custom node ID accessor to resolve the target node of the link upon initialization. Once the Sankey generator is invoked to return the Sankey graph object, the numeric index will be replaced with the corresponding target node object. `string \| number \| SankeyNode<NodeExtra, LinkExtra>`
`value`	Link's numeric value `number`
`y0`	Link's vertical starting position (at source node) calculated by Sankey layout generator. `number`
`y1`	Link's vertical end position (at target node) calculated by Sankey layout generator. `number`
`index`	Link's zero-based index within the array of links calculated by Sankey layout generator. `number`

SankeyNode (opens in a new tab)

Prop	Description	Default
`id`	ID of the node. If not provided, the node's index will be used. `string`
`title`	Title of the node. `string`
`color`	Color of the node. `string`	`rgba(255, 255, 255, 0.2)`
`active`	Whether the element is active or not. Set internally by `Sankey`. `boolean`	`false`
`animated`	Whether to animate the enter/update/exit. `boolean`	`true`
`chartWidth`	Width of the chart. Set internally by `Sankey`. `number`
`className`	CSS class to apply. `string`
`disabled`	Whether the node is disabled. Set internally by `Sankey`. `boolean`	`false`
`label`	Label element. `ReactElement<SankeyLabelProps, FC<Partial<SankeyLabelProps>>>`	`<SankeyLabel />`
`labelPosition`	Label position. Set internally by `Sankey`. `SankeyLabelPosition`
`labelPadding`	Percentage of total width occupied by labels on either side of the graph inside the container. Set internally by `Sankey`. `number`
`opacity`	Opacity callback for the node. `(active: boolean, disabled: boolean) => number`	`(active, disabled) => (active ? 1 : disabled ? 0.2 : 0.9)`
`style`	CSS styles to apply. `StyleHTMLAttributes<SVGRectElement>`
`tooltip`	Tooltip element. `ReactElement<TooltipProps, FC<TooltipProps>>`	`( <Tooltip theme={tooltipTheme} followCursor={true} modifiers={[offset({ mainAxis: 0, crossAxis: 5 })]} /> )`
`width`	Width of the node. Set internally by `Sankey`. `number`
`onClick`	Event for when the node is clicked. `(event: MouseEvent<SVGRectElement, MouseEvent>) => void`
`onMouseEnter`	Event for when the node has mouse enter. `(event: MouseEvent<SVGRectElement, MouseEvent>) => void`
`onMouseLeave`	Event for when the node has mouse leave. `(event: MouseEvent<SVGRectElement, MouseEvent>) => void`
`sourceLinks`	Array of outgoing links which have this node as their source. This property is calculated internally by the Sankey layout generator. `SankeyLink<NodeExtra, LinkExtra>[]`
`targetLinks`	Array of incoming links which have this node as their target. This property is calculated internally by the Sankey layout generator. `SankeyLink<NodeExtra, LinkExtra>[]`
`value`	Node's value calculated by Sankey layout Generator; the sum of link.value for the node’s incoming links. `number`
`fixedValue`	Node's fixedValue (user-defined) `number`
`index`	Node’s zero-based index within the array of nodes calculated by Sankey layout generator. `number`
`depth`	Node’s zero-based graph depth, derived from the graph topology calculated by Sankey layout generator. `number`
`height`	Node’s zero-based graph height, derived from the graph topology calculated by Sankey layout generator. `number`
`x0`	Node's minimum horizontal position (derived from the node.depth) calculated by Sankey layout generator. `number`
`x1`	Node’s maximum horizontal position (node.x0 + sankey.nodeWidth) calculated by Sankey layout generator. `number`
`y0`	Node's minimum vertical position calculated by Sankey layout generator. `number`
`y1`	Node's maximum vertical position (node.y1 - node.y0 is proportional to node.value) calculated by Sankey layout generator. `number`

Radial Scatter Plot Scatter Plot