$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 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
      })
    

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