Plotly.js: Option to prevent symbol truncation at ternary axis boundaries

Created on 15 Feb 2017  路  8Comments  路  Source: plotly/plotly.js

I have scoured the documentation but have been unable to find a way to prevent symbols from being truncated by axis boundaries. While you can avoid the problem by extending the boundaries beyond what you would normally use for the 'scatter' plot type (to slightly below zero for instance for cases where zero is the minimum data value), this is not a possibility with the 'scatterternary' type, at least for cases where points lie on an axis or apex.

To see the impact of the symbol truncation consider the plot below left where points at the apices are almost invisible and those in the middle of the axes also are quite small. This display is problematic because the center point has much greater visual heft compared to the remaining points, particularly compared to those on the apices. The preferred plotting approach is depicted on the right where each point has an equal visual weight irrespective of its position on the plot.

image

feature

Most helpful comment

Hi 脡tienne. Thanks for the question. The marker points near the axis boundaries should go on top of the axis line and tick labels. My rationale is that this seems to be more consistent with the objective of ensuring that they have visual weights that are equivalent to their counterparts near the center of the plot region.

All 8 comments

Thanks for pointing this out.

My pleasure! I appreciate your taking the time to consider the issue.

What do you think about the idea of having a boolean attribute to provide the desired behavior? The default value could be _true_ to be consistent with the current implementation but _false_ would produce a plot analogous to the "desired display" example above.

In most cases my guess is that you would either want no truncation of markers at the axes at all on the plot or to have the plot behave as it does now so this attribute could be defined at the top level of layout (_markeraxistrunctate_?). I suppose, however, that having the ability to define this attribute on the axis (_markertruncate_?) or the trace marker (_axistruncate_?) levels would allow for finer-grained control at the expense of a more verbose configuration.

Quick question: should the marker point be placed above the axis tick labels?

image

Or should they be placed in-between the axis bounding line and tick labels?

image

Hi 脡tienne. Thanks for the question. The marker points near the axis boundaries should go on top of the axis line and tick labels. My rationale is that this seems to be more consistent with the objective of ensuring that they have visual weights that are equivalent to their counterparts near the center of the plot region.

I've made some solid progress on this ticket this week. You can track my WIP branch here:

https://github.com/plotly/plotly.js/compare/cliponaxis-false

At this stage,

  • I named the attribute cliponaxis. This attribute will be available from scatter and scatterternary trace and eventually for scattergeo as well.
  • By default, cliponaxis is set to true (the current behavior)
  • When turned on, markers, elements won't be clipped (new behavior)
  • I'm thinking that also text and errorbars could benefit from cliponaxis: false

Quick question: how should we determine if a non-clipped marker is visible or not? Intuitively, markers that have x or/and y strictly beyond the set axis range should be removed. But, should we include the marker size in this calculation? That is,

  • Should all markers that _touch_ the axis bounds be visible?
  • Or, should all markers that are centered on the axis bounds be visible?

Great to see that you've made such good progress 脡tienne! The cliponaxis attribute sounds perfect and I agree that it would be great if it also applied to text and errorbars.

Regarding your question, if a marker point has a value that puts it outside of the axis range (i.e., its center is outside of the plot range) it should be removed irrespective of the symbol size. As you say, points that sit exactly on an axis, however, should be visible.

Regarding your question, if a marker point has a value that puts it outside of the axis range (i.e., its center is outside of the plot range) it should be removed irrespective of the symbol size. As you say, points that sit exactly on an axis, however, should be visible.

Thanks very much for the prompt response :+1:

After some thoughts, maybe implementing cliponaxis: false for error bars isn't such a great idea.

Error bars positions are set in data coordinates unlike marker symbols and text size (which are set in pixel coordinates).

Furthermore, in matplotlib's clip_on=False option undoes marker points axis clips, but still clips error bars - see https://gist.github.com/etpinard/9167c1c69144e318ca2aa39539ec5091

cc @alexcjohnson

Was this page helpful?
0 / 5 - 0 ratings

Related issues

HunterMcGushion picture HunterMcGushion  路  3Comments

emanuelsetitinger picture emanuelsetitinger  路  3Comments

jonmmease picture jonmmease  路  3Comments

pynklu picture pynklu  路  3Comments

maxwell8888 picture maxwell8888  路  3Comments