I have a large set (> 2000) of time series data that I would like to display using d3 in a browser. D3 works great for displaying a subset of data (~ 100 points) for the user, but I also need a “contextual” view ( like this one ) to show the entire data set and allow users to choose as a subregion for more detailed viewing.
However, the performance is terrible when trying to display this many points in d3. I believe that a good solution would be to select a sample of the data, and then use some interpolation (spline, polynomial, etc., This is the part that I know how to do) to draw a curve that is quite similar to the actual data.
However, it is not clear to me how I should choose a subset. The data (shown below) have rather flat areas where fewer samples are needed for decent interpolation and other regions, where the absolute derivative is high enough, where more frequent sampling is required.
To complicate matters even further, the data has gaps (when a sensor generates it, it crashes or goes out of range), and I would like to keep these gaps on the graph, rather than interpolating them. Finding spaces is pretty simple, but just cutting them out after the entire interpolated dataset seems like a smart solution.
I do this in JavaScript, but the solution is in any language or mathematical answer to the problem.

source
share