One of the best ways to develop intuition in mathematics is to look at pictures. We often use graphs – visual representations of functions – showing the relationship between the domain of a function and the range of a function. With real-valued functions of one variable this is easy: the graph is nice and flat. What about complex-valued functions? What kind of pictures would help?
Recall that a complex number may be represented by a pair of real numbers. As such, representing a set of complex numbers – a region – is straightforward: an Argand diagram does the job just great. (Think of a Cartesian plane, and label the x-axis “real” and the y-axis “imaginary”.) Usually we just call this the z-plane, and the plane to which we map – the range – we call the w-plane.
What about a function though? The obvious visualisation is a bit hard: since visually representing a complex number requires two numbers, we’d need to use four dimensions to visual a complex function of one variable. Sadly, I left my 4-dimensional graph paper in my other bag.
Several other possibilities spring to mind: split the mapped values into their real and imaginary components and draw each separately. Since we now only have three dimensions left (the domain’s two, and one for the range), things are a bit easier. Typically we map the third dimension to a colour, giving something like a contour map. MathWorld is filled with examples.
It’s also easy to show how the shape of some region changes. Define a region in the z-plane – a disk, say – and draw in the w-plane the boundary of the region. And we can take it a step further: we can draw the mutations of a grid of lines. Right, enough maths. Let’s draw!
The basic idea in d3 is simple: you have some data in an array, you have a selection of nodes in an array, and you want to map the one onto the other. Today, we’re going to use SVG
path elements – polylines – to keep things nice and simple. It has a nice jQuery-like API permitting concise descriptions of things we want to add to the DOM. First, our play area:
Next, let’s make some data. We want some lines forming a grid, and those lines will be polylines with a large number of points on the lines. (Pretty pictures need lots of points for nice smooth curves.)
We map the data onto the SVG elements. Now we don’t have any SVG elements at the moment. That’s OK. Thanks to
enter(), we can create any missing
path elements, one per item in our data in the
arr array, after we’ve bound our data to the selection of nodes.
But how do we actually display the data? d3′s scales map our domains – two continuous ranges of values from -2 to 2 – to our ranges – 300 pixel long sides:
is a convenience factory for making the polylines. The
y functions define how to calculate the mapped data: given a complex number
d we map the real portion of that number onto the horizontal position of a polyline point, and similarly for the imaginary portion of that number. Note the y scale’s range: inverted to show the mathematically proper position of the origin instead of SVG’s standard (top left).
When we press the “Go” button, we fire off a click event:
And lastly, refreshing our view is trivial:
In short, d3 is a neat, powerful tool for visualising data. It’s highly extensible, well-supported, and can do pretty much anything you might want to out of the box, from bullet charts to Voronoi diagrams.