tomshanley / d3-sankey-circular Goto Github PK

View Code? Open in Web Editor NEW

88.0 11.0 39.0 404 KB

A fork of the d3-sankey library to allow circular links.

License: MIT License

JavaScript 99.34% HTML 0.66%

d3 d3v4

d3-sankey-circular's People

Contributors

Stargazers

Watchers

d3-sankey-circular's Issues

npm audit: 31 vulnerabilities

The latest version of @plotly/d3-sankey-circular contains some vulnerabilities according to "npm audit":
31 vulnerabilities (2 low, 15 moderate, 12 high, 2 critical)

I'm not using this package directly but instead it is being referenced through plotly.js (and I'm using plotly.js). But I'm just seeing if this project is active enough that perhaps these vulnerabilities will be addressed at some point. I'm certainly no expert with this but it appears that the vulnerabilities are related to packages that need upgrading to newer versions.

Forgive me if this is the wrong place to be creating this since my issue is with @plotly/d3-sankey-circular (and not specifically d3-sankey-circular). But it doesn't seem like @plotly/d3-sankey-circular is accepting new issues. And I wasn't sure what the relation is between @plotly/d3-sankey-circular and d3-sankey-circular. If I've created this issue incorrectly then please let me know.

Changing link color to match with source node color.

    var link = linkG.data(sankeyLinks)
      .enter()
      .append("path")
      .attr("d", curveSankeyForceLink)
      .style("stroke-width", function (d) { return Math.max(1, d.width); })
      .style("stroke", function (d) {return colour(d.depth); })
      .style("opacity", 0.7);

This code did not work. Changed red:black to colour(d.depth)

Can't import the named export ... from non EcmaScript module

I can't seem to import this module in a webpack based project. I'm getting these errors:

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 451:16-25
Can't import the named export 'ascending' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 981:23-37
Can't import the named export 'linkHorizontal' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 309:19-22
Can't import the named export 'map' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 1485:16-19
Can't import the named export 'max' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 352:20-23
Can't import the named export 'max' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 386:20-23
Can't import the named export 'max' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 557:31-35
Can't import the named export 'mean' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 556:31-35
Can't import the named export 'mean' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 28:74-77
Can't import the named export 'min' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 863:13-16
Can't import the named export 'min' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 1482:16-19
Can't import the named export 'min' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 475:15-18
Can't import the named export 'min' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 449:18-22
Can't import the named export 'nest' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 476:53-56
Can't import the named export 'sum' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 330:58-61
Can't import the named export 'sum' from non EcmaScript module (only default export is available)
 @ ./src/index.js

ERROR in ./node_modules/d3-sankey-circular/dist/d3-sankey-circular.mjs 330:28-31
Can't import the named export 'sum' from non EcmaScript module (only default export is available)
 @ ./src/index.js

Simple example: https://github.com/peteruithoven/d3-sankey-circular-test

Cannot load with requirejs: johnson.js: "Uncaught ReferenceError: module is not defined"

The dependencies

elementary-circuits-directed-graph

and

strongly-connected-components

do not have headers that are compatible with requirejs.

antoinerg/elementary-circuits-directed-graph#19

mikolalysenko/strongly-connected-components#5

Paths are being generated outside of the svg box size

The same sankey component works well with the first dataset, but the paths are getting outside of the svg box in the second, any idea why is that happening?:

VISUAL:

DATASET:

