# $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

Playground

Installation & API

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

Examples

Check additional examples in this ObservableHQ Notebook!

And also in my blog!

Recipes