Reusable-Sankey chart

A Sankey chart built with vega that uses 5 data points from frequency to recency.

Output:

!Sankey Chart

Installation

Download the library via npm:

npm install gramex-sankey

Dependencies

npm install bootstrap
npm install g1
npm install jquery
npm install lodash
npm install vega

To set it up, include this in your HTML:

- Call render_sankey_vega_chart function with parameters => data, selector and configuration

Parameters

| Name | Type | Description |
| -------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| Data | Array of Objects | Data takes array of objects, each object should have source_categorysource_value,target_category,abs_value,value. abs_value is the absolute value, wherein value is the % of share of source/target in all source/target. |
| Selector | String | Eg: "#sankey_chart" |

Configuration options

| Name | Type | Description |
| ----------------------------------------------------------------- | ------------------------------------------------------------------------ | ----------- |
| colors | Object | This will accept list of colors to be used by source nodes/target nodes. |
| nodecolors | List of Objects | Text color in the nodes can be altered between black(dark) and white(light). |
| Headings | List of 2 values |Names to be denoted on top of the source and target bars. |

Usage/Examples

HTML

``html



`

JS

`javascript
var chart_data = [
{
source_category: 1,
source_value: "FY22",
target_category: 1,
abs_value: 3135,
value: 9.3,
},
{
source_category: 2,
source_value: "FY18",
target_category: 1,
abs_value: 1874,
value: 5.6,
},
{
source_category: 2,
source_value: "FY18",
target_category: 2,
abs_value: 1190,
value: 3.5,
},
{
source_category: 3,
source_value: "FY19",
target_category: 3,
abs_value: 958,
value: 2.8,
},
{
source_category: 3,
source_value: "FY19",
target_category: 2,
abs_value: 1128,
value: 3.3,
},
{
source_category: 3,
source_value: "FY19",
target_category: 1,
abs_value: 2139,
value: 6.3,
},
{
source_category: 4,
source_value: "FY20",
target_category: 1,
abs_value: 1990,
value: 5.9,
},
{
source_category: 4,
source_value: "FY20",
target_category: 3,
abs_value: 937,
value: 2.8,
},
{
source_category: 4,
source_value: "FY20",
target_category: 2,
abs_value: 1321,
value: 3.9,
},
{
source_category: 4,
source_value: "FY20",
target_category: 4,
abs_value: 1013,
value: 3,
},
{
source_category: 5,
source_value: "FY21",
target_category: 4,
abs_value: 2568,
value: 7.6,
},
{
source_category: 5,
source_value: "FY21",
target_category: 3,
abs_value: 2399,
value: 7.1,
},
{
source_category: 5,
source_value: "FY21",
target_category: 1,
abs_value: 2960,
value: 8.8,
},
{
source_category: 5,
source_value: "FY21",
target_category: 2,
abs_value: 2488,
value: 7.4,
},
{
source_category: 5,
source_value: "FY21",
target_category: 5,
abs_value: 7616,
value: 22.6,
},
];

var config = {
colors: {
source: ["#FF00FF", "#FFC0CB", "#FFFF00", "#00FF00", "#FFA500"],
target: ["#FF00FF", "#FFC0CB", "#FFFF00", "#00FF00", "#FFA500"],
},
nodecolors: [
{ node: 5, value: "light" },
{ node: 4, value: "dark" },
{ node: 3, value: "dark" },
{ node: 2, value: "dark" },
{ node: 1, value: "dark" },
],
Headings: ["Recency", "Frequency"],
};
render_sankey_vega_chart(chart_data, "#sankey_chart", config);
`

Tooltip

HTML

Add this in html page to template tooltip.

` html

``
- This is templated and called from index.js

Documentation

- Home page
- Documentation
- Source

Authors and acknowledgment

Ushasree Ginne

License

ISC license

Project status

Sankey chart with tooltips is released. Enhancements will still be continued.