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.
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:
- 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…