D3 in 3D

[Chris Viau]

Did you know d3 can be used to draw 3d SVG? I called this experiment "D33D". 

[Nelson Minar]

Neat! Looks like you have your own 3D library and are rendering as a single SVG path?

CSS also has some simple 3D support which you could manipulate via D3: http://www.webkit.org/blog/386/3d-transforms/

[Mike Bostock]

> Did you know d3 can be used to draw 3d SVG?

That's awesome d00d! You can take advantage of requestAnimationFrame
for ultra-smooth animation by replace setInterval with:

d3.timer(animateIt);

See https://github.com/mbostock/d3/wiki/Transitions#d3_timer for details.

Cheers
Mike

[Chris Viau]

With WebGL (PhiloGL, GLGE, SceneJS) and the CSS 3D cited above, the web will soon be packed with 3D visuals (for better or worse). Would it be interesting to have 3D rendering on 2D SVG in d3 or should we just leave this to other 3D web standards?

I will surely use d3.timer. Those smooth animations are what made me switch to d3 at the first place. 

[Mike Bostock]

> Would it be interesting to have 3D rendering on 2D SVG in d3 or should we
> just leave this to other 3D web standards?

Another tool to consider is three.js, which currently supports SVG,
along with Canvas and WebGL:

https://github.com/mrdoob/three.js/

Personally, I still think there's value in D3-style (data-driven)
generation and manipulation of 3D scenegraphs. But if the goal is
strictly to render 3D in SVG, then three.js has a good head start. :)
I wonder if it is possible to use D3 to manipulate a three.js
scenegraph.

Mike

[Jamie Popkin]

Very nice Chris.

[Chris Viau]

Ok, maybe I'm out with my 3D SVG rendering idea. Maybe also with my cheesy QR-code cellular automaton I did for a client ; ) But I challenge you to find a shape tween javascript implementation, not just motion tween or attributes interpolation, but shape morphing as in Flash. 

[Sean OBrien]

I am working on a concept I would like some help on Chris.

I am working with a very large Hadoop cluster where I have natural language processing extract from the Name Nodes concepts that I felt were important in a semantic model.

I have built a massive Sentiment Look up table with a range of word kinds having a - 5 to +5 context value.

I want to create a 3D visualization of the "Terrain" of sentiment whereby by concepts extracted from my hadoop layer are presented through a JSON webservice

I would like to take each snippet of data that meets my criteria and express them as X visualizing range in time, Y in range of Sentiment and Z representing volume. 

I have the first part working - I am struggling with D3 to create a 3D grid to plot all my data points.

Any ideas?

[Christophe Viau]

There was a 3D grid at some point derived from these experiments, but it's no longer available. I would say that D3 is not the right technology for the task as WebGL is so much easier to use directly (example: http://www.chromeexperiments.com/detail/tear-able-cloth/?f=). Still I had some good success using X3DOM with D3.
http://biovisualize.github.io/d3visualization/#technology=x3dom
Chris

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

[marc fawzi]

the example of the tearable cloth is based on canvas

[Christophe Viau]

You're right, 2D canvas.

[Sasha Goodman]

A simple 3d box that specifies the camera position and distortion would allow for so much. So would a geo projection that includes altitude, imho.

Here are examples of simple 3d visualizations that convey a lot elegantly, without going crazy with the 3d distortion:

http://www.youtube.com/watch?v=e-hlP8Ql384

http://www.csc.ncsu.edu/faculty/healey/download/gi.98.pdf

http://senseable.mit.edu/flyfire/#

http://research.microsoft.com/en-us/news/features/geoflow_data_viz-041113.aspx

(parenthetically, 3d occlusion issues are mitigated with simple pan effects, like the new iphone gui)

Now, I'm not sure which tools work on the majority of browsers. Which do? 

Some links I found on this forum.

+ http://threejs.org/

+ http://x3dom.org

http://bl.ocks.org/ZJONSSON/1291667

+ CSS

https://www.webkit.org/blog/386/3d-transforms/

+ Clearly, web gl is an emerging standard but does not have a monopoly on 3d and does not work on many browsers.

[Miles McCrocklin]

After a quick github search the farthest three.js + d3.js project I found was:

https://github.com/asutherland/d3-threeD

It takes a 2d plane (which d3.js renders onto) and manipulates it in 3d.

-Miles

[Sasha Goodman]

That project is promising. d3.js seems in control of data, data mapping and Transitions. Three uses the requestAnimationFrame for its renderer, and I think d3 uses that for transitions also

[Harry Voorhees]

Here is an example of a 3D scatter plot that I implemented using d3 and x3dom:
http://bl.ocks.org/hlvoorhees/5986172

To plot a surface instead of points, you could probably use the ElevationGrid node instead of individual spheres and lines. It is is documented here:
http://www.web3d.org/files/specifications/19775-1/V3.2/Part01/components/geometry3D.html#ElevationGrid

and an example usage appears here:
http://www.x3dgraphics.com/examples/X3dForWebAuthors/Chapter06-GeometryPointsLinesPolygons/ElevationGridCanonical.xml

Harry Voorhees

[Sasha Goodman]

Harry, Thanks for this demo. Since most of us don't know both d3.js and three.js, could you briefly help me understand how you handle changes to the scene? Looks like you use d3.js for most of it: base javascript setInterval() calls your function plotData(), which in turn calls d3.js to transition objects. Does this totally sidestep any three.js event handling loops and such??

[Harry Voorhees]

Sasha, my example actually uses x3dom rather than three.js. Unlike three.js, the scene graph is specified by creating X3D (XML) nodes within the DOM (which the x3dom runtime interprets to call WebGL). So yeah, the animation is implemented by calling d3 methods to periodically updating the position of the X3D sphere and line nodes, using transitions to interpolate the changes. Does this answer your question?

