Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

d3-sankey-circular #3406

Merged
merged 41 commits into from Feb 14, 2019

Conversation

Projects
None yet
4 participants
@antoinerg
Copy link
Collaborator

commented Jan 7, 2019

Initial integration of d3-sankey-circular to close #2636

This branch is based off PR #3355 which brings d3-sankey to version 0.7.1.

When detecting circular links, we swap from d3-sankey(https://github.com/d3/d3-sankey) to d3-sankey-circular (https://github.com/tomshanley/d3-sankey-circular). This is possible because d3-sankey-circular has a similar API to d3-sankey 0.7.x and this is why PR #3355 was an important stepping stone.

Here are example baselines:

To do:

  • Add dragging and a force model
  • Links are not rectangles anymore but path (so we don't have a fill property, but only stroke)
  • Style link on hover

@antoinerg antoinerg changed the base branch from sankey-d3-sankey-0.7 to master Jan 7, 2019

"alpha-shape": "^1.0.0",
"array-range": "^1.0.1",
"canvas-fit": "^1.5.0",
"color-normalize": "^1.3.0",
"convex-hull": "^1.0.3",
"country-regex": "^1.1.0",
"d3": "^3.5.12",
"d3-sankey": "git://github.com/antoinerg/d3-sankey.git#4f37ed8d3578b545a8569ecd74583f373768e900",

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 7, 2019

Author Collaborator

Minimal changes over latest d3-sankey d3/d3-sankey@master...antoinerg:fix-large-padding

This comment has been minimized.

Copy link
@etpinard

etpinard Jan 15, 2019

Member

Hmm. So we no longer need https://github.com/plotly/d3-sankey ? I thought i read that we made changes in our @plotly/d3-sankey that got rejected by d3/d3-sankey.

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 15, 2019

Author Collaborator

Those changes were minimal. One of the biggest was that we generated the SVG path for the links in it. As you found out in this PR, we can do this operation in plotly.js instead.

This comment has been minimized.

Copy link
@etpinard

etpinard Jan 15, 2019

Member

Ok that make sense. Do you think we have a shot at getting

d3/d3-sankey@master...antoinerg:fix-large-padding

merged into d3/d3-sankey?

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 17, 2019

Author Collaborator

There hasn't been anything merged into master in d3/d3-sankey since Jul 13, 2017 so I'm not sure... I opened a PR almost a month ago d3/d3-sankey#63 and there has been no activity since then.

"alpha-shape": "^1.0.0",
"array-range": "^1.0.1",
"canvas-fit": "^1.5.0",
"color-normalize": "^1.3.0",
"convex-hull": "^1.0.3",
"country-regex": "^1.1.0",
"d3": "^3.5.12",
"d3-sankey": "git://github.com/antoinerg/d3-sankey.git#4f37ed8d3578b545a8569ecd74583f373768e900",
"d3-sankey-circular": "git://github.com/antoinerg/d3-sankey-circular.git#a298acf674f0a9c7158243d45814cd8060dad728",

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 7, 2019

Author Collaborator

Minimal changes over latest d3-sankey-circular tomshanley/d3-sankey-circular@master...antoinerg:support-update

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 18, 2019

Author Collaborator

Those changes got merged in 🚀 !

@antoinerg

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 8, 2019

Here's a Codepen to generate random mocks with circular links: https://codepen.io/anon/pen/LMBZbK

You can play around with N, L and targetOffset in the source code.

@AryehGielchinsky

This comment has been minimized.

Copy link

commented Jan 13, 2019

Hi @antoinerg, thank you for your work bringing circular Sankey to plotly. I'm beginner/intermediate at python, beginner at plotly, and don't know any JavaScript. Is there any way I could help?

@antoinerg

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 14, 2019

Hello @AryehGielchinsky and thank you for your interest in plotly.js. Sankey is undergoing majors changes as we're implementing several new features. Getting feedback from the community is always useful.

What's your use case for circular Sankey? Do you have interesting datasets with circularity that we could use as examples?

@antoinerg

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 18, 2019

hovers appear in the center of circular loops.

Good ! For forward links the bounding box center is always on the link, but for circular links it would be great to move the hover box anchor to the center of the back stretch.

@alexcjohnson Is the following what you had in mind? I am not sure what part is the "back stretch".

sankey_fixed_hover

@alexcjohnson

This comment has been minimized.

Copy link
Contributor

commented Jan 18, 2019

@alexcjohnson Is the following what you had in mind? I am not sure what part is the "back stretch".

Yep, you got it exactly as I had in mind! https://en.wikipedia.org/wiki/Backstretch

@AryehGielchinsky

This comment has been minimized.

Copy link

commented Jan 21, 2019

Hi @antoinerg unfortunately I wont be able to share Sankey diagrams based on my company's datasets.

I look forward to the completion of this project, I think it will make plotly's sankey diagrams much more useful. Keep up the good work!

@etpinard

This comment has been minimized.

Copy link
Member

commented Jan 21, 2019

@antoinerg this thing is starting to look great. Here's an updated TODO list:

  • ask the d3-sankey-circular author to publish a new version to npm, update our deps accordingly
  • merge the changes from your d3-sankey fork to @plotly/d3-sankey, update our deps accordingly
  • add a few jasmine tests to 🔒 down sankey.update()
@antoinerg

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 22, 2019

In commit 9b36090, I 🔒 down sankey.update() and fix a little bug that I discovered in its implementation in d3-sankey-circular: it wouldn't force circular links to go from top to bottom on the first invocation of update(). Because we make the call to update() in the animation loop over and over, this error on the first call was not perceivable to the user. Anyway, this is now fixed.

I will submit PR upstream (edit: done here tomshanley/d3-sankey-circular#29). BTW, its maintainer @tomshanley said he could publish an npm package as soon as he gets back from holiday (tomshanley/d3-sankey-circular#28 (comment)).

@antoinerg

This comment has been minimized.

Copy link
Collaborator Author

commented Jan 24, 2019

@etpinard Tomorrow I intend to create/update our own forks for both d3-sankey and d3-sankey-circular and publish npm packages for them. Was updating our deps the only remaining thing blocking this PR?

@etpinard

This comment has been minimized.

Copy link
Member

commented Jan 24, 2019

Was updating our deps the only remaining thing blocking this PR?

Yes. Your new tests look good!

@@ -0,0 +1,65 @@
{
"data": [{

This comment has been minimized.

Copy link
@etpinard

etpinard Jan 24, 2019

Member

Cool mock!

expect(sankey.nodePadding()).toEqual(10, 'incorrect nodePadding');
});
// Update links
var updatedGraph = sankey.update(graph);

This comment has been minimized.

Copy link
@etpinard

etpinard Jan 24, 2019

Member

Actually, can we make these tests use restyle instead of (the internal) sankey.update?

This comment has been minimized.

Copy link
@antoinerg

antoinerg Jan 24, 2019

Author Collaborator

Actually, can we make these tests use restyle instead of (the internal) sankey.update?

I don't think we can do that right now because we don't have any attributes to control the position of the nodes (so no restyle call can change the position of the nodes). Right now, sankey.update is only called when nodes are dragged around with the mouse.

Maybe tests using restyle could be included in a future PR implementing attributes node.x and node.y? Or maybe I should add those attributes here right now?

This comment has been minimized.

Copy link
@etpinard

etpinard Jan 24, 2019

Member

Ha I see. Good point.

Can you add (just) one restyle test that update circular to non-circular node and links data? Or better yet, one react test that goes from one circular mock to a non-circular one?

This comment has been minimized.

Copy link
@etpinard

etpinard Feb 14, 2019

Member

One last TODO ⬆️

@etpinard etpinard added this to the v1.45.0 milestone Jan 24, 2019

antoinerg added some commits Feb 14, 2019

Merge pull request #3535 from plotly/pr-large-sankey-circular
handle large circular sankey diagram
@etpinard

This comment has been minimized.

Copy link
Member

commented Feb 14, 2019

Amazing work!

💃 💃 💃

@antoinerg antoinerg merged commit 30eaa3a into master Feb 14, 2019

8 checks passed

ci/circleci: build Your tests passed on CircleCI!
Details
ci/circleci: publish Your tests passed on CircleCI!
Details
ci/circleci: test-image Your tests passed on CircleCI!
Details
ci/circleci: test-image2 Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine Your tests passed on CircleCI!
Details
ci/circleci: test-jasmine2 Your tests passed on CircleCI!
Details
ci/circleci: test-syntax Your tests passed on CircleCI!
Details
continuous-integration/appveyor/branch AppVeyor build succeeded
Details

@antoinerg antoinerg deleted the sankey-circular branch Mar 26, 2019

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.