Tuesday, March 03, 2009

Smooth curves in javascript: fast interpolation for large datasets

The other day I was thinking about generating some data for some blog posts. Since I needed to procrastinate first I started by looking for how to plot smooth curves and I couldn't find a good solution. So here's my solution.

It generates graphs that are doubly differentiable (function is continuous as are the first and second derivatives). There are two smoothing types: the first is a little more flowing while the second attempts to respect the initial data as local maximums maxima and minimums minima. It's also fast enough to generate smooth data perceptually instantaneously with thousands of points.

I can write about how the math works in a future post if people are interested. These methods should not be used for interpolation for those interested in data mining or analysis. There are many other good algorithms for those uses.

And this is what the plots look like. The actual plotting is done by flot. Note that the data is generated randomly every time the page has reloaded. So I probably haven't seen the graph that you are currently looking at.

Update: I added the singly differentiable versions of this data. Looks pretty much like my previous plots. The type 1 singly differentiable plot is essentially catmull-rom to my understanding.

Update 2: This has been updated and blogged about here. You can find new examples there.


Aaron Olson said...

I think you mean minima and maxima. :) Otherwise these look quite nice.

Julian Fitzell said...

You are digging that JS, aren't you? :)

steven said...

Thanks Aaron, I should know better. Yeah Julian, I'm really starting to love me some javascript.

Anonymous said...

Hello Steven! Thanks a lot for this! It's really useful! Awesome work!! Greetings from Argentina!

steven said...

I'm glad you found it useful. Feel free to let me know how it could be better in practice.