export default {
	nodes: [
		{
			name: "URGENCIAS NOCOVID",
			color: "#f77d0a",
		},
		{
			name: "URGENCIAS COVID",
			color: "#ba5d06",
		},
		{
			name: "UCI NOCOVID",
			color: "#9d4edd",
		},
		{
			name: "UCI COVID",
			color: "#7824bc",
		},
		{
			name: "PISO NOCOVID",
			color: "#00b4d8",
		},
		{
			name: "PISO COVID",
			color: "#0086a2",
		},
		{
			name: "Muertes",
			color: "black",
		},
		{
			name: "EGRESOS",
			color: "#6a994e",
		},
	],
	links: [
		{
			source: "URGENCIAS COVID",
			target: "EGRESOS",
			value: 0.276785714,
		},
		{
			source: "UCI COVID",
			target: "EGRESOS",
			value: 0.008438819,
		},
		{
			source: "PISO COVID",
			target: "EGRESOS",
			value: 0.67223382,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "EGRESOS",
			value: 0.830161357,
		},
		{
			source: "UCI NOCOVID",
			target: "EGRESOS",
			value: 0.123076923,
		},
		{
			source: "PISO NOCOVID",
			target: "EGRESOS",
			value: 0.450643777,
		},
		{
			source: "URGENCIAS COVID",
			target: "Muertes",
			value: 0.017857143,
		},
		{
			source: "UCI COVID",
			target: "Muertes",
			value: 0.278481013,
		},
		{
			source: "PISO COVID",
			target: "Muertes",
			value: 0.059846903,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "Muertes",
			value: 0.003516756,
		},
		{
			source: "UCI NOCOVID",
			target: "Muertes",
			value: 0.097435897,
		},
		{
			source: "PISO NOCOVID",
			target: "Muertes",
			value: 0.028816677,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "URGENCIAS COVID",
			value: 0.016342573,
		},
		{
			source: "PISO NOCOVID",
			target: "URGENCIAS COVID",
			value: 0.042305334,
		},
		{
			source: "URGENCIAS COVID",
			target: "UCI COVID",
			value: 0.022321429,
		},
		{
			source: "PISO COVID",
			target: "UCI COVID",
			value: 0.091858038,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "UCI COVID",
			value: 0.005999173,
		},
		{
			source: "UCI NOCOVID",
			target: "UCI COVID",
			value: 0.046153846,
		},
		{
			source: "PISO NOCOVID",
			target: "UCI COVID",
			value: 0.083997548,
		},
		{
			source: "URGENCIAS COVID",
			target: "PISO COVID",
			value: 0.401785714,
		},
		{
			source: "UCI COVID",
			target: "PISO COVID",
			value: 0.556962025,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "PISO COVID",
			value: 0.075920563,
		},
		{
			source: "UCI NOCOVID",
			target: "PISO COVID",
			value: 0.123076923,
		},
		{
			source: "PISO NOCOVID",
			target: "PISO COVID",
			value: 0.251379522,
		},
		{
			source: "URGENCIAS COVID",
			target: "URGENCIAS NOCOVID",
			value: 0.080357143,
		},
		{
			source: "PISO NOCOVID",
			target: "URGENCIAS NOCOVID",
			value: 0.096259963,
		},
		{
			source: "URGENCIAS COVID",
			target: "UCI NOCOVID",
			value: 0.004464286,
		},
		{
			source: "UCI COVID",
			target: "UCI NOCOVID",
			value: 0.042194093,
		},
		{
			source: "PISO COVID",
			target: "UCI NOCOVID",
			value: 0.016701461,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "UCI NOCOVID",
			value: 0.005378568,
		},
		{
			source: "PISO NOCOVID",
			target: "UCI NOCOVID",
			value: 0.045370938,
		},
		{
			source: "URGENCIAS COVID",
			target: "PISO NOCOVID",
			value: 0.1875,
		},
		{
			source: "UCI COVID",
			target: "PISO NOCOVID",
			value: 0.099156118,
		},
		{
			source: "PISO COVID",
			target: "PISO NOCOVID",
			value: 0.153792624,
		},
		{
			source: "URGENCIAS NOCOVID",
			target: "PISO NOCOVID",
			value: 0.062474141,
		},
		{
			source: "UCI NOCOVID",
			target: "PISO NOCOVID",
			value: 0.61025641,
		},
	],
};

VISUAL OUTSIDE:

DATASET:

