DexCharts : D3JS and ThreeJS / WebGL Interaction

So tonight, I started taking a look at what integration of the DexCharts reuse pattern with WebGL via ThreeJS and D3JS.

So far, so good…

Integration was relatively simple to accomplish.  I was surprised that there were no real surprises and I am even more excited about the possibilities than previously.  I am a relatively new to modern web technologies and WebGL is one of the more daunting amongst them.

Here is a demonstration of Parallel Coordinates implemented as a reusable D3JS chart playing nicely with a WebGL based 3D scatterplot implemented in ThreeJS.  There are some rough edges in the scatterplot visualization, but I’ll get them worked out in due time.

The important aspect is the interaction.  Here are a couple of demos, click on the image to go to the live version.

image

image

The Code

I still need to hide the shader complexity, but overall it’s pretty straight forward.  The reusability pattern held true.   There were no changes in the pattern required to support this type of visualization.

I’ll skip the shader stuff and focus on the reusable code.  Consider it boilerplate.

Here it is:

image

  • Lines 115-120 set up our svg parent object for the parallel coordinate view.
  • Line 122 sets up the parent object for the WebGL visual.
  • Line 124-134 sets up a CSV datasource 6×500 with random values ranging from –50 to 50.
  • Line 136-145 creates our parallel coordinates chart.
  • Line 147-153 creates the scatterplot.
  • Line 155-159 we set up a listener to replace the scatterplot with a new one composed of only the selected/brushed data from the parallel coordinate view.  This is kind of cheating, but a corner I am willing to cut for now.  Ideally, we would adhere to the principle of object constancy and update only the data displaying a transition between previous and current state.  Here I am saying “BAM! Here’s a new chart.”  This is good enough for now.
  • Line 161-162 render the charts.

And that’s all there is to that.  Surprisingly painless…

Advertisements

About patmartin

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

6 Responses to DexCharts : D3JS and ThreeJS / WebGL Interaction

  1. Pingback: DexCharts : D3JS and ThreeJS / WebGL Interaction | Dex | HTML5 Games - Free Online HTML5 GamesHTML5 Games - Free Online HTML5 Games

  2. robertoprevato says:

    Thanks for the article! It’s really interesting. Unfortunately the links to live examples are broken, but I got your point.

  3. Pingback: First step in JavaScript & D3.js | Hobbies and Beyond

  4. krishna says:

    Hi dex, i went to your site http://dexjs.net/ its really cool 🙂 i was looking for webgl sample. I didnot find from examples download as specified here.
    thank you,

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