In my last post I mentioned that Dex 0.6 will be capable of producing three dimensional charts and graphs. At least a couple right now. This is overkill for normal purposes such as viewing Bob’s sales figures versus that of Alice over the past 4 fiscal quarters. However, sometimes the data is massive and we first need to get some sort of structural understanding before we can divide and conquer an understanding of it’s components.

One such visualization that I am thinking of is come’s straight out of Mr. doob’s example set: canvas_lines_sphere. Needing some sort of simpler way to refer to this, I simply call it the porcupine chart.

## Porcupine Charting In Dex

First, we need some data. In these examples I will simply create some via mathematics.

The following diagram was created with the code:

Random rand = new Random() header = [ "x", "y", "z", "a" ] data = [] (1..2000).each { data << [ rand.nextDouble() * 100 - 50, rand.nextDouble() * 100 - 50, rand.nextDouble() * 100 - 50, rand.nextDouble() * 100 - 50 ] }

Click on the images to go to a live version of the image.

That’s 4×2000 or 8000 data points visualized and interactive.

A small change in the code gives us randoms which vary from -50 to 50:

Random rand = new Random() header = [ "x", "y", "z", "a" ] data = [] (1..2000).each { data << [ rand.nextDouble() * 100, rand.nextDouble() * 100, rand.nextDouble() * 100, rand.nextDouble() * 100 ] }

Which is visually:

Let’s graph something more interesting and more mysterious:

header = [ "X", "SIN(X)", "COS(X)", "SIN(X)" ] def amp = 180.0 (-720..720).each { data << [ it, Math.sin(Math.toRadians(it))* amp, Math.cos(Math.toRadians(it)) * amp, Math.tan(Math.toRadians(it))* amp ] }

Which looks visually as:

## Conclusion

Now please understand, I am not near done with this visualization nor it’s configuration within Dex. I envision controls for color, extrusion, spherical axis, controls for opacity, zoom, rotate and pan controls. But, first lets walk before we run, and this represents our first few steps towards 3D charting in Dex.

Last, but certainly not least, WebGL allows me to do really tacky things like this: