Here is a real-time solution to the double pendulum problem using Plotly.
http://plot.ly/~streaming-demos/4/
everyone sees the same data at the same time, this is not an animation.
@Floby
Thanks! We do use aggregation in the case of 1D and 2D histograms but in
all of our other plot types the underlying data represents the rendered
plot objects in an obvious mapping.
For timeseries data that “flows” by, stream newline separated stringified
json with scalar values like ‘{x:1,y:2}\n’. Internally, Plotly Plots are
just cartesian coordinate renderings of x and y arrays. So when we get
incoming scalar x and y values from a stream we append them to the end of
the arrays internal x and y arrays, pop off the head element if
array.length > maxpoints and call our plotting routine. So you are
basically streaming to a queue system and we re-render it every ~50ms.
(Users can set their own maxpoints size, smaller maxpoints allows animation
like effects shown in the double pendulum example given above).
For the case of the dancing bar graphs <http://plot.ly/~streaming-demos/44/>,
or say in the case of a bubble chart where you want to change the location
and size of all the bubbles every iteration you would send arrays in each
JSON string. In this mode, you are completely redefining the state of the
system with each ‘data’ event. A bubble chart example might look like
‘{x:[1,2,3,4,5], y:[3,4,2,3,1], marker: { size: [3, 3, 3, 2, 2] }}\n’ which
would render 5 bubbles with the i’th bubble located at x[i], y[i] with
size size[i]. To move the bubble, the next data event might contain the
arrays ‘x:[1.1,2,3,4,5], y:[2.9,4,2,3,1], marker: {size: [3.1, 3, 3, 2,
1]}}\n’ which would move the first bubble slightly and increase its size
slightly. Getting a feel how much to move each object depends on how fast
you are streaming (we max out around 50ms and enforce this though with a
reasonable buffer).
So there are two modes, Scalar - where the data will ‘stream’ across the
plotly plot, and Array mode, where you define the total state of the system
on every iteration. The former works well for time-series data, the latter
works well for persistent objects with varying values such as bar graphs
and bubble charts.
I don’t know if this helps answer your question as I might have totally
misread it. Feel free to ask any other questions if there is any confusion.
Thanks!
s
On Friday, 28 March 2014 05:31:49 UTC-4, Floby wrote:
>
> this is some pretty impressive stuff !
>
> I assume the data you pipe to your plots are aggregated in some way (like
> bar charts, bubble charts, etc.)
> Are there any plans to have a streaming API consume these aggregates ?
> something like
>
> stream = plotly.stream('my_bubble_chart');
> stream.on('data', function (data) {
> // data is an object describing the current state of the bubbles
> data.chartType
> data.bubbles
> // etc.
> })
>
> On Thursday, 27 March 2014 15:21:13 UTC+1, Postlethwaite wrote:
>>
>> It depends on the size of the incoming JSON objects. For simple plots
>> like the one I linked to above it can be a very small amount of data.
>>
>> For example a stringified utf8 json object {x:1, y:3} results in a buffer
>> around ~18 bytes. I accept data packets every 50ms which would be 360 bytes
>> every second which is minimal. We are limiting to something closer to 22
>> kb/s, which means passing in JSON strings with fairly large arrays in them,
>> ~50 in length. This is useful for controlling things like bar charts or
>> manipulating many bubble chart bubbles with each packet.
>> See for example: http://plot.ly/~streaming-demos/44/
>>
>> If you want to verify the real-timeyness just open up two browser
>> windows. You'll see the exact same random data moving through at the same
>> time. It originates from a single source and is broadcast out.
>>
>>
>> On Thursday, 27 March 2014 09:16:20 UTC-4, Ket wrote:
>>>
>>> If this is real time data streaming, it is pretty fast. Impressive.
>>> Never see something working smoothly like this before.
>>>
>>> How much data in bytes do you send each time.
>>>
>>> On Tuesday, March 25, 2014 11:28:26 PM UTC+7, Postlethwaite wrote:
>>>>
>>>> We at Plotly have just released our Streaming API (our infrastructure
>>>> is 100% Nodejs) and are looking for feedback. Check out this
>>>> example<https://plot.ly/~streaming-demos/6/>to see what our realtime data
>>>> streaming looks like. As part of the release
>>>> we have released an early candidate module to consume it,
>>>> https://github.com/plotly/plotly-nodejs. You can do things like:
>>>>
>>>> myDataStream.pipe(Plotly)
>>>>
>>>>
>>>> which is how it should be.
>>>>
>>>> All of Plotlys graph types are supported through streaming. This means
>>>> you get live histograms, realtime 2D heatmaps, streaming to multiple
>>>> subplots for a DYI dashboard experience among much else. It's free and
>>>> will
>>>> remain so. You can easily embed real-time streaming plots in any website
>>>> by
>>>> burrowing the streaming URL in an iframe.
>>>>
>>>> Checkout out the module I linked to above to get up and going and feel
>>>> free to fire me any questions you might have. This is early days and
>>>> feedback and helpful criticism is greatly appreciated.
>>>>
>>>> Stream on!
>>>>
>>>> ben at plot.ly
>>>>
>>>>
--
--
Job Board: http://jobs.nodejs.org/
Posting guidelines:
https://github.com/joyent/node/wiki/Mailing-List-Posting-Guidelines
You received this message because you are subscribed to the Google
Groups "nodejs" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/nodejs?hl=en?hl=en
---
You received this message because you are subscribed to the Google Groups
"nodejs" group.
To unsubscribe from this group and stop receiving emails from it, send an email
to [email protected].
For more options, visit https://groups.google.com/d/optout.
