Nearly Identical Flow datasets with different flow values cause the chart to break #57
Description
First of all, thanks for this great library. It's been wonderfully useful.
I think I may have found some bug in how the nodes and flows are processed. I have two nearly identical datasets. The "shape" i.e. nodes and what nodes flow into each other, of the sankey are the same. The only difference in the datasets is the values for flow between the nodes are different.
I believe I have validated that the sankey nodes are validly constructed. There are no loops, and the output for each node is strictly less than the input. I have created to test files below for you to look at. I am pretty baffled as to why one would work why one would not, I am hoping you can shed some light on whatever I am missing @kurkle. Thanks so much for your time and this library
Broken Test Case on top of Working Test Case
Broken Test Case
const data = [
{
flow: 19,
from: "trailer-2",
to: "trailer-3",
},
{
flow: 93,
from: "film-1",
to: "tv_show-2",
},
{
flow: 44,
from: "trailer-1",
to: "tv_show-2",
},
{
flow: 36,
from: "trailer-2",
to: "film-3",
},
{
flow: 32,
from: "tv_show-1",
to: "trailer-2",
},
{
flow: 41,
from: "film-2",
to: "trailer-3",
},
{
flow: 83,
from: "film-2",
to: "film-3",
},
{
flow: 44,
from: "tv_show-2",
to: "trailer-3",
},
{
flow: 87,
from: "tv_show-1",
to: "film-2",
},
{
flow: 30,
from: "trailer-2",
to: "tv_show-3",
},
{
flow: 37,
from: "film-1",
to: "trailer-2",
},
{
flow: 78,
from: "tv_show-2",
to: "film-3",
},
{
flow: 18,
from: "trailer-1",
to: "trailer-2",
},
{
flow: 93,
from: "film-2",
to: "tv_show-3",
},
{
flow: 76,
from: "tv_show-1",
to: "tv_show-2",
},
{
flow: 46,
from: "trailer-1",
to: "film-2",
},
{
flow: 88,
from: "tv_show-2",
to: "tv_show-3",
},
{
flow: 88,
from: "film-1",
to: "film-2",
},
];
module.exports = {
config: {
type: "sankey",
data: {
datasets: [
{
data,
colorFrom: "red",
colorTo: "green",
},
],
},
},
options: {
canvas: {
height: 256,
width: 512,
},
},
};
Working Test Case
const data = [
{
flow: 6,
from: "trailer-2",
to: "trailer-3",
},
{
flow: 39,
from: "film-1",
to: "tv_show-2",
},
{
flow: 12,
from: "trailer-1",
to: "tv_show-2",
},
{
flow: 14,
from: "trailer-2",
to: "film-3",
},
{
flow: 13,
from: "tv_show-1",
to: "trailer-2",
},
{
flow: 12,
from: "film-2",
to: "trailer-3",
},
{
flow: 27,
from: "film-2",
to: "film-3",
},
{
flow: 12,
from: "tv_show-2",
to: "trailer-3",
},
{
flow: 35,
from: "tv_show-1",
to: "film-2",
},
{
flow: 12,
from: "trailer-2",
to: "tv_show-3",
},
{
flow: 33,
from: "tv_show-2",
to: "film-3",
},
{
flow: 13,
from: "film-1",
to: "trailer-2",
},
{
flow: 8,
from: "trailer-1",
to: "trailer-2",
},
{
flow: 43,
from: "film-2",
to: "tv_show-3",
},
{
flow: 30,
from: "tv_show-1",
to: "tv_show-2",
},
{
flow: 14,
from: "trailer-1",
to: "film-2",
},
{
flow: 33,
from: "tv_show-2",
to: "tv_show-3",
},
{
flow: 37,
from: "film-1",
to: "film-2",
},
];
module.exports = {
config: {
type: "sankey",
data: {
datasets: [
{
data,
colorFrom: "red",
colorTo: "green",
},
],
},
},
options: {
canvas: {
height: 256,
width: 512,
},
},
};