Overlapping bins in the HTML visualization.

[fferegrino]

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:

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

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

kepler-mapper/kmapper/static/kmapper.js

Lines 187 to 202 in ece5d47

	function set_histogram(selection, data){
	selection.selectAll('.bin')
	.data(data)
	.join(
	enter => enter.append('div')
	.attr('class', 'bin')
	.call(enter => enter.append('div')
	.text(d => d.perc + '%'))
	,
	update => update
	.call(update => update.select('div')
	.text(d => d.perc + '%'))
	)
	.style('height', (d) => (d.height || 1) + 'px')
	.style('background', (d) => d.color);
	}

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.