Mapping Bezier Curves from d3.js to Three.js

As part of incorporating three.js into a d3 viz, I wanted to be able to draw the nice smooth curves that d3 generates. It turns out that three.js has a CubicBezierCurve3 that matches nicely with the output of the d3.svg.diagonal function.

The short video below shows it in action - details are included further below.

Transitioning from 2D/svg in a D3 Viz to 3D in Three.js:
Mapping Bezier Curves

How to Map Bezier Curves from d3.js to Three.js

To map from the d3 2d world to the three.js world, we:

get the svg "d" attribute of the d3-generated path for the curve

from the "d" attribute, parse out the four points for the cubic Bezier function - here are two little (non-optimized!) helper functions to do that:

The purpose of this page is to summarize in one place some of the interactive visualizations I have worked on. Most of these were built...

"When you start on your journey to Ithaca, then pray that the road is long, full of adventure, full of knowledge... Always keep Ithaca fixed in your mind. To arrive there is your ultimate goal. But do not hurry the voyage at all." (from "Ithaca", by C. P. Cavafy)