Sankey Diagram made easy. A javascript library that extends the popular D3.js/d3-sankey to enable fast and beautiful.
Home Page: https://bl.ocks.org/FabricioRHS/7dc4a5be7caaf3d8d8044680a7347447
License: MIT License
Update d3-sankey dependency from 0.5.0 to version 0.7.1.
Adjusting the changes that will be needed in the code.
I tried to use your library, and created this file:
<!DOCTYPE html>
<div id="chart"/>
<script src="//d3js.org/d3.v4.js"></script>
<script src="//rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.js"></script>
<link href="//rawgit.com/FabricioRHS/skd3/master/build/sk.d3.min.css" rel="stylesheet" type="text/css" />
<style>
#chart {
height: 500px;
width: 960px;
}
</style>
<script>
var configSankey = {
margin: { top: 10, left: 10, right: 10, bottom: 10 },
nodes: {
dynamicSizeFontNode: {
enabled: true,
minSize: 14,
maxSize: 30
},
draggableX: false,
draggableY: true,
colors: d3.scaleOrdinal(d3.schemeCategory10)
},
links: {
formatValue: function(val) {
return d3.format(",.0f")(val) + ' TWh';
}
},
tooltip: {
infoDiv: true,
labelSource: 'Input:',
labelTarget: 'Output:'
}
}
var data = {"links":[{"value":1,"source":1,"target":3},{"value":10,"source":3,"target":0},{"value":2,"source":3,"target":1},{"value":3,"source":3,"target":4},{"value":1,"source":3,"target":5},{"value":1,"source":3,"target":6},{"value":2,"source":5,"target":1},{"value":9,"source":5,"target":2},{"value":25,"source":5,"target":3},{"value":11,"source":5,"target":6},{"value":1,"source":6,"target":3}],"nodes":[{"value":10,"name":"Accepted"},{"value":3,"name":"Needs revision"},{"value":9,"name":"Out-of-scope"},{"value":10,"name":"Pending"},{"value":3,"name":"Rejected"},{"value":64,"name":"discussed"},{"value":11,"name":"dormant"}]};
var objSankey = sk.createSankey('#chart', configSankey, data);
</script>
but it seems to send my browser into an infinite loop.
Does your library support circular sankey graphs?
Sample JSON:
{
"nodes": [
{
"name": "AMP FINANCIAL PLANNING PTY LIMITED",
"color": "#e65472",
"fill": "main_node"
},
{
"name": "to Other",
"color": "#e65472",
"fill": "linearGradientRed"
},
{
"name": "from Other",
"color": "#3db1a7",
"fill": "linearGradientGreen"
}
],
"links": [
{
"source": 0,
"target": 1,
"value": 2
},
{
"source": 2,
"target": 0,
"value": 3
}
]
}
This my sample json file. When I used this then LHS graph is not showing. only rectangle is created .
Please help me for urgent basis.
If I update the chart with new data where there are less or more nodes, the resulting chart updates the wrong nodes with the new data.
I guess this can be solved by adding an id to the links, but I'm not sure how that would work with this library.
Hi,
I decided to use your version of d2-sankey since it is very easy to configure. Now I got stuck when I am trying to group the nodes. It would be awesome if you could add this feature. Otherwise I would apprechiate if you can give me a hint how to solve this.
Hi;
I really loved your version of sankey graph. I really appreciated and am planning to use for one of my projects.
What I want is to attach a double click event and open a popup op when ever a particular "rect" or "path" DOM object is clicked. Is there a work around?
Thanks
Hi guys, any one face issue when you implement the library with webpack?
I had no issue implementing it the usual way where you just insert '<script>' tags.
When i implement webpack, i keep getting 'D3.tip is not a function' error.
i import SKD3 by adding import {} from 'skd3/build/sk.d3.js; in my index.js file.
any idea how to use lib with Ionic ?
For more responsiveness it would be good if the generated SVG would automatically resize with the container. There is an option for this in D3 - It would be cool if you could make this an option.
https://stackoverflow.com/questions/16265123/resize-svg-when-window-is-resized-in-d3-js
React
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
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
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.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.