Sunburst traces #3594

etpinard · 2019-03-01T20:40:44Z

Sunburst traces are coming to plotly.js 🌞

1st iteration features

custom click iterations: clicking on branches zooms in, click on relative roots (in the middle) zooms out
per-sector coloring through marker.colors with per-branch color inheritance
optional per-sector values and two ways to sum them via branchvalues: 'total' | 'extra'
fully-featured hover, with hovertext, hoverinfo and hovertemplate support
pie-like sector coloring via sunburstcolorway and extendsunburstcolors
"leaf"-only opacity setting (to easily recreate common sunburst examples in the wild where leaves are less opaque then branches e.g. https://observablehq.com/@d3/d3-zoomable-sunburst)
the same auto-text-fitting algo used in pie traces

TODOs

agree on attribute names:
- labels / parents / values or label / value / parent ?
- level / maxdepth can anyone think of less-confusing names?
agree on branchvalues default 'total' or 'extra'?
experiment with storke-linejoin and stroke-miterlimit - see 1b21aae
make marker.line.width: 1 the default - done in c1ccad6
agree on click transitions easing and duration
fixup react + transitions edge cases
hook up uirevision done in: 0da13db
mucho jasmine tests
a few more mocks

Things that may be added in this PR

smooth transitions on click interactions + compatibility with Plotly.react transition API. I'll give this a try next week. THIS IS GOING IN --> aa3adf3
an enumerated marker.colorinheritance attribute to offer more ways to inherit sector colors
allow labels / parents duplication when unambiguous (d3-hierarchy is very strict)
replace d3-hierarchy (hierarchy, stratify, partition) calls with own implementation

cc @plotly/plotly_js @chriddyp @nicolaskruchten

- use d3-hierarchy (for now) to help out with the logic - add special `plotly_sunburstclick` event to zoom in/out - adapt pie's transformInsideText for sunbursts' ring

... for sunburst files when reading off the d3-hierarchy output

nicolaskruchten · 2019-03-04T15:16:48Z

This looks really nice!

One concern, re the text, which may also apply to pies... Is it possible to control the size so it's not 'auto'? Right now I worry about the larger text calling more attention to certain slices just because the text label is smaller therefore gets scaled up. Also aesthetically is it possible to just say "do a radial layout always even if text could be bigger/more horizontal"? Or possibly "do a symmetrical layout of text"? In certain cases, symmetry will be more highly-valued than absolute maximum readability...

etpinard · 2019-03-04T15:56:39Z

Is it possible to control the size so it's not 'auto'?

yes, via insidetextfont.size

Also aesthetically is it possible to just say "do a radial layout always even if text could be bigger/more horizontal"?

Funny, a user wrote in about that in #3590 last week. I might try to ✅ in this PR.

nicolaskruchten · 2019-03-04T16:02:33Z

yes, via insidetextfont.size

OK cool, does that disable the rotations or does it still try to get the most-horizontal-that-still-fits or... ?

etpinard · 2019-03-04T23:05:17Z

does that disable the rotations

no, that's what #3590 requests.

... and use paper_bgcolor for marker.line.color dflt

etpinard · 2019-03-06T20:38:13Z

First-cut transition work is on:

sunburst...sunburst-transitions

Here's an sample codepen: https://codepen.io/etpinard/pen/Bbpqvo,

I would appreciate some feedback. Thanks!

Edit: don't try clicking on a sector while a transition is happening, this part doesn't work at the moment. Thank you.

antoinerg · 2019-03-06T21:26:03Z

@etpinard Sunburst will be a strong addition to plotly.js 💪 and animations do add quite a bit of wow factor 🌟

Would it be possible/easy to have the labels appear after the resizing of the sectors is done. I'm asking because the labels are sometimes out of place during the transition. For example, when going from Aromas back to the root, you see the lines delimiting the sectors flying above the labels of the leaf nodes. This intermediate state, where labels are in between sectors and traversed by lines, is not correct or meaningful so I think we should hide it from the user.

nicolaskruchten · 2019-03-07T02:25:41Z

WOW the sector tweens are gorgeous! nice job!!

That said, I agree with @antoinerg re the text. If we can translate the text with the sector tween, it should only start to appear after the sectors have stopped moving IMO.

etpinard · 2019-03-07T21:33:33Z

Update with text-position transitions on sunburst...sunburst-transitions

examples --> https://codepen.io/etpinard/pen/LayPQQ

antoinerg · 2019-03-07T21:38:09Z

examples --> https://codepen.io/etpinard/pen/LayPQQ

Text-position transition looks even better than I imagined 🎉 💪 Just superb!

nicolaskruchten · 2019-03-07T22:11:44Z

OMG so awesome!

chriddyp · 2019-03-07T23:39:48Z

yeah that's gold 🏅

jonmmease · 2019-03-07T23:49:13Z

So nice @etpinard!

what is double click intended to do on these? Seems to sometimes hide some of the wedges but I haven't been able to grok exactly what's going on.

On second try, it's not double clicking per-say, it's that clicking on the sunburst while it's animating sometimes causes some odd behavior with wedges disappearing. Maybe disable click interactions during transitions?

- get correct inside text contrasted color - fix text position for concentric circle sector

- tweens sector paths and text 🎉 - first-cut Plotly.animate support - calls Plotly.animate on sector click ! - disables sector clicks during transitions - trigger plotly_click on root and leaf node - clean up variable names and helpers, 1 routine to attach click and hover handlers !

etpinard · 2019-03-08T22:54:12Z

Pre-vacation update

Updated example codepen: https://codepen.io/etpinard/pen/ZPybzB

I squashed all my transitions work into one large commit aa3adf3 where:

sector paths and text are tweened 🎉
sunburst will be our 2nd trace with support for transitions via Plotly.animate and Plotly.react
clicking on a sector simply calls Plotly.animate with the appropriate arguments.
the sector click handler is disabled during transitions, so the odd "wedges disappearing" behaviour is a thing of the past

The TODO list in the PR description has been updated. Please let me know if there's any other blocking items for this first iteration.

Now, I'm thinking of removing leaf.textposition and making sunburst traces only support inside text for all sectors except the hierarchy root. Getting outside text to tween properly will take at least 1 full day (see 92e5fe7): as most sunburst in the wild only have inside text, removing leaf.textposition sounds ok to me. Please let me know if you disagree. Update: 🔪 in 160bf4b

Moreover, I'm thinking of not implementing attributes sort, direction and rotation in this first iteration. Please let me know if that's ok. Update: 🔪 in 285b115

- to try to keep text inside sector, while keeping a transition smooth in the math sense.

- this would've been tricky to tween smoothly, most sunburst charts in the wild have text labels inside sectors only, so I didn't see the need to have this part of the first release.

... which could be moved back in if deemed necessary for the first iteration

etpinard · 2019-03-22T15:29:27Z

Tagging this as reviewable cc @plotly/plotly_js

src/traces/sunburst/attributes.js

src/traces/sunburst/calc.js

antoinerg · 2019-03-26T02:35:51Z

agree on branchvalues default 'total' or 'extra'?

I'm still debating with myself about this one... I don't have a compelling argument for changing it from the current default extra to total. Maybe someone else does @plotly/plotly_js?

src/traces/sunburst/plot.js

src/traces/sunburst/attributes.js

- add d3.hierachy error message - add appropriate tests

antoinerg · 2019-03-28T17:21:26Z

This is one hell of a PR 🌞 ! Amazing work @etpinard 💪

💃 💃 💃

mwouts · 2019-04-07T19:57:51Z

Thanks for the amazing contribution! I love the new sunburst plots! For those who can't wait for the next plotly.py release, have a look at the example below to see how to generate those plots in Python right now.

etpinard added 6 commits March 1, 2019 14:59

move pie hover logic into own scope

4549692

export of few things in Pie.plot that sunburst will reuse

450ceda

export a few things in Pie.calc that sunburst will reuse

6695e76

add Sunburst trace module

a7e7e65

- use d3-hierarchy (for now) to help out with the logic - add special `plotly_sunburstclick` event to zoom in/out - adapt pie's transformInsideText for sunbursts' ring

add 4 preliminary sunburst mocks

50922a6

adapt test syntax to not fail on .children

a1d9b2b

... for sunburst files when reading off the d3-hierarchy output

etpinard added status: in progress labels Mar 1, 2019

etpinard added this to the v1.46.0 milestone Mar 1, 2019

etpinard added 2 commits March 4, 2019 18:14

make marker.line.width dflt 1

c1ccad6

... and use paper_bgcolor for marker.line.color dflt

style up sunburst values mock a bit more

66b45ab

etpinard added 5 commits March 8, 2019 17:17

fix a couple text-rendering bug

d5fd040

- get correct inside text contrasted color - fix text position for concentric circle sector

fix root-level multiple-roots view when maxdepth is set

a3f1cf8

add some TODOs about tweaning for leaf.textposition:'outside'

92e5fe7

lower "full" circle tolerance, to 🔪 transition glitches

f1aa7d3

etpinard force-pushed the sunburst branch from a000f3b to f1aa7d3 Compare March 8, 2019 22:38

etpinard added 10 commits March 8, 2019 17:58

adapt sunburst-specific block in assertSrcContents

05a0209

Merge branch 'master' into sunburst

79545db

add a sunburst mock to mock list

1584434

hook in uirevision for sunburst click handler

0da13db

smooth out start/end from entry,

27d0bda

- to try to keep text inside sector, while keeping a transition smooth in the math sense.

add sunburst jasmine suite + misc bug fixups

bb37e51

🔪 leaf.textposition (for now)

160bf4b

- this would've been tricky to tween smoothly, most sunburst charts in the wild have text labels inside sectors only, so I didn't see the need to have this part of the first release.

use same 'stroke-linejoin' as pie traces

1b21aae

rm 'sort', 'direction' and 'rotation' attrs (for now)

285b115

... which could be moved back in if deemed necessary for the first iteration

Merge branch 'master' into sunburst

5d981c2

etpinard added status: reviewable and removed status: in progress labels Mar 22, 2019

etpinard mentioned this pull request Mar 22, 2019

Fixup pie/sunburst unhover post plot/calc restyle calls #3662

Merged

antoinerg reviewed Mar 25, 2019

View reviewed changes

src/traces/sunburst/attributes.js Outdated Show resolved Hide resolved

antoinerg reviewed Mar 25, 2019

View reviewed changes

src/traces/sunburst/attributes.js Outdated Show resolved Hide resolved

antoinerg reviewed Mar 25, 2019

View reviewed changes

src/traces/sunburst/calc.js Outdated Show resolved Hide resolved

antoinerg reviewed Mar 25, 2019

View reviewed changes

src/traces/sunburst/calc.js Show resolved Hide resolved

antoinerg reviewed Mar 26, 2019

View reviewed changes

src/traces/sunburst/plot.js Outdated Show resolved Hide resolved

etpinard commented Mar 28, 2019

View reviewed changes

src/traces/sunburst/attributes.js Outdated Show resolved Hide resolved

etpinard added 3 commits March 28, 2019 11:38

rename 'extra' -> 'remainder' + attrs description fixes

1258f2d

pull transition constants into own file, lower duration to 750ms

b59be1d

do not render hierarchy when partial sums > sector value

4a2f7a5

- add d3.hierachy error message - add appropriate tests

etpinard merged commit 20553d5 into master Mar 28, 2019

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Sunburst traces #3594

Sunburst traces #3594

etpinard commented Mar 1, 2019 •

edited by antoinerg

Loading

nicolaskruchten commented Mar 4, 2019 •

edited

Loading

etpinard commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

etpinard commented Mar 4, 2019

etpinard commented Mar 6, 2019 •

edited

Loading

antoinerg commented Mar 6, 2019 •

edited

Loading

nicolaskruchten commented Mar 7, 2019

etpinard commented Mar 7, 2019

antoinerg commented Mar 7, 2019

nicolaskruchten commented Mar 7, 2019

chriddyp commented Mar 7, 2019

jonmmease commented Mar 7, 2019

etpinard commented Mar 8, 2019 •

edited

Loading

etpinard commented Mar 22, 2019

antoinerg commented Mar 26, 2019

antoinerg commented Mar 28, 2019

mwouts commented Apr 7, 2019

Sunburst traces #3594

Sunburst traces #3594

Conversation

etpinard commented Mar 1, 2019 • edited by antoinerg Loading

1st iteration features

TODOs

Things that may be added in this PR

nicolaskruchten commented Mar 4, 2019 • edited Loading

etpinard commented Mar 4, 2019

nicolaskruchten commented Mar 4, 2019

etpinard commented Mar 4, 2019

etpinard commented Mar 6, 2019 • edited Loading

antoinerg commented Mar 6, 2019 • edited Loading

nicolaskruchten commented Mar 7, 2019

etpinard commented Mar 7, 2019

antoinerg commented Mar 7, 2019

nicolaskruchten commented Mar 7, 2019

chriddyp commented Mar 7, 2019

jonmmease commented Mar 7, 2019

etpinard commented Mar 8, 2019 • edited Loading

Pre-vacation update

etpinard commented Mar 22, 2019

antoinerg commented Mar 26, 2019

antoinerg commented Mar 28, 2019

mwouts commented Apr 7, 2019

etpinard commented Mar 1, 2019 •

edited by antoinerg

Loading

nicolaskruchten commented Mar 4, 2019 •

edited

Loading

etpinard commented Mar 6, 2019 •

edited

Loading

antoinerg commented Mar 6, 2019 •

edited

Loading

etpinard commented Mar 8, 2019 •

edited

Loading