3D chart by D3.js and Blender, via SVG

D3.js is data visualization library of Javascript which enable us to visualize data with svg element.
On the other hand, Blender is an open source 3D computer graphics application.

For 3D data visualization, there are some ways to do it.
D3 is data oriented, Blender is 3D oriented.  Both of these need a buddy tool as their side to compensate the weak spot.
D3 is a browser-side library, so D3 can be in conjunction with a browser 3D library like three.js.
Blender can also be used with data through importing data files like CSV.

But both of way have advantages and disadvantages.
D3 is great for data binding to visual element. However, browser is limited to render realistic materials.
Blender can show photo-realistic image. But data binding functionality seems immature.

To make data visualization picture with nice-looking 3D, you can reconcile the both with SVG file. I mean, After create svg file by D3, you can import svg into blender to use it as 3D object.

 

The actual process is that:

  1. Make a chart by D3 as usual on Chrome browser.
  2. using Chrome bookmarklet SVG Crowbar, save the svg file from the chart. (Due to Chrome’s cross origin policy, you must not in localhost when you use external data to load into javascript file. Otherwise, the chrome denies access the data. To avoid that, you should upload the D3’s html file to online. And visit the page before save svg).
  3. Import the svg file into Blender by File > import > svg.
  4. The svg elements are converted into curves automatically. You can do anything to the curves as usual.

 


 

To test it, I made two projects:

The svg image created by D3 is below.

numeral_column_line

 

The imported svg in Blender was turned into curves. You can use the curve as a motion path, a line object, or modeling template.
Unfortunately, the words on the chart were vanished. If you want a legend and numbers of axes, you should make them manually.

D3_svg_blender_linechart_underthehood

 

I use the curves for the line and the motion path of the sphere. For 3D effect, I moved the mounting curves back and forth. You can look down on the 3D chart. in the video.

 


 

Along the same line, I made a 3D tree diagram. First of all, I displayed the tree on the browser and saved the svg file.

tree

Then I imported it into Blender.
The transcendental tree came along. It looks a ghost haunting in a old house. It has lymphs on its joints.

3dchart2_tree1

 

The branches rotate around the their parent node.

D3_svg_blender_tree_underthehood

 

Finally you can see the resulting video. The roots of the tree can actually take root in the ground.

It’s just a beginning. I already made a 3D world map with light.
I think the sales point of 3D data visualization is material and light. The two element are the thing that ordinal data visualization can not wear on its visual component.

 

EDIT:
The 3D worldmap

3dchart3_worldmap2_emission4

You can download the blend file from Worldmap Separated by Country | Blend Swap.

One Comment
  1. Pingback: 3D Data visualization with D3.js and Blender | BlenderNation

Leave a Reply