Modify d3.js code to generate static 3d plot

Question

I'm trying to create an interactive 3D plot using D3, but sourcing the data from numpy. I found a nice D3 example here: http://bl.ocks.org/hlvoorhees/5986172

Can anyone figure out which lines I'd need to change in this code to

stop the animation
supply xy data values of my choosing

?????

mab · Accepted Answer · 2017-02-01 22:39:45Z

2

At the end of the Javascript file, replace this line:

setInterval( updateData, defaultDuration );

with this:

function waitForX3d(resolve) {
  if ( x3d.node() && x3d.node().runtime ) {
    resolve();
  } else {
    new Promise(r => setTimeout(r, 100))
    .then(() => waitForX3d(resolve));
  }
}
// setInterval( updateData, defaultDuration );
new Promise(r => waitForX3d(r))
.then(() => updateData());

Change the updateData function to load your data into the rows variable.

answered Feb 1, 2017 at 22:39

mab

8206 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Selah Over a year ago

I think this doesn't totally answer my question, but it is nice insight into how a promise could be used to work with x3d. Def worth an upvote.

Selah · Accepted Answer · 2017-02-02 17:14:06Z

Eventually I realized that the rows variable is what I need to change. I modified that in initializeDataGrid()

Then in place of setInterval(updateData, defaultDuration) I put plotData()

Now I can plot any dataset in an interactive 3D grid yay!

@@ -235,11 +234,13 @@ function scatterPlot3d( parent )
   function initializeDataGrid() {
     var rows = [];
     // Follow the convention where y(x,z) is elevation.
+        //EDIT THIS FOR STATIC DATA!!!
     for (var x=-5; x<=5; x+=1) {
       for (var z=-5; z<=5; z+=1) {
-        rows.push({x: x, y: 0, z: z});
+        rows.push({x: x, y: (x+z)/2, z: z});
      }
     }
+    rows.push({x: 2.5, y: 0, z: 2.5});
     return rows;
   }
@@ -259,8 +261,5 @@ function scatterPlot3d( parent )

   initializeDataGrid();
   initializePlot();
-  setInterval( updateData, defaultDuration );
+  plotData();

Collectives™ on Stack Overflow

Modify d3.js code to generate static 3d plot

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related