Hello,
I’m working on a project involving dataviz on map and was wondering if something simple could be made with this. I know there are libraries but they may become obsolete with time and, if possible, I wish not to rely on them too much.
Here is the thing :
The example comes with one SVG including two objects : Rectangle and Circle
It also includes a CSV defining 3 properties for each object : Name, Rank and Percent
Hype document embeds the SVG, two text boxes for the Name and Rank values and a box acting as a visual materialization of the Percent value (the longer the bar, the highest the value).
How can I connect all these elements to make values change when I click Rectangle or Circle ?
Thanks for your help !!
The following includes the Hype and the CSV files : TestDataviz.zip (19.6 KB)
Oh, well, Hans Gerd, that is most impressive !!! Thanks so much !
About the % part, how can I change the bar size according to the % value ?
And how can opacity be restored when you click another target ?
OK, I managed to do this, adding some number animation with this library : http://aishek.github.io/jquery-animateNumber/
It works well with Rank that animates from 0 to number but is very erratic with Percent that is supposed to be animated from previous to new value.
hi,
so you’ve got the rank done. just the animation of the percent missing. as you’ve already involved jQuery it’ll the easiest way to animate its width using jquery animate. ask if you run into problems with this
Hi,
Actually, I managed to have the percent animation run from the previous value to the next one. Rank goes only from 0 to current value. I don’t know why, but when I use the same method as for Percent, it doesn’t work. I suspect some sort of conflict, same instruction used for both that shortcuts the command.
I’ll have a look at Animate. Thanks !
Hi Hans Gerd,
I guess I got it Everything seems to be working (I added comments on the document to help who may need this for his work).
Everything but one thing, BTW : I can’t use twice in the same document the method used to animate number from previous value to current value. It works for Percent but not for Rank at the same time. I suspect some sort of conflict, same instruction used for both that shortcuts the command.