The Porcupine Chart

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.

Image

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.

Image

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:

Image

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:

Image

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:

Advertisements

About patmartin

I am a coder and Data Visualization/Machine Learning enthusiast.
This entry was posted in General and tagged , , . Bookmark the permalink.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s