0.7.0 • Published 1 month ago

sankey-plus v0.7.0

Weekly downloads
-
License
ISC
Repository
github
Last release
1 month ago

sankey-plus

NOT READY FOR USE YET - CONTAINS BUGS :)

A JavaScript library for computing and drawing Sankey graphs.

Based on the D3-Sankey and D3-Sankey-Circular(https://github.com/tomshanley/d3-sankey-circular) libraries, and the experiments in my Observable notebook.

This library enhances those to provide:

  • Handling for circular links
  • Routing of long links to avoid overlapping nodes
  • Improved layout
  • New API that uses a config object

API Reference

Import SankeyChart from sankeyPlus.js:

import { SankeyChart } from './sankeyPlus.js'

Create a new chart:

let chart = new SankeyChart(element, config);
  • element: An HTML element, such as a DIV, which will contain the SVG element created by SankeyChart.draw()
  • config: an options object containing the configuration for the sankey chart.

To render the chart, call the draw() method, which creates an SVG element in the specified HTML element:

chart.draw();

Config options:

The config options has the structure:

let config = {
    //main options
    nodes: {
        //data and options for nodes
    },
    links: {
        //data and options for links
    },
    arrows: {
        //data and options for links
    }
}

Main

OptionDescriptionDefaultMandatory
justifyTitleLeftNo
idIf id is specified, sets the node id accessor to the specified functiond => d.nameNo
iterationsThe number of relaxation iterations32No
paddingPadding around the chart, in pixels20No
widthWidth of the chart1000No
heightHeight of the chart500No
useManualScaleTBC True/FalseTrueNo

Nodes

OptionDescriptionDefaultMandatory
dataAn array of nodes objects, which must contain a property for the ID that is specified in the id option (the default is name).NAYes
widthWidth of the node, in pixels25No
maxHeightIf useManualScale is enabled, then the maximum height of the node for the scale's range75No
paddingThe ideal vertical space between each node25No
minPaddingThe minimum vertical space allowed between each node25No
virtualPaddingThe vertical space between nodes and any virtual links which are routed around nodes7No
horizontalSortBoolean. If set to true, the node objects must contain a property horizontalSort (Number). The values of this property will be used for the horizontal position. This applies Sankey charts with circular links where the 'first' node(s) is arbitrary. If null or false, the sort order of the nodes are based on in incoming/outgoing links.nullNo
verticalSortBoolean. If set to true, the node objects must contain a property verticalSort (Number). The values of this property will be used for the vertical position, for nodes within the same column. If null or false, the sort order of the nodes is optimized for the best layout.nullNo
setPositionsIf true, then the nodes' positions aren't optimised vertical.falseNo

Links

OptionDescriptionDefaultMandatory
dataAn array of links objects, which must contain a source, target and value property. The source and target must refer to a node's ID.NAYes
circularGapText5No
circularLinkPortionTopBottomThe portion of the Height that should be reserved for drawing circular links0.4No
circularLinkPortionLeftRightThe portion of the Width that should be reserved for drawing circular links0.1No
useVirtualRoutesTextTextNo
virtualPaddingTextTextNo
baseRadiusTextTextNo
verticalMarginTextTextNo
opacityOpacity of the link stroke, from 0 to 11No
virtualLinkTypeTextTextNo

Arrows

OptionDescriptionDefaultMandatory
enabledSelect whether to show arrows. True/FalsefalseNo
colorColor of the arrow. Can use Hex code or CSS color nameDarkSlateGreyNo
lengthLength of the arrow, in pixels10No
gapLength of the gap between each arrow, in pixels25No
headSizewidth of the arrow head, in pixels4No
0.7.0

1 month ago

0.6.0

2 years ago

0.5.0

2 years ago

0.4.0

2 years ago

0.3.0

2 years ago

0.2.0

2 years ago

0.1.0

2 years ago