Animated graphs

I didn’t think this through yet, but currently all graphs are made in such a way that they could be printed, if you wanted to. However many (if not all by now) people view the data from a screen. This would open up the possibility of animated graphs.
That might sound strange at first, but take for example the wind speed and direction. Currently the direction is shown as a little arrow and the strength as a graph. I’ve seen other graphs in other software where the direction is plotted as a graph, but then values wrap around from 360 to 0, and the graph looks odd when this happens.

Imagine instead some flow where points move in some direction to indicate the wind direction. This flow direction could change, so on the left hand side of the graph (some time earlier) the points are flowing in one direction, and on the right hand side (current time) the points are flowing in another direction.

I’m not saying this is better, I’m just trying to think a little bit out of the box, away from static graphs. Including animation gives an opportunity to display more info in the same space or represent data in a different way. Perhaps you guys can come up with even better suggestions or we could toss this idea out of the window, right now.

Rain rate could be shown like this as well. eg. on the left side a lot of rain (some time ago) and on the right hand side just a little animated rain (current time)

Note that I do prefer to keep the exact graphs as well. I’m just thinking aloud.

1 Like

@sunny :+1: , I do exactly this in my app:

image image

All graphs are “live”. They get updated when data is received from WF.

For the linear graph, old data is on the left with new data on the right.

On the PolarWind graph, the old data is in the middle with the latest at the outside, showing speed and direction over time. User-selected time frame of 1, 3 or 6 hours.

Going to be adding another PRO graph that will display the same data as the PolarWind graph but in a slightly different format.
–Sam

2 Likes

not quite what I meant with ‘animated graph’. Not there is anything wrong with your graphs, but those are graphs that get updated in real time. That’s not what I intended to express.

Maybe something more like the little arrows here that update as new data arrives?

Version 2.2.0
Now with wind direction arrows augmenting the wind speed graph. Arrows show where the wind is blowing FROM.

image

1 Like

also not what I mean, yours looks great too, but still it is only a graph that updates over time. I guess my brain burp is hard to explain. Even when no new data would come in, the visuals would be animated, they would need to be as otherwise you wouldn’t see how the particles were flowing (or something else). I’ll try to make a mockup.

My confusion is… without data coming in, how do you know how to animate the data points?

1 Like

You mean something like this ? https://www.highcharts.com/demo/dynamic-update

1 Like

So I made a mockup. instead of points this is with streak lines, with weak easterly winds at 12 PM, picking up speed and turning to south east at 2 pm.

(lets hope this community accepts animated gifs, bummer way too big 58 MB…lets compress it first and spend a bit more time…damn. still too big its only 4.4MB… more work…So there you have a by now totally fuzzy mock up. )
com-optimize(1)
If I would have used points you could still see what I intended, but streak lines work better.
Note that this is just an example of what I meant with animated graph. I’m not even saying it is better, but it is different and perhaps other people can come up with different examples

4 Likes

I think you mean a very localized version of this…
http://hint.fm/wind/index.html

It is not an animation of what happens in space but of what happens in time. Same streak lines, different concept. Your version shows immediately what happens in Boston, mine shows immediately what happened two hours ago.

1 Like

That’s a f**ing good idea!

1 Like

thanks, I had already more ideas, all different from the usual graphs. But first I’ll have to learn how to make an app to implement this in. and other ideas.

2 Likes