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

bubble chart padding #998

Open
gordonwoodhull opened this issue Aug 26, 2015 · 6 comments
Open

bubble chart padding #998

gordonwoodhull opened this issue Aug 26, 2015 · 6 comments

Comments

@gordonwoodhull
Copy link
Contributor

bubble padding is even more of an issue than scatter plot padding #440 because of the variable size of bubbles

image

It can be managed manually with xAxisPadding and yAxisPadding but that's a lot of futzing.

@gordonwoodhull
Copy link
Contributor Author

And padding doesn't work very well because it adds the same amount to same to both sides.

Here, adding an absurd x padding of 50 and y padding of 400:

image

@gordonwoodhull gordonwoodhull added this to the v2.1 milestone Oct 6, 2015
@gordonwoodhull
Copy link
Contributor Author

Should be calculated for each side independently. It can be put under a flag to make it backward compatible.

@gordonwoodhull gordonwoodhull modified the milestones: v2.0, v2.1 Oct 6, 2015
@tttp
Copy link
Contributor

tttp commented May 3, 2016

Hi,

I've been experimenting with AxixPadding, and it isn't ideal, mostly because I end up having ticks that are under 0, when you display a number of observation, a negative number is confusing.

A better solution I've found is to remove the clip-path, so the bubbles are drawn under the axis, and works fine IMO.
bubbly

@tttp
Copy link
Contributor

tttp commented May 3, 2016

Is there any reason for the clip-path? if it's a workaround only for me, I can set a post render and remove the clip-path on chart-body

      dc.bubbleChart('#bubbly') 
      .on('renderlet', function(chart, filter){
        chart.svg().select(".chart-body").attr("clip-path",null);
      })
      ...

@gordonwoodhull
Copy link
Contributor Author

That's a decent workaround for your case. We should consider making the clip path optional. I think it mainly exists to allow zooming of line and bar charts (#108) but zooming of bubble charts is also possible.

I don't think eliminating the clip path is enough in all cases. If bubbles are really big they will still leave the chart area.

@tttp
Copy link
Contributor

tttp commented May 5, 2016

It takes 3 lines with renderlet and no (visible) impact to add then remove clip-path. Not sure it's worthwhile adding an option to make the clip path optional.

I've documented the workaround on SO, I'd say it's good enough ;)

http://stackoverflow.com/questions/37042901/how-to-avoid-truncated-bubbles-when-elasticx-or-elasticy/37042902#37042902

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

2 participants