Skip to main content

Implicit plots in ASVG via Interval Arithmetic, D3 and Function Plot

Background

An implicit function is one which has variables (often x and y) "mixed together", something like:

f(x, y) = y2 + 2 sin(x2y2 ) + 6x2 − 5y ,

as opposed to explicit functions where we usually express y in terms of x only, something like:

y = f(x) = 4 sin(x2 ).

When we try to plot implicit functions using computers, there are many challenges since there is often more than one value of y for each value of x, and joining the points all in the correct order can be problematic, not to mention the need to cater for the many discontinuities that often arise.

One solution - Interval Arithmetic

Function Plot by Mauricio Poppe is an interesting javascript library that sits on top of D3, a library for data visualization.

To address some of the issues involved in plotting implicit functions (as well as solving many explicit function plot challenges), Function Plot uses a technique called Interval Arithmetic, which ensures each pixel in a vertical interval is catered for using variable-width intervals, as opposed to most graphing approaches that have fixed-width intervals.

Employing the technique within ASCIIsvg

I mostly use my own modifications of ASCIIsvg, a javascript library that creates SVGs (see a demo here: ASCIIsvg-IM.js Demo and Syntax).

The implict function examples below incorporate Poppe's interval arithmetic approach into ASCIIsvg.

Choose function:

Graph of

More examples

See this library in action in Differentiation of Implicit Functions.

Improvements

The implementation on this page still makes use of D3 and most of the Function Plot library. I feel it should not rely on D3 at all, and most of Function Plot is not relevant. I'll continue to try to reduce the network and processing payload.

Search IntMath, blog and Forum

Search IntMath