Several Sankey enhancements

[fbreitwieser]

Hi,

I put this issue up for discussion. In my fork of networkD3 (https://github.com/fbreitwieser/networkD3/commits/master) I have implemented several ideas for the Sankey plot.

• Allow specifying depth/breadth of nodes (~ x-position)
  • this required to modify the conflict resolution by adding pseudo nodes, as otherwise the link between distant node is often used for placement of intermediary nodes
• Make distance between node depths dependent on the maximum string length at that level
  • the implementation is currently rather ad-hoc, multiplying a constant with the string length. A better implementation would be el.getBoundingClientRect() as done by @timelyportfolio in sunburstR's sunburst.js
• Add zooming functionality + still allow dragging of nodes
• Use \r\n instead of <br> in tooltips
• Return a ITEM_clicked event to the Shiny server
• Sort nodes according to their path: I only layout trees, which means there are and should be no intersections. However, no matter the iterations, there would be in the previous implementation
• Option to connect nodes by trapezoids instead of bezier curves. While the bezier curves look nice, they have glitches when the link size is big
• Allow specifying node values (instead of setting node values as the maximum of the sum of incoming versus outgoing nodes)

Let me know which of those changes are of interest to you.

Best,
Florian

[timelyportfolio]

I love all of these but I wonder at what point the level of customization and unique arguments begins to violate the overriding principle of simplicity and consistency in networkD3. At this point we might be better creating a separate package for incredibly awesome sankeys. I am eyeing the d3v4 sankeys discussion closely as there is some additional functionality there that will be nice to integrate but will break all of networkD3. I would appreciate some guiding comments by @ christophergandrud. Thanks for all your work on this!

[timelyportfolio]

This pull d3/d3-sankey#4 is the one in particular that interests me most. I really like your trapezoids.

[fbreitwieser]

Hi @timelyportfolio , thanks for your answer! I'd be happy to start and collaborate on a new package focused on the Sankey diagram, and maybe as test-bed for new features. But I'll also take @christophergandrud 's opinion on this.

[timelyportfolio]

cc @daattali since seems like you have some interest in sankeys now :)

[fbreitwieser]

I'm happy to announce that I ported the Sankey to D3 v4 and added some more features and fixes. It's in the repository https://github.com/fbreitwieser/sankeyD3. I'd happily add all of you as collaborators to the project. Also @christophergandrud , please feel free to merge any of the changes back into your code base.

Changelog:

• ported to D3 v4.2.7 based on https://github.com/d3/d3-sankey
  • added several modifications from networkD3 sankey.js
  • included fixes and features from unmerged pull requests:
    • sankey: fix nodesByBreadth to have proper ordering d3/d3-plugins#124: Fix nodesByBreadth to have proper ordering
    • More functionality for sankey.js d3/d3-plugins#120: Added 'l-bezier' link type
    • Sort sankey target links by descending slope. d3/d3-plugins#74: Sort sankey target links by descending slope
    • Add horizontal alignment option to Sankey layout d3/d3-sankey#4: Add horizontal alignment option to Sankey layout
• added option numberFormat, default being ",.5g" (see , fixes Numeric values not displayed in sankey network tooltip #147)
• added option NodePosX, fixes Add custom x-positions for nodes in Sankey plot #108
• added option to force node ordering to be alphabetical along a path (only works well with trees with one parent for each node, but might fix sankey: any way to force the order of nodes? #153)
• added option to highlight links to children on hover
• I could not get the svg viewbox code to work ( @timelyportfolio , could you have a look? )

The inst/examples/shiny web-app exposes several of the features:

[christophergandrud]

@fbreitwieser This is amazing work! Well done.

I've been wanting to do a complete rewrite of networkD3 for D3 v4 (#143), but have just been really really busy with other work.

From January I'm moving to Harvard to work almost entirely on statistical software development. so should be able dedicate more time to this. Given that you've already done a lot of the ground work on this, would you be interested in helping out (e.g. pointing out pain points and other issues you experienced in the transition to v4)?

[fbreitwieser]

Thanks for the kind words. Please note that Javascript and D3 are not my usual programming languages, and I might do some things wrong or inefficient.

Porting to D3 v4 is mostly pretty straightforward due to the good documentation of the changes. The Wiki lists, for each of the modules, the changes from v3 to v4 on the Wiki. See for example https://github.com/d3/d3/wiki/Zoom-Behavior . The best overview I find is in https://iros.github.io/d3-v4-whats-new .

• d3 v4 is modular, and you can specify to use only those modules you need. However you can (and I currently do) still just use the entire v4 build
• What had me most confused at first were the changes to enter / update selections
  • you need to specifically merge back enter.append results
  • a good explanation of the motivation behind it is in https://medium.com/@mbostock/what-makes-software-good-943557f8a488#.djse3evpl
  • instead of

        var link = svg.selectAll(".link").data(sankey.links())
        link.enter().append("path").attr("class", "link")

you now have to write more verbosely

        var link = svg.selectAll(".link").data(sankey.links())
        var newLink = link.enter().append("path").attr("class", "link");
        link = newLink.merge(link);

• There were lots of renamings due to the flatter namespace (everything is now in d3.*):
  • d3.behavior.zoom renamed to d3.zoom
    • zoom.event.scale -> zoom.event.transform.k
    • zoom.translate -> zoom.transform.x + "," + zoom.transform.y
  • d3.scale.category20() -> d3.scaleOrdinal().range(d3.schemeCategory20)
  • d3.interpolateNumber -> d3.number

[christophergandrud]

This is a really nice write up. Thanks!