tomshanley / d3-sankey-circular Goto Github PK
View Code? Open in Web Editor NEWA fork of the d3-sankey library to allow circular links.
License: MIT License
A fork of the d3-sankey library to allow circular links.
License: MIT License
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.
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)
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
The dependencies
elementary-circuits-directed-graph
and
strongly-connected-components
do not have headers that are compatible with requirejs.
Related:
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?:
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,
},
],
};
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,
},
],
};
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 ๐
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.
Defaults to node.name, which is not overridden by the user set nodeID function.
Where a node links back to itself, the link should follow the top/bottom setting for the node. This isn't always happening
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.
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 ๐
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
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.
various causes:
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
Sometimes
Dear @tomshanley,
I am not sure why but the following example fails to render:
master...antoinerg:issue-3813
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..)
To allow for custom paths or areas in place of the standard link
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.
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
a dependency for #17
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)
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.
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
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.
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.
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.
The sankey-circular layout can be optimised by changing the nodePadding and link order, which isn't immediately obvious from the API
Provide examples and tips to generate easier to read sankey charts
They all compete to space out the nodes, and scale (which is not available in the API) dominates the final spacing
Just wondering, if we have types for d3-sankey-circular
for TypeScript?
It looks like the targetLinks and sourceLinks should be reversed for nodes.
The variable py
is not initialized in sankeyCircular()
which causes problems with the calculation of y-axis coordinates if the users do not explicitly set the value by themselves.
Currently the page will crash if a node links back to itself
Hey @tomshanley ,
Currently its doesn't support drag functionality,it would be better if we have it.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.