Simplifying a line before rendering on chart in d3 - javascript

I am trying to plot data collected live from bee hives. We plan to collect data every 5 minutes, so in a year there will be on the order of 100,000 data points. I want to set up a chart to plot the data, and have new data enter the chart everytime the database changes (using Meteor).
I have a simple mockup at datacomb.meteor.com These charts were made using dc.js, a d3 wrapper.
Is there a way to use the topojson.simplify (http://bost.ocks.org/mike/simplify/) functionality to pre-process the lines and reduce the number of points rendered? Has a more general simplification method been integrated into d3?

Have you looked at Simplify.js? It does exactly this.

Related

Updating Flot displayed data

I'm using Flot with jQuery to display a graph. I want to update some information on the graph and then re-plot it. I can see that I can use plot.getOptions().yaxes[0].max for example to update the y-axis max value and have got that to work but I'm using a plugin to add side notes to the graph.
I've used getOptions again to update the side notes data and can read the side notes' data, but can't see how I can get the side notes displayed data to update without completely re-plotting the graph.
Any suggestions?
Since you have to redraw anyway, generating a new plot with the new options is the simplest solution. You do not gain much by trying to optimize it (unless you want to redraw every second).

Market Depth chart using react-stockchart?

Is it somehow possible to make depth chart as in the following image using react-stockchart library.
Any suggestions is welcome even if it is achievable by using any other charting library in react. This chart is using step area chart. But solution or idea using area chart would also be great.
Image Reference: https://www.gdax.com/trade/BTC-USD
Solution to this is multi series area chart. Here one series of data is related to sell orders and another series of data is related to buy orders(eg. the green chart resembles the data related to buy order and the red chart resembles the data related to sell orders.). In case they overlap the orders should be matched and executed.

Add new data to d3js area chart

I used this tutorial to display an yahoo chart with d3js http://bl.ocks.org/ColinEberhardt/c806028e47281b8dbb1d
now i would like to make it as Real Time chart,and i would like some help to add data every 10 seconds for example.
Thanks
PS : I am using d3js and d3fc, and i don't use path

d3 transition between time groupings

I can't seem to find a simple example where a chart can easily bounce between time grouping levels. Say I have daily data, and I want the ability to display this data on a chart at different levels of aggregation (daily, weekly, monthly).
Is there a good way to do this with D3 without a lot of processing (removing all rects, and replacing with new rects grouped at a different level)?
d3 has a general update pattern that you should use for this case.
The convention is to have two functions, one to setup the visualization, and another to take data and update the visualization.
The update function takes in the new data, binds it, updates existing svg's (rects in your case) and then adds or removes objects as necessary.
Mike Bostock has a great 3 part series explaining this which you can find here: https://twitter.com/mbostock/status/252496768267333632
Since it's time series data, have you considered a line/area chart with brushing? You could add UI components to dynamically set the brush filter to certain date ranges.

Is there a Javascript chart API with date object (labeling) support?

Does anybody know of a Javascript chart API that will handle scaling and labeling for date values on both axes? It looks like I'll have to do manual client-side calculations for labels if I want to use Google Chart API.
My data set is potentially sparse in the dates on either axis, so intelligent labeling calculations would save me a bunch of hassle. Thanks in advance!
You may wish to look into flot for a JavaScript chart API. (I do not know if it will handle your specific labeling issue.)
Take a look at Google Chart API. I've never used it but I've seen people use it. According to the examples in the docs, you can put date labels on the axes.

Categories

Resources