Performance issue ?

[ericemc3]

I ran a few simple display tests with bertin.js:

• 1 department by municipality
• 1 region by municipality
• France by municipality

I am surprised with the measures, maybe it is my PC, up to 2 mn, although pure D3 coding does not exceed 7 s.

Projection has for sure a significant impact.

https://observablehq.com/@ericmauviere/hello_bertin1

[neocarto]

Thanks Eric for these very useful tests. I'm not sure how to identify what explains these differences in calculation time. Don't hesitate to contribute to the project if you have solutions. Otherwise, you should know that it is also possible to combine Bertin layers with other d3.js stuffs. This can be a solution when the number of geographic units to display is high. Anyway, I will try to investigate... https://observablehq.com/@neocartocnrs/bertin-js-how-to-combine-bertin-layers-with-other-d3-js-stuff?collection=@neocartocnrs/bertin

[ericemc3]

My pleasure.

I first suspect the clippath defined at the top of the svg and applied to all geographical entities to be responsible for that exponential degradation.

[neocarto]

So apparently, the problem comes actually from the clip path. Well done. So I think I'll apply the clip-path to the layer (and not each features) and probably make it optional. I'll try to do something asap. Thank you. Also, feel free to contribute to this project and/or suggest improvements and/or new features.

[ericemc3]

Great, thanks, i'll rerun some tests after your update.
I also gathered some useful perf tricks (at least for me) in that Observable collection:
fast tooltips, fast canvas rendering...

[neocarto]

The clip-path is now optional and false by default. To add it, set the option clip = true in the general params of the map.

[ericemc3]

Thanks for the quick adjustment, spectacular effect!

Other quick display perf tricks: avoid adding repetitive attributes for each object.
So attributes such as:
.attr("fill", '#f7da48')
.attr("stroke", '#6eb5e0')
.attr('strokeWidth', '0.5')

can simply be assigned to the parent , once, provided that, of course they are constant for all objects in the layer.

[neocarto]

I prefer to not changes theses attributes, because within bertin.js, you can replace a static value such as '#f7da48' by an object to make a choropleth map. So, theses parameters must be applied to each features.