Overlapping bins in the HTML visualization.

Description There is overlap in the member distribution histogram when the number of visualized bins is greater than 10.

To Reproduce

import kmapper as km
from sklearn import datasets
data, labels = datasets.make_circles(n_samples=5000, noise=0.03, factor=0.3)

mapper = km.KeplerMapper(verbose=1)

projected_data = mapper.fit_transform(data, projection=[0,1]) # X-Y axis

graph = mapper.map(projected_data, data, cover=km.Cover(n_cubes=10))

NBINS = 20

mapper.visualize(graph, path_html="make_circles_keplermapper_output_5.html",
                 nbins = NBINS,
                 title="make_circles(n_samples=5000, noise=0.03, factor=0.3)")

With keppler-mapper version 2.0.1.

Expected behavior It would be great if all the histogram bars would adjust their size to accommodate all the desired bins.

Screenshots

The above code generates the following:

Overflowing bins

But I have some internal code that generates this, where the overlap is more evident:

More evident overlap

Additional context I was digging around and found that the code that generates the histogram is in the function set_histogram

https://github.com/scikit-tda/kepler-mapper/blob/ece5d47f7d65654c588431dd2275197502740066/kmapper/static/kmapper.js#L187-L202

I was thinking it would be possible to modify the width of the bars (just like the height is), however I can't find a clean way to get the parent's width.

I am happy to open a PR with my current, not-so-great solution, but I was wondering if you had any guidance on how to do that.

scikit-tda / kepler-mapper

Overlapping bins in the HTML visualization. #251