0

HI guys, I wonder if you can help me at all. I'm going to be involved in a "data visualization" project, meaning that I have to find a good way to visualize some data. What do you mean I hear you say? Well, we have some data and we have to make it look attractive (this data is a little interactive in that users will be able to interact with it, like drag and drop stuff etc).
I have absolutely zero experience with visualization and I'm looking around the net for ideas. So, I was just wondering if any of you has any experience in prettify data , visualizing it and presenting it to users. I have no idea what I can use to develop that, javascript for example, or prebuilt software or whatever else. I've found something interesting today. a library called Processing.js which seems promising but I have no idea, like it's not too clear at what level it supports users interaction and how easy it is (I quickly played around with it for about 10-15 minutes and it seems all right) hence my post.
Does anybody have any nice suggestion or even share his/her experience?
thanks

2
Contributors
5
Replies
44
Views
6 Months
Discussion Span
Last Post by pty
1

I'm not sure exactly what you'll be visualising, so it's difficult to suggest anything, but I'm sure that d3 will have you covered. It's immensely powerful and incredibly well-designed.

0

thanks, yes yesterday I wasn't sure either to be honest, that's why I've been so general. Now I know a bit more.
Basically, it's an animated and interactive application. It consists of an interactive and animated scale and depending on what you add on this scale it will lean on one side or the other, and it needs to do that with an animation.
So, to summarize: the scale will have two arms, one on the right and one on the left. Each arm will have some kind of scale, going from, say, 1 to 5 where 1 is the 'lightest' and 5 the 'heaviest'. Users can add things to the arms (I haven't figured out how I will visualize this action, perhaps they can add balls of different sizes with a number to indicate weight to one arm or the other of the scale or something along these lines) and visually we need to see which way the scale leans, left or right. Of course you can remove the balls or even slide them along the arm of the scale, and that will affect the side the scale is leaning to, again all this needs to be animated.
I'm playing around with D3 this morning, just to get a feel for what it can do.
I reckon it might be doable with Java FX too but to be honest I reckon I'd feel more at home with D3, if it is capable of doing such a thing. What do you reckon?

Edited by Violet_82

1

That's definitely possible in d3, but d3 is more for visualisation than interactive 'physics' stuff, which sounds like what you're after.

Perhaps something like matter-js would be more suitable.

Edited by pty

Votes + Comments
d3
0

Thanks for that. After a bit of thinking I realized that I can probably use Jquery to do the whole thing. I played around with D3 a bit and what you said is right, although I managed to knock off a simple scale it's more for graphs and things like that. I checked out the matter-js library too: it's quite nice what it can do, but on reflection I may not need that either. Essentially what I need is:
-drawing rectangles on a panel: easily dable in Jquery
-drag and drop functionalities: can be done in Jquery
-divide the above rectangle in two halves (let's call them arms) and have a rule on each half, going from 1-6. This rule has to be functional and because the idea is that users will be able to drag and drop weights or balls or whatever else on these arms (left and right) at specific points (like dropping something at point 2 and/or 3 etc) I need to know at which point the balls are attached to determine which side the arm needs to swing and how much
What do you reckon?

1

D3 isn't the correct choice for in this situation; it's aimed at visualisation (as per the request in the original post). If you want to interact with scales by dropping different-weighted balls on them in anything but the simplest of interfaces, you need a physics engine. Matter-JS provides this and makes it really simple to get fantastic results.

Edited by pty

Votes + Comments
Wow! matter.js is cool :)
This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.