score:0

There are a few approaches you could use:

1. Using the opacity the way it is

1.1. Keep `fillOpacity`, but vary the `# of elements`:

• Keeping the `fillOpacity: 0.01`:

• How many elements it is necessary to get a resultant `0.99` opacity?

``````function calculateTimes(opacity, overlappingOpacity) {
var times = 1;
var currentOpacity = opacity;
while (currentOpacity < overlappingOpacity) {
currentOpacity += (1 - currentOpacity) * opacity;
times++;
}
return times;
}
calculateTimes(0.01, 0.99); //Gives you 459 elements
``````

Fiddle for `459` elements

1.2. Keep the `# of elements`, but vary `fillOpacity`

• Keeping the 100 elements:

• How much should `fillOpacity` be set to get a resultant `0.99` opacity?

``````function calculateOverlappedOpacity(opacity, times) {
return times == 1 ? opacity : opacity + (1 - opacity) * calculateOverlappedOpacity(opacity, times - 1);
}

function calculateOpacityFor(resultantOpacity, times) {
for (var i = 0.0001; i <= 1; i += 0.0001) {
if (calculateOverlappedOpacity(i, times) >= resultantOpacity) {
return i;
}
}
return 1;
}
calculateOpacityFor(0.99, 100) //Gives you a fillOpacity of 0.0451
``````

Fiddle for `fillOpacity: 0.0451`

2. Using the opacity the way you thought it worked

• Use 1 element set with a desired `fillOpacity` based on the element quantity:

• How much should the resultant opacity be (based on the quantity of elements)?

``````0.01 * chartData.length
``````

Fiddle for a simulation of the expected opacity algorithm