Dynamic dataviz with SVG and CSV - almost solved ;)


(kerguelen) #1

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)


(Hans-Gerd Claßen) #2

Dataviz_vers01.hype.zip (16.2 KB)

more dirty or more quick¿ guess both :wink:


(kerguelen) #3

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 ?


(Hans-Gerd Claßen) #4

loop thru elements and set there properties (e.g. oppacity) to the default before setting the active property

run timelines depending on resulting data or set width of rectangle on resulting data


(kerguelen) #5

Hum, if I can better understand, reproduce and adapt code, I’m not yet able to make my own.
Thanks for the tip anyway


(Hans-Gerd Claßen) #6

it’s quite easy, i’ll have a look later on … maybe somebody else helps you in the meantime


(kerguelen) #7

Actually, I just managed to change the rectangle size following your instructions :smile:
Reseting opacity is yet a bit tricky to me.


(Hans-Gerd Claßen) #8

Dataviz_vers02.hype.zip (16.2 KB)

this can heavily be improved :slight_smile: but should work …


(kerguelen) #9

Well, it works indeed perfectly well !
Viele Danke, mein Herr


(kerguelen) #10

Hans, I may ask a lot but can we imagine animating numbers from a value to the next and see the bar changing size from one value to the next ?


(kerguelen) #11

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.

Dataviz_vers02 - copie.hype.zip (95.6 KB)


(Hans-Gerd Claßen) #12

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 :slight_smile:


(kerguelen) #13

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 !


(kerguelen) #14

Hi Hans Gerd,
I guess I got it :slight_smile: 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.

Dataviz_vers02 - copie.hype.zip (95.4 KB)