Polar 2.0 #2200

etpinard · 2017-12-12T15:16:26Z

should close everything listed under the on-par polar milestone 🎉

I'm making a PR at this stage to:

hopefully get a few 👍 s about the attributes came up with. I would appreciate if @alexcjohnson @cldougl @chriddyp could take a 👀 at commits 3c8ae5b and 853581e,
pin down the last open items, and
set a firm base branch for @dfcreative 's upcoming scatterpolargl work.

Working features so for:

scatterpolar is on-par with scattertenary e.g. lines, markers, text, some fills options and line shapes as well as point selections are supported.
scatterpolar accepts input angles in both degrees and radians using a polar-only thetaunit attribute
polar subplots have fully configurable radial and angular axes styling.
users can set the direction and starting angle of each polar subplots. (see polar_direction)
polar subplots can be carve into sectors (see polar_sector)
polar subplots can display angular tick labels in degrees or in fractions of pi.
polar subplots accepts category as angles (see polar_categories)

Quick demo:

Biggest open item: zoombox interactions

What should zoom interactions look like? At first, me and @alexcjohnson thought that a viewbox-based zoom system would suffice. In details, we thought about exposing a set of scalar attributes e.g. polar.x, polar.y and polar.zoom that determine the location and zoom-level of the polar subplots with respect to their polar.domain bounding-box. But there's a problem with such system: for some sets of x/y/zoom values, viewers won't see the subplot radial and/or angular axes - making data point only discernible via hover.

