A Sankey chart built with vega that uses 5 data points from frequency to recency.
A Sankey chart built with vega that uses 5 data points from frequency to recency.
Output:
Download the library via npm:
npm install gramex-sankey
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
| 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" |
| 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. |
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);
`
HTML
Add this in html page to template tooltip.
` html``
- This is templated and called from index.js
- Home page
- Documentation
- Source
Ushasree Ginne
ISC license
Sankey chart with tooltips is released. Enhancements will still be continued.