Harry

[Sasha Goodman]

Hello Harry,

Things are much clearer. Being very d3 centric, I do not usually think about setInteval(). I've chained together transitions in D3 and simply added duration to each.

What you have done is to use setInterval(), which is a core javascript function (http://www.w3schools.com/jsref/met_win_setinterval.asp), and then call the transition in d3 and X3d at those intervals. D3 then works to change parameters in the DOM after the transition is called.

What is still not totally clear is if d3.js will synchronize perfectly with the timers in other libraries. I don't think it will. D3.js has a slight delay before starting a transition. From the D3 documentation: 

Transitions start automatically upon creation after a delay which defaults to zero; however, note that a zero-delay transition actually starts after a minimal (~17ms) delay, pending the first timer callback.

Additionally, d3.js transitions that are computationally intensive may not happen at the same times across different computer systems with different CPUs. I'm thinking about force directed layouts. Further, I read that micromanaging the DOM is costly, in terms of CPU cycles and therefore performance will vary across systems.

So, I were trying to syncronize events with a reference time, calling setInterval to trigger events in both libraries might produce the best synconization possible, although D3 would cause delays depending on the system. 

Taking this another step, if I were trying to keep events synchronized with a video clip, modifying setInterval to syncronize with the system clock might help.

http://www.sitepoint.com/creating-accurate-timers-in-javascript/

I don't suppose there were a way to neatly precompute and cache transitions in D3.js and call them when needed?

[Harry Voorhees]

Ah, that might explain why the animation isn't completely smooth. To tell you the truth, I added the setInterval() call only to make the example more visually interesting. The main purpose of the example was to illustrate a way to render elevation data using x3d.

(The transitions are there because in another application of this code, the data points move in response to user events like changing the parameter plotted along an axis)

Harry

[Sasha Goodman]

Another 3d-d3 hybrid:

http://www.smartjava.org/content/render-geographic-information-3d-threejs-and-d3js

http://www.smartjava.org/examples/threed3s/js/d3-threeD.js

[Sasha Goodman]

An outlook on the future of d3.js and 3d, from http://acko.net/blog/making-mathbox/ . The examples in this thread prove the author wrong.

Now, when people think of graphs in a browser, the natural thought is vector graphics and SVG, which quickly leads to visualization powerhouse d3.js. It really is an amazing piece of tech with a vast library of useful code to accompany it. When I wrapped my head around how d3's enter/exit selections are implemented and how little it actually does to achieve so much, I was blown away. It's just so elegant and simple.

 

Unfortunately, d3's core is intricately tied to the DOM through SVG and CSS. And that means ironically that d3 is not really capable of 3D. Additionally, d3 is a power tool that makes no assumptions: it is up to you to choose which visual elements and techniques to use to make your diagrams, and as such it is more like assembly language for graphs than a drop-in tool. These two were show stoppers.

[Максим Зубков]

Just dropped in this thread to share more direct, in my opinion, approach to interoperate between d3 and three.js: http://jsdo.it/makc/djN0/fullscreen

[marc fawzi]

really cool... object constancy in 3d

On Fri, Nov 1, 2013 at 2:38 AM, Максим Зубков <makc.th...@gmail.com> wrote:

Just dropped in this thread to share more direct, in my opinion, approach to interoperate between d3 and three.js: http://jsdo.it/makc/djN0/fullscreen

--

[Bickhardt, Lutz]

Hi!

Whatever it shows, it doesn' t do it with OSX 10.6.8 and Safari 5.1.10.

ErrorConsole output is:

all.js:56Invalid App Id: Must be a number or numeric string representing the application id.
all.js:56The "fb-root" div has not been created, auto-creating
all.js:56FB.getLoginStatus() called before calling FB.init().
ga.jsFailed to load resource: the server responded with a status of 404 (Not Found)
js:416THREE.WebGLRenderer 60
js:421Error creating WebGL context.
js:421TypeError: 'null' is not an object (evaluating 'j.getExtension')

and continuously increasing:

... <n> ... js:557TypeError: 'undefined' is not an object (evaluating 'name.indexOf')

Cordialement

Lutz

[Максим Зубков]

In OSX 1.8.5 Safari 6.1 you would go to menu Develop -> Enable WebGL :)

[Victor Powell]

I was inspired by the comments from this thread and decided to put together a small attempt at providing some 3D features in the style of D3. You can check it out here: https://github.com/vicapow/dz

an example: http://vicapow.github.io/dz/example/line-plot.html

I also posted about this recently in another discussion (https://groups.google.com/forum/#!topic/d3-js/tVfjJCK9EaU) but it's probably more relevant here.

[Phuoc Do]

I just built a 3D force layout using x3dom:

https://vida.io/documents/N4jSip7n68yQ48DXp

It's the 3D version of Stick Force Layout example:

http://bl.ocks.org/mbostock/3750558

Phuoc Do

vida.io

[Bill White]

For those interested, I just posted a demo showing a d3 layout that gets translated into a threejs representation, complete with source code.  Enjoy.

(http://www.billdwhite.com/wordpress/2015/01/12/d3-in-3d-combining-d3-js-and-three-js/)

:)

Bill

[John Carlson]

I've created a couple of scripts that convert X3D to JSON and then to D3 (JavaScript) for inclusion on a web page (you have to edit the web page at this point).  Very rough still  (no X3D scripts, protos, text nodes and only a single file), contributions are welcome.  Give it a whirl!  Hint, I use Chrome! https://github.com/coderextreme/X3DJSONTOD3/  Try the heart.xhtml example that I've included D3 in.