soxofaan / d3-plugin-captain-sankey

Friendly (subtree) fork of the "sankey" plugin from https://github.com/d3/d3-plugins

Sankey Diagrams

Demo

• http://bost.ocks.org/mike/sankey/
• see the examples folder

Basic usage

Expected data (format): arrays of nodes and links.

// Array of node objects (e.g. with a 'name' field here):
var nodes = [
    {name: "a"},
    {name: "b"},
    // ...
];
// Array of links between the nodes:
// objects with 'source', 'target' node indices and a 'value' for the link weight:
var links = [
    {source: 0, target: 1, value: 10.2},
    {source: 0, target: 2, value: 5.4}
    // ...
];

Configure the Sankey object and get a path data generator.

var sankey = d3.sankey()
    .size([width, height])
    .nodeWidth(15)
    .nodePadding(10)
    .nodes(nodes)
    .links(links)
    .layout(32);

var path = sankey.link();

Draw links and nodes, the bare essence:

// Draw links (as svg paths)
root.selectAll('.link')
    .data(links)
    .enter().append('path')
    .attr('class', 'link')
    .attr('d', path)
    .style("stroke-width", function (d) { return Math.max(1, d.dy); })
    // ...

// Draw nodes
root.selectAll('.node')
    .data(nodes)
    .enter().append('rect')
    .attr({
        'class': 'node',
        x: function (d) { return d.x },
        y: function (d) { return d.y },
        height: function (d) { return d.dy; },
        width: sankey.nodeWidth()
    })
    // ...

d3-plugin-captain-sankey's Issues

Support cycles in graph

related to #4 and d3/d3-plugins#1

Screenshot for README.md

Avoid endless loop when graph has cycles

when there are cycles in the graph, sankey ends up in an endless loop

Allow (and display) empty target like Google Analytics Flow Chart (red arrow pointing down)

i have the same related problem : http://stackoverflow.com/questions/35284063/showing-drop-off-on-google-sankey-chart/36038303
is it possible to have the same Google Analytics option in order to display exit links (without target) with a red arrow pointing down ?

allow drop-off from a node

Has anyone worked on creating a drop-off from node just like an exit.

Do vertical and horizontal scaling with d3 scales instead of manual math

exposing the scales could also make things more versatile

Status

Hi,

I'm very much interested in the cycles support extension developed here.
But after reading through d3's original sankey plugin issues and here, it's not clear to me whether this project is still active or it has been subsumed into other d3's official repo, like d3-sankey.

I'll be closing this when I have an answer.

Thanks.

marker-end causes path to bunch up

I added a marker:

//marker-end of path
svg.append('marker')
.attr('id', "end-arrow")
.attr('markerHeight', 2.5)
.attr('markerWidth', 2, 5)
.attr('orient', 'auto')
.attr('refX', -5)
.attr('refY', 0)
.attr('viewBox', '-5 -5 20 10')
.append('path')
.attr('d', 'M 0,0 m -5,-5 L 0,0 L -5,5 Z')
.style("fill", "#969696");

And then here:
// Enter + Update
links.attr('d', path)
.style("marker-end", "url(#end-arrow)")
.style("stroke-width", function (d) {
return Math.max(1, d.dy);
});

And a slight mod to sankey.js for some room to draw the arrow at the end of the path:

function link(d) {
var xs = d.source.x + d.source.dx,
//added the following to shrink the path so there is room for the arrow;
//however path bunches up in cycle demo, is there a way to smooth out the path a bit
xt = d.target.x - (d.dy / 2),
//xt = d.target.x,

Is there a way to smooth out the path a bit so that it doesn't bunch up as shown in the png.

Sankey with variable nodeWidth

Hey @soxofaan, you look like the expert with this plugin.

I was just wondering how feasible it would be to modify it to allow for variable nodeWidths, so that each node could be a block that displayed some other information inside.

In particular, my application is a timeline where groups split and re-join, and I'd like to fix the x-axis to reflect the beginning and end of these groups (i.e. real-time) rather than fixed-width and fixed spacing. It seems like setting the .dx values to a parameter rather than a fixed value is pretty simple; I'm just wondering how much it would mess up the layout algorithm. Any thoughts would be much appreciated!

cc @ldworkin

Improve the layout algorithm in computeNodeDepths

In computeNodeDepths, the node position recalculation is based on a weighted average of the centers of the source/target nodes of incoming/outgoing links.

It would probably be better to use the centers of only the node fractions corresponding with the links