CODEWITHSUNDEEP
javascriptd3.jsdata-visualization
Selah
Selah

Reputation: 8054

Modify d3.js code to generate static 3d plot

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

  1. stop the animation
  2. supply xy data values of my choosing

?????

Upvotes: 0

Views: 97

Answers (2)

Selah
Selah

Reputation: 8054

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();

Upvotes: 0

mab
mab

Reputation: 810

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.

Upvotes: 2

Related Questions