Plotly.js: Add support for Sankey charts

[gramster]

What it says

[jackparmer]

@gramster We've had a few requests for this lately.
Do you mind filling out this form so I can send you an email?
https://plot.ly/products/enterprise/get-in-touch/

[jackparmer]

It probably would not be too difficult to integrate this:
https://github.com/d3/d3-plugins/tree/master/sankey

The key part would be defining the JSON spec for Sankey diagrams (http://help.plot.ly/json-chart-schema/). Here's the matplotlib API:
http://matplotlib.org/api/sankey_api.html

[etpinard]

assigning @monfera :tada:

[monfera]

A summary of hard requirements toward the initial implementation:

• [ ] unidirectional DAG (no cycles initially)
• [ ] linear layout; option for horizontal or vertical flow orientation
• [ ] works on mobile
• [ ] optionally deactivated default hover tooltip with basic data and minimal styling
• [ ] plotly_hover event raised on hover to allow custom tooltips or other interactions
• [ ] text labeling for nodes
• [ ] an SVG renderer with decent scenegraph and CSS class names to enable some styling above and beyond the plotly.js Sankey attribute options (class names and structure will be subject to implementation changes though as it's not part of the API)
• [ ] ability to filter some of the flows, i.e. not graying out or turning invisible, but to relayout by freeing up their previously occupied beam size (for example, by rerendering the plot with just the restated data as specified by the API caller via e.g. Plotly.restyle)

In addition, we're not currently committing to, but planning to have

• [ ] breakdown of flows (e.g. by a dimension or to flow contributor items)
• [ ] moving nodes around perpendicularly to the overall flow (e.g. up/down on a horizontal layout)
• [ ] coloring options for nodes, flows and perhaps subflows (not yet specified)

[monfera]

@etpinard now equipped with stable sorting parallel links, it's important to style the currently hovered line (don't mind the temporary tooltip now) as there may be partial occlusion. I could use some guidance on the approach, e.g. should I create .sankeyLink:hover CSS styling, or should it be done in CSS, and should there be some configuration attributes for it? Or pls. point me to a suitable precedent.

[etpinard]

This was completed in https://github.com/plotly/plotly.js/pull/1591 released in 1.27.0

[jackparmer]

Docs for Sankey diagrams:

Python: https://plot.ly/python/sankey-diagram/
R: https://plot.ly/r/sankey-diagram/
JavaScript: https://plot.ly/javascript/sankey-diagram/