While adding functionality for non-full polar.sector values, I thought that perhaps we could make zoombox interactions correspond to a combination of polar sector and radial axis range relayout updates. That is, zooming in on a point would correspond to carving a sector around it and narrowing the radialaxis.range (note that radial axis ranges that don't start at 0 are common in other libraries e.g. matlab).

@nicolaskruchten pointed out that generalising polar.sector to some 4-pt polar bounding box attribute could allow for even better zooming interactions (we should probably draw that on a whiteboard and take a screenshot to make it easier to grasp).

So I ask: is x/y/zoom zooming more intuitive than some fancy sector/radial range algo?

cc'ing @jackparmer @cpsievert @monfera @bpostlethwaite who might also be interested.

... and reuse Scatter.selectPoints straight up 🎉

... instead of hacky subplot ref punched during ScatterPolar.plot

- selections and hover are working - not much else

- that update `polar.radialaxis.position`

etpinard · 2017-12-12T15:19:31Z

src/plots/cartesian/axes.js

+    // If same angle over a full circle, the last tick vals is a duplicate.
+    //
+    // TODO must do something similar for angular date axes.
+    if(ax._id === 'angular' && Math.abs(rng[1] - rng[0]) === 360) {


I had to hack a few things deep into axes.js to get the angular axes looking the way I wanted. I hope @alexcjohnson won't mind.

What if you use something else as the period of a linear angular axis? Also do we need to do something more flexible to handle nearly duplicate values so we don't get overlaps?

etpinard · 2017-12-12T15:24:32Z

src/plots/polar/layout_attributes.js

+        //  http://www.seasonaladjustment.com/2012/09/05/clock-plot-visualising-seasonality-using-r-and-ggplot2-part-3/
+        //  https://i.pinimg.com/736x/49/b9/72/49b972ccb3206a1a6d6f870dac543280.jpg
+        //  https://www.climate-lab-book.ac.uk/spirals/
+    },


Some screenshot of date angular axes:

Great feature !! Can you please include the code (layout config attributes) for the above example screenshots?

etpinard · 2017-12-12T15:26:18Z

src/plots/polar/layout_attributes.js

+    // as it always starts at 0? But, looks like off-zero cutout polar chart are
+    // a thing:
+    // -> mpl allow radial ranges to start off 0
+    // -> same for matlab: https://www.mathworks.com/help/matlab/ref/rlim.html


e.g. in matlab:

etpinard · 2017-12-12T15:39:53Z

src/plots/cartesian/axes.js

@@ -1905,7 +1905,7 @@ axes.doTicks = function(gd, axid, skipTitle) {
    var axLetter = axid.charAt(0),
        counterLetter = axes.counterLetter(axid),
        vals = axes.calcTicks(ax),
-        datafn = function(d) { return [d.text, d.x, ax.mirror].join('_'); },
+        datafn = function(d) { return [d.text, d.x, ax.mirror, d.font, d.fontSize, d.fontColor].join('_'); },


Cartesian axes use a special ticks update pathway that.

This here gets Axes.doTicks to update properly. I'm pretty sure some axis style updates are currently broken for ternary subplots. I'll lock those down in tests soon.

🔒 in 7b0f718

chriddyp · 2017-12-12T17:11:47Z

🎉 🏆

alexcjohnson · 2017-12-12T17:42:08Z

Re: zooming interaction: I think we may need two different modes, eventually if not right away, because there are two very different ways polar plots get used. One is where you're drawing a real 2D space (where zero is a unique point and shapes have meaning) just in polar coordinates. That's where you would want zoombox-type interactions that I was thinking of. I notice though that none of your examples are of this type (except maybe the cardioid). Your examples all have independent R and Theta variables, just mapped onto a polar space mostly to show periodicity. Incidentally, this points to another way the behavior may want to depend on this distinction: what do you do with negative R? If you're mapping a real space, then it should show up as a positive R in the opposite direction, but if you're not it should disappear at the origin.

So how should zooming work in the independent-variable case? I still need to look at some more example plots with the question "how would I want to zoom this to explore THIS data set", but as a first cut, I feel like the most useful for people would be to independently move each of the axis ends - so min and max radius (dragging them like you drag an axis end in cartesian? @etpinard points out that this is ambiguous with interacting with data near the origin though... not sure how to handle that.), and for angle I guess initial angle (rotating the whole plot) and period (so points at the initial angle would stay put, points at initial angle + period would move with the cursor, points at initial angle + twice the period would move twice as fast as the cursor... per private discussion with @etpinard this interaction should NOT happen when the period is physically significant, like 360 degrees or 2Pi - perhaps we can have an attribute to enable/disable it, with a smart default set depending on whether an explicit period is provided or not)?

I also liked the way our old polar plots had the radial axis on top of the data, with an outline around the text in the background color. Perhaps it could be configurable whether this axis is above or below the data?

etpinard · 2017-12-12T17:48:17Z

I also liked the way our old polar plots had the radial axis on top of the data, with an outline around the text in the background color. Perhaps it could be configurable whether this axis is above or below the data?

Absolutely. I'll add a polar.radialaxis.layer enumerated attribute. I could even make that the default if you prefer. Moreover, it's true that polar charts would benefit a lot from #1597

chriddyp · 2017-12-12T18:28:33Z

What should zoom interactions look like?

In antenna design, where r represents a meaningful amplitude in DBs, it seems like its helpful to be able to zoom just r in and out, i.e. change the "rmin" value:
Here is the example from matlab

Here's an example of a more dense polar line plot, where you could see how it might be helpful to zoom into the region near -40db

(from cisco's antenna guide: https://www.cisco.com/c/en/us/products/collateral/wireless/aironet-antennas-accessories/prod_white_paper0900aecd806a1a3e.html)

alexcjohnson · 2018-01-16T01:33:58Z

test/jasmine/tests/scatterpolar_test.js

+        nums: 'r: 4.022892\nθ: 2.239991',
+        name: 'Trial 3'
+    }, {
+        desc: 'on work on log radial axis',


~~on work~~ on log radial axis

alexcjohnson · 2018-01-16T02:07:22Z

src/plots/polar/polar.js

+
+    // make a small cut on full sectors so that the
+    // inner region isn't filled
+    if(isFullCircle(sector)) s1 -= 1e-3;


FWIW pies solved this by making two arcs at each radius so the annulus really is complete.

Probably not going to cause any issues, it's just missing a fraction of a pixel, but I worry a little about numerical stability - it has to determine the center of the circle based on the very small vector from p00 to p01 and I'm not sure how much precision SVG uses.

alexcjohnson · 2018-01-16T02:38:09Z

Two problems I just encountered with interaction effects, both while looking at the polar_direction mock:

Rotating the plot by dragging the angular axis: seems like this is centered on the wrong point (though dragging the radial axis around has the correct center now)
Dragging the radial axis around: sometimes after I've done this once, it doesn't seem to allow it anymore, I can only change the outer limit of the radius no matter which direction I start the drag. But sometimes it still works indefinitely... I can't really figure out the pattern.

alexcjohnson · 2018-01-16T02:48:56Z

src/plots/polar/polar.js

-        _this.clipPaths.circle.select('path').attr('transform',
-            strTranslate(cxx, cyy) + strRotate(da)
-        );
+        // 'un-rotate' marker and text points


Oh man, that is such a satisfying effect 🍹

alexcjohnson · 2018-01-16T03:04:47Z

@etpinard Fantastic work! Aside from the three quick comments above (at least I hope the interaction bugs are quick 😅 ) the only thing I'd like to see before merging is an issue collecting open items, so we can point people to that when questions arise, and use it to prioritize future additions.

- fixup angular drag xy -> angle calculations - decrease min drag value for radial drag box, to catch smaller dx/dy that can determine rotateMove vs rerangeMove - better annulus path - typo in scatterpolar test

- by default, dragElement clamps small x,y displacement to 0 independently - for radial drag box, using d(x,y) to determine 'small' displacements to clamp prove more advantageous.

alexcjohnson · 2018-01-16T22:25:29Z

src/components/dragelement/index.js

+ *      clampFn (optional, function(dx, dy) return [dx2, dy2])
+ *          Provide custom clamping function for small displacements.
+ *          By default, clamping is done using `minDrag` to x and y displacements
+ *          independently.


Nicely done. And it works great to solve the radial/angular drag bug! 🎯

alexcjohnson · 2018-01-16T22:27:17Z

A hard-fought 💃 - excellent work.

etpinard · 2018-01-16T22:35:46Z

Merging.

For future development ideas and updates, please subscribe to #2255

etpinard · 2018-01-16T22:36:24Z

Oh and please note that (r,t) legacy polar charts are now deprecated! Please switch over to scatterpolar.

etpinard added 19 commits November 28, 2017 11:07

move (old) polar code to legacy/ folder

58d53e8

introduce scatterpolar attributes

853581e

introduce polar subplot attributes

3c8ae5b

introduce angles helper module

ca8081b

first cut polar subplot defaults and draw routines

46fe066

first cut scatterpolar calc/defaults/plot/style/hover

0826ee7

... and reuse Scatter.selectPoints straight up 🎉

misc things to get scatterpolar traces to show up

9770f2c

init categories stashes for polar axes

0b85af2

allow ticksuffix dflt to be passed via option

cbf19c1

get polar axis updates to work

86204a6

add legacy deprecation warnings

0027f53

remove obsolete check for polar in registry

4cdc301

get snapshot redraw function right for (new) polar

a5a719c

improve scatterpolar hover

da720aa

use subplot ref in scatterternary hover pointData

04a886b

... instead of hacky subplot ref punched during ScatterPolar.plot

expose a few things out of cartesian dragbox for ♻️

22cf4ba

uber wip polar main drag interaction

122dd0b

- selections and hover are working - not much else

add radial axis drag interactions

689414c

- that update `polar.radialaxis.position`

first cut polar mocks!

543b615

etpinard added status: discussion needed feature something new labels Dec 12, 2017

etpinard commented Dec 12, 2017

View reviewed changes

alexcjohnson reviewed Jan 16, 2018

View reviewed changes

etpinard mentioned this pull request Jan 16, 2018

No text hover info on polar plots #94

Closed

misc. polar fixup after AJ's review:

816be51

- fixup angular drag xy -> angle calculations - decrease min drag value for radial drag box, to catch smaller dx/dy that can determine rotateMove vs rerangeMove - better annulus path - typo in scatterpolar test

etpinard mentioned this pull request Jan 16, 2018

Polar 2.0 open items #2255

Closed

12 tasks

add clampFn option to dragElement & use it for radial drag box

18a3a0d

- by default, dragElement clamps small x,y displacement to 0 independently - for radial drag box, using d(x,y) to determine 'small' displacements to clamp prove more advantageous.

alexcjohnson reviewed Jan 16, 2018

View reviewed changes

etpinard merged commit 70f3f70 into master Jan 16, 2018

etpinard deleted the polar branch January 16, 2018 22:36

JeffSolomon mentioned this pull request Jan 19, 2018

Feature Request: add support for scatterpolar plotly/plotly.py#920

Closed

alexcjohnson mentioned this pull request Jan 19, 2018

Update es.js #2268

Merged

etpinard mentioned this pull request Feb 2, 2018

Coerce hoverformat on visible-false axes #2329

Merged

etpinard mentioned this pull request May 29, 2018

legend: orientation: "h" does not work on rose plot #2678

Closed

etpinard mentioned this pull request Nov 22, 2019

Add support for date angular axes #4379

Closed

Gloamglozer mentioned this pull request Apr 15, 2020

Support plotting to Smith Charts #4074

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Polar 2.0 #2200

Polar 2.0 #2200

etpinard commented Dec 12, 2017

etpinard Dec 12, 2017

alexcjohnson Jan 5, 2018

etpinard Dec 12, 2017

srpn Mar 20, 2018

etpinard Dec 12, 2017

etpinard Dec 12, 2017

etpinard Dec 21, 2017

chriddyp commented Dec 12, 2017

alexcjohnson commented Dec 12, 2017

etpinard commented Dec 12, 2017

chriddyp commented Dec 12, 2017 •

edited

Loading

alexcjohnson Jan 16, 2018

alexcjohnson Jan 16, 2018

alexcjohnson commented Jan 16, 2018

alexcjohnson Jan 16, 2018

alexcjohnson commented Jan 16, 2018

alexcjohnson Jan 16, 2018

alexcjohnson commented Jan 16, 2018

etpinard commented Jan 16, 2018

etpinard commented Jan 16, 2018

Polar 2.0 #2200

Polar 2.0 #2200

Conversation

etpinard commented Dec 12, 2017

Working features so for:

Biggest open item: zoombox interactions

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

chriddyp commented Dec 12, 2017

alexcjohnson commented Dec 12, 2017

etpinard commented Dec 12, 2017

chriddyp commented Dec 12, 2017 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

alexcjohnson commented Jan 16, 2018

Choose a reason for hiding this comment

alexcjohnson commented Jan 16, 2018

Choose a reason for hiding this comment

alexcjohnson commented Jan 16, 2018

etpinard commented Jan 16, 2018

etpinard commented Jan 16, 2018

chriddyp commented Dec 12, 2017 •

edited

Loading