export default {
	nodes: [
		{ name: "ER_ADULT_NOCOVID", color: "#f77d0a" },
		{ name: "Alta Hospitalaria", color: "#6a994e" },
		{ name: "ER_ADULT_COVID", color: "#ba5d06" },
		{ name: "WARD_ADULT_COVID", color: "#0086a2" },
		{ name: "WARD_ADULT_NOCOVID", color: "#00b4d8" },
		{ name: "ICU_ADULT_COVID", color: "#7824bc" },
		{ name: "ICU_ADULT_NOCOVID", color: "#9d4edd" },
		{ name: "Fallecimiento", color: "black" },
	],
	links: [
		{
			source: "ER_ADULT_NOCOVID",
			target: "Alta Hospitalaria",
			value: 0.8316888045540797,
		},
		{
			source: "ER_ADULT_COVID",
			target: "Alta Hospitalaria",
			value: 0.29004329004329,
		},
		{
			source: "WARD_ADULT_COVID",
			target: "Alta Hospitalaria",
			value: 0.6789473684210526,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "Alta Hospitalaria",
			value: 0.448512585812357,
		},
		{
			source: "ICU_ADULT_COVID",
			target: "Alta Hospitalaria",
			value: 0.01195219123505976,
		},
		{
			source: "ICU_ADULT_NOCOVID",
			target: "Alta Hospitalaria",
			value: 0.1213592233009709,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "Fallecimiento",
			value: 0.003795066413662239,
		},
		{
			source: "ER_ADULT_COVID",
			target: "Fallecimiento",
			value: 0.01731601731601732,
		},
		{
			source: "WARD_ADULT_COVID",
			target: "Fallecimiento",
			value: 0.05723684210526316,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "Fallecimiento",
			value: 0.02803203661327231,
		},
		{
			source: "ICU_ADULT_COVID",
			target: "Fallecimiento",
			value: 0.2768924302788844,
		},
		{
			source: "ICU_ADULT_NOCOVID",
			target: "Fallecimiento",
			value: 0.0970873786407767,
		},
		{
			source: "ER_ADULT_COVID",
			target: "ER_ADULT_NOCOVID",
			value: 0.07792207792207792,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "ER_ADULT_NOCOVID",
			value: 0.1081235697940503,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "ER_ADULT_COVID",
			value: 0.01555977229601518,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "ER_ADULT_COVID",
			value: 0.04176201372997711,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "WARD_ADULT_COVID",
			value: 0.07666034155597723,
		},
		{
			source: "ER_ADULT_COVID",
			target: "WARD_ADULT_COVID",
			value: 0.3939393939393939,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "WARD_ADULT_COVID",
			value: 0.2448512585812357,
		},
		{
			source: "ICU_ADULT_COVID",
			target: "WARD_ADULT_COVID",
			value: 0.5557768924302788,
		},
		{
			source: "ICU_ADULT_NOCOVID",
			target: "WARD_ADULT_COVID",
			value: 0.116504854368932,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "WARD_ADULT_NOCOVID",
			value: 0.06110056925996205,
		},
		{
			source: "ER_ADULT_COVID",
			target: "WARD_ADULT_NOCOVID",
			value: 0.1861471861471861,
		},
		{
			source: "WARD_ADULT_COVID",
			target: "WARD_ADULT_NOCOVID",
			value: 0.1467105263157895,
		},
		{
			source: "ICU_ADULT_COVID",
			target: "WARD_ADULT_NOCOVID",
			value: 0.099601593625498,
		},
		{
			source: "ICU_ADULT_NOCOVID",
			target: "WARD_ADULT_NOCOVID",
			value: 0.616504854368932,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "ICU_ADULT_COVID",
			value: 0.005882352941176471,
		},
		{
			source: "ER_ADULT_COVID",
			target: "ICU_ADULT_COVID",
			value: 0.02164502164502164,
		},
		{
			source: "WARD_ADULT_COVID",
			target: "ICU_ADULT_COVID",
			value: 0.09736842105263158,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "ICU_ADULT_COVID",
			value: 0.08237986270022883,
		},
		{
			source: "ICU_ADULT_NOCOVID",
			target: "ICU_ADULT_COVID",
			value: 0.04854368932038835,
		},
		{
			source: "ER_ADULT_NOCOVID",
			target: "ICU_ADULT_NOCOVID",
			value: 0.005123339658444023,
		},
		{
			source: "ER_ADULT_COVID",
			target: "ICU_ADULT_NOCOVID",
			value: 0.004329004329004329,
		},
		{
			source: "WARD_ADULT_COVID",
			target: "ICU_ADULT_NOCOVID",
			value: 0.01578947368421053,
		},
		{
			source: "WARD_ADULT_NOCOVID",
			target: "ICU_ADULT_NOCOVID",
			value: 0.04519450800915332,
		},
		{
			source: "ICU_ADULT_COVID",
			target: "ICU_ADULT_NOCOVID",
			value: 0.04183266932270916,
		},
	],
};

modular source code?

I want to break sankeyCircular.js up into may small files so that the interfaces between the functions it contains are more explicit to me.

this is an activity mainly aimed at getting myself familiar with d3-sankey-circular. when I'm happy with it, I'll send a PR to see if this code organization approach is useful to others. (if not, I'm perfectly happy doing this purely as a learning exercise 😄)

I make an issue because old habits compel me to include an issue number in my branch names 😂

Fit circular links within the specified sankey size and extent

Current implementation creates circular links that go outside of the specified sankey size and extent, and relies on the user creating a margin that has enough space.

This would be better if all nodes/links fit within the specified sankey size and extent, in case the user doesn't know what circular links will be created, and where they will be placed.

sankey not using nodeID throughout

Defaults to node.name, which is not overridden by the user set nodeID function.

Allow circular links in the middle of the chart

Self linking links don't always follow the top/bottom setting for the node

Where a node links back to itself, the link should follow the top/bottom setting for the node. This isn't always happening

Add .npmignore

Allow a user to define the node order

Currently the node.depth, node.height and node.column is determined by the incoming and outgoing links, and the order in which the nodes are passed to the sankey function. However, with circular links, the order in which they appear in the diagram may not be the intuitive order for a user.

It would preferable to allow the user to optionally preset the order of nodes, and fall back to automatic ordering if required.

add eslint

I'd like to experiment with adding eslint to help catch errors https://eslint.org/docs/about/

I'll give this a go and send a PR if I succeed 😄

Circular links congregate top or bottom

Depending on the order of the links in the dataset, the algorithm may assign circular links to be all top or all bottom, as it bases its decisions on what the source/target node have already been assigned.

The algorithm could be optimised to give more weight to balancing top and bottom, but which may result in more overlaps.
Or, the links could be resorted to provide a more pleasing output (with possible flag to turn off/on, as this would result in the nodes being displayed in different order across the page)
And/or, links from nodes in the end column to nodes in the first column could be go either way regardless of the link types associated to the node, as those will have no overlaps with normal links

Tried to create this plot. The plot shows up blank. https://bl.ocks.org/tomshanley/6eb025290888935f10b142e4bc576d8d

https://bl.ocks.org/tomshanley/6eb025290888935f10b142e4bc576d8d

Can you kindly share the d3-sankey-circular.js file for this version?

For me, the animated version, the one without arrows and the 1960s version worked fine.

graph not using full width

various causes:

a mixed left v right margin
the algorithm reduces the right margin even if no circular links need to use that space

TypeError: Cannot read property 'filter' of undefined in johnson.js

I use d3@5. Use this example https://bl.ocks.org/tomshanley/a434d47dc7ff983c764ccc555e89e295

import * as d3Sankey from 'd3-sankey-circular';

const sankey = d3Sankey
        .sankeyCircular()
        .nodeId(d => d.name)
        .nodeAlign(d3Sankey.sankeyJustify)
        .nodeWidth(12)
        .nodePadding(15)
        .nodePaddingRatio(0.5)
        .iterations(32)
        .size([width, height])

const sankeyData = sankey(data);

data

{
  nodes: [
   {name: 'new'},
   {name: 'confirmed'},
   ....
 ],
 links: [
   {target: 'new', source: 'confirmed', value: 10},
   .....
 ]  
}

And sankeyData not generated, but throw the error

johnson.js

And if i change nodeId to d => d.index (instead d => d.name) this error disappears and another appears

Graph generation crashes when the tree search includes a self linking node

Sometimes

Fails to render dataset

Dear @tomshanley,

I am not sure why but the following example fails to render:
master...antoinerg:issue-3813

sortNodes doesn't work as it should

The default example in the repository does not work correctly, the sorting of nodes by columns is broken.

default data2 object:

open example/index.html with liveSever:

From the screenshot, you can see obvious inconsistencies, the nodes are not in the columns described in the data2 object.
(process9, process10, process2 shouldn't be in the column '0', etc..)

Expose/export circular link control points

To allow for custom paths or areas in place of the standard link

Sample integrating d3-sankey-circular with reactjs

I am struggling to integrate this plugin with react.js. Could you please provide a sample? I followed this tutorial https://www.pluralsight.com/guides/using-d3.js-inside-a-react-app to integrate D3 with React.js, but can't find out how to represent the d3-sankey-circular.

Any help and clue is more than welcome, and thanks for the plugin.

Replace node.depth with new column value for certain calculations

Currently, many functions use node.depth to determine which nodes are vertically aligned, which doens't hold true for many instances and justify settings. Need to add new value to node (eg "column"), and use this value instead of depth

bundle with rollupjs

a dependency for #17

Allow for variable width nodes

Update the API for nodeWidth to accept a function that returns a number for width
Notes:
still accept number for backwards compatibility
update the scaleSankeySize function that sets a node's x0 and x1, based on dx (ie nodeWidth)

Commit "use Johnson's algorithm..." breaks javascript library

The mentioned commit adds the following code (apart from more):

var cycles = findCircuits(adjList);

Unfortunately, there is no javascript file used which contains the method which is now required. As such, the library is no longer executable/usable. For my testing I am using the version from before this commit successfully.

Update d3-sankey-circular npm version

I am grateful for accepting my pull requests. But I didn't bump the package version manually. (#47, #48, #49)

I want to ask you to update the version of the d3-sankey-circular npm package so that improvements to the merge requests that were merged could be used and the npm package would have a version that was up-to-date to the master

How to use it in Angular (typescript)

Inconsistent layout with nodePadding

Hi @tomshanley,

I'm looking to use d3-sankey-circular to provide a <Sankey> layout component for vx as the support for circular references is great, but when comparing non-circular layouts that d3-sankey produces, d3-sankey-circular's layouts are not as optimal.

One example I've run across is with the handling of nodePadding. With d3-sankey, the layout does not appear to jump around as the nodePadding goes up and down...

...but with d3-sankey-circular, it's rather eradicate:

Here is the codesandbox that demonstrates the issue.

Update existing graph with new values

Currently, if a graph (similar nodes, links) is updated with new values, it may (small probability) result in a sankey where the nodes are in different positions, which makes it harder for the user to compare changes across different versions. Also, it would involve calling the sankey function again, which would involve a lot of unecessary calculations, which increases the time between updates.

graph not using full height if only one circular link is present

Allow links that span columns to be routed away from other nodes

Currently, non-circular links that connect nodes which aren't in consecutive columns sometimes overlap other nodes which are in between. While the current functions tries to shift the overlapping nodes out of the way, its not always optimal and causes the layouts the be erratic when slightly changing other parameters.

tomshanley / d3-sankey-circular Goto Github PK

d3-sankey-circular's People

Contributors

Stargazers

Watchers

Forkers

d3-sankey-circular's Issues

The default example in the repository does not work correctly, the sorting of nodes by columns is broken.

I am grateful for accepting my pull requests. But I didn't bump the package version manually. (#47, #48, #49)

Recommend Projects

Recommend Topics

Recommend Org