Visual.Koran.Center

[husayt]

Hi, thank you for the fantastic work. While exploring various charting libraries available for Vue, we conducted a data visualization experiment and among others integrated Vue-Data-Ui word cloud, sparkline, heatmap, and treemap components into visual.koran.center. These tools significantly enhanced our visualization capabilities, as demonstrated on one of our pages.

PS. All was great, one feedback would be was that wordcloud struggles with even 100 words, so I had to limit it to 25.

[graphieros]

@husayt

Thanks so much for your feedback!

The word cloud looks amazing.
I can recommend wrapping the component inside a Suspense component, to manage the waiting state with a loader.

Awesome job on your dataviz experiment, it's very clean:)

Cheers

[husayt]

i used v. 2.10.2-beta.0 and now it takes 25s to switch from one dataset to the other.

[graphieros]

But it looks fast when switching to

Is there a special treatment for the first and second options ?

[husayt]

what you say is very interesting. When in ayah count mode, values range from 5 to 290, whereas in other modes value is from 1 to 114. Is slow down caused by small numbers?

I just deployed the latest version using 2.10.2-beta.0 and it is indeed very fast for Ayah mode

[graphieros]

I tried using a wide range locally and got zero diff in performance.
Is this the only difference between datasets ?
Could you try using a hardcoded dataset for the ayah count to see if the speed is the same ?

Edit: I answered too quickly, there might be an impact in the perf of the placement algo when the difference between min and max is big. I'm investigating. A solution would be to clamp font sizes under a certain threshold

[graphieros]

Try setting a lower value to config.style.chart.words.maxFontSize (to 64 or 50)
Basically having a big max font size makes finding placement for small words take more attempts, which is not ideal for large datasets. A sweet spot needs to be found with the config to balance the font size vs dataset length. The default maxFontSize is set to 100, which is quite big.

I can't really do much more than that right now, sorry.

You can upgrade to 2.10.2:

• slight performance improvement (but you'll have to tweak max font size when using a large dataset, or reduce the number of words to show)
• improvements for word selection on hover

Also using Suspense with a loader is better than blocking the main thread;)