$f(x)$ - Function Plot

Function Plot is a plotting library built on top of D3.js used to render functions with little configuration (think of it as a clone of Google's plotting utility: $y = x ^ 2$)

The library currently supports interactive line charts and scatterplots, whenever the graph scale is modified the function is evaluated again with the new bounds, result: infinite graphs!

Function Plot unlike other plotters that use $n$-equally spaced points joined by line segments uses interval-arithmetic to correctly determine sections of the screen that need to be plotted with a few samples

Most naive plotters will have problems plotting functions that oscillate too rapid, for example $f(x) = sin(e^x)$ oscillates rapidly when $x > 5$, no matter how many times the function is evaluated we will never be able to render this function correctly

Function Plot will instead evaluate the function using interval-arithmetic math which means that when a rectangle whose $x$ bounds are $[x_i, x_{i + 1}]$ appears on the screen it's ensured that it contains all the possible $f(\xi)$ for $\xi \in [x_i, x_{i+1}]$, the result: pixel perfect representation of curves

      npm i function-plot
    

      import functionPlot from 'function-plot'
      functionPlot({
        // ..options below
      })
    

The old way:

      <script src="https://unpkg.com/function-plot/dist/function-plot.js"></script>
    

Check out the docs generated with TypeDocs API Docs

Check additional examples in this ObservableHQ Notebook!

And also in my blog!

• Derivatives
• Integrals