diff --git a/01_Code/physical_computing_interface/assembly/app.js b/01_Code/physical_computing_interface/assembly/app.js
index 770e61eff034e478753895303b189630022f050b..110d757dde865f9bacb88fbea473e1a227ac3180 100644
--- a/01_Code/physical_computing_interface/assembly/app.js
+++ b/01_Code/physical_computing_interface/assembly/app.js
@@ -100,10 +100,10 @@ var integratedSetup={
             delta_t: 1e-4,
             cutoff: 0.1,
             spring_constant: 1000.0,
-            num_particles_per_node:3,
+            num_particles_per_node:10,
             region_pitch:1.0,
             save_every:20, //visualize every how much frames
-            save_max:200, //max num of files saved
+            save_max:500, //max num of files saved
         },
         particles:[],
     }
@@ -234,6 +234,12 @@ function assembleNode(e,integratedSetup){
 }
 
 function startAssembler(integratedSetup){
+
+    if(integratedSetup.DEMSetup.parameters.run){
+        runDEMViz();
+
+    }
+
     var ur10Setup=integratedSetup.ur10Setup;
 
     console.log("Run Assembler to assemble "+ur10Setup.nodes.length+ " node(s) and "+ur10Setup.edges.length+ " edge(s)!");
@@ -246,5 +252,9 @@ function startAssembler(integratedSetup){
     ur10Setup.nodes=[];
     ur10Setup.edges=[];
 
+    
+
+    
+
 }
 
diff --git a/01_Code/physical_computing_interface/assembly/python-urx/setup.json b/01_Code/physical_computing_interface/assembly/python-urx/setup.json
index 46e67bcff2c84824311a440e6031a4165ef3c13a..90503d1121a9b8e7a1f9bb7866d4c5ba2f9dfeb6 100644
--- a/01_Code/physical_computing_interface/assembly/python-urx/setup.json
+++ b/01_Code/physical_computing_interface/assembly/python-urx/setup.json
@@ -1,7 +1,7 @@
 {
   "setup": {
     "parameters": {
-      "run": true,
+      "run": false,
       "pythonFileName": "ur10test",
       "ipNode": "192.168.1.52",
       "ipEdge": "192.168.1.53",
@@ -65,6 +65,14 @@
         "rx": 0,
         "ry": 0,
         "rz": 0
+      },
+      {
+        "y": 0,
+        "x": 1,
+        "z": 0,
+        "rx": 0,
+        "ry": 0,
+        "rz": 0
       }
     ],
     "edges": [
@@ -99,6 +107,30 @@
         "rx": 0,
         "ry": 0,
         "rz": 1.5707963267948966
+      },
+      {
+        "y": 0,
+        "x": 1.5,
+        "z": 0,
+        "rx": 0,
+        "ry": 0,
+        "rz": 0
+      },
+      {
+        "y": -0.5,
+        "x": 1,
+        "z": 0,
+        "rx": 0,
+        "ry": 0,
+        "rz": 1.5707963267948966
+      },
+      {
+        "y": 0,
+        "x": 0.5,
+        "z": 0,
+        "rx": 0,
+        "ry": 0,
+        "rz": 0
       }
     ]
   }
diff --git a/01_Code/physical_computing_interface/demos/indexUR10.html b/01_Code/physical_computing_interface/demos/indexUR10.html
index 2ecd4e10b041b2c4d56436189f36623f3bfbe55e..7c5096e77dfd5b641b959010c9cf0361b0dd1d7f 100644
--- a/01_Code/physical_computing_interface/demos/indexUR10.html
+++ b/01_Code/physical_computing_interface/demos/indexUR10.html
@@ -29,13 +29,13 @@
 
     <div id="simulation">
         <div id="threejs1">
-            <div class="header1">
+            <div class="header2">
                     <i> Simulation</i>
             </div>
             <div class="dragbar2"></div>
             <!-- <div id="webgl1"></div> -->
             <!-- todo put this somewhere elseß -->
-            <div id="intro_demo">
+            <div id="webgl1"></div>
                 
             </div>
             
@@ -103,6 +103,13 @@
 <!-- libraries -->
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
 
+
+<script src="//unpkg.com/three"></script>
+<script src="//unpkg.com/3d-force-graph"></script>
+<script src="//unpkg.com/three-spritetext"></script>
+
+
+
 <!-- Import TensorFlow.js -->
 <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@1.0.0/dist/tf.min.js"></script>
 <!-- Import tfjs-vis -->
@@ -123,7 +130,7 @@
 <script src="../lib/jsoneditor/jsoneditor.js"></script>
 
 
-<script src="../lib/three.min.js"></script>
+<!-- <script src="../lib/three.min.js"></script> -->
 <script src="../lib/OrbitControls.js"></script>
 <script src="../lib/dat.gui.min.js"></script>
 <script src="../lib/TransformControls.js"></script>
@@ -139,21 +146,12 @@
 <script src="../assembly/replay.js"></script><!-- assembly and timestep handling -->
 
 <script src="../graph/graph.js"></script><!--graph flow visualization-->
-
-<!-- <script language="javascript" type="text/javascript"   src="../AI/lib/p5.min.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/p5.dom.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/numjs.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/agent.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/wann_agent.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/swingup.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/jquery-1.12.4.min.js"></script>
-  <script language="javascript" type="text/javascript" src="../AI/lib/demo.js"></script> -->
-
+<script src="../json/json.js"></script><!-- json -->
 
 
-<script src="../json/json.js"></script><!-- json -->
+<script src="../simulation/3dGraphVizDEM.js"></script><!--graph for DEM viz-->
 
-<script src="../assembly/app.js"></script>
+<script src="../assembly/app.js"></script><!--ur10 assembly stuff-->
 
 <script src="../setup/windowsControl.js"></script>
 
@@ -162,6 +160,4 @@
 </script>
 
 
-
-
 </html>
diff --git a/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js b/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js
new file mode 100644
index 0000000000000000000000000000000000000000..6184ab74bcc75c24df371f09a7eb3a54509ef778
--- /dev/null
+++ b/01_Code/physical_computing_interface/simulation/3dGraphVizDEM.js
@@ -0,0 +1,206 @@
+function runDEMViz(){
+    $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/sim_config.json", function(config) {
+        var numParticles=config.particles.length;
+        var maxFiles=config.parameters.save_max;
+    
+    
+    
+        var color1= 0xffffff; /*white*/
+        var color2= '#020227';  /*kohly*/
+        var color3= 0x1c5c61; /*teal*/
+        var color4= "#fa6e70"; //red/orange
+        var color5="#380152"; //purple
+        var color6="#696767"; //grey
+        var color7="#03dbfc"; //blue
+    
+        $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/positions/0.json", function(json0) {
+    
+            
+            var positions=json0.positions;
+            var edges=[];
+            var nodes=[];
+    
+            var scale=100.0;
+    
+    
+            for (var i=0;i<2*numParticles;i+=2){
+                nodes.push({
+                    id:i,
+                    x:positions[i],
+                    y:positions[i+1],
+                });
+            }
+    
+            var gData = {
+                nodes: nodes.map(node => ({ 
+                    id:node.id,
+                    px:node.x*scale-scale,
+                    py:node.y*scale-scale,
+                    pz:0,
+                })),
+                links: edges
+                .filter(edge => edge.id)
+                .map(edge => ({
+                    source: 'n'+edge.source,
+                    target: 'n'+edge.target,
+                    color:getColor(edge.stress)
+                }))
+            };
+            //color=interpolateLinearly(i / l, this.setup.viz.colorMaps[this.setup.viz.colorMap]);
+    
+            const Graph = ForceGraph3D().backgroundColor(color2)
+                .width($('#simulation').width())
+                .height($('#simulation').height())
+                (document.getElementById('webgl1'))
+                .d3Force('center', null)
+                .d3Force('charge', null)
+                // .linkDirectionalParticles(0.5)
+    
+                // .linkThreeObject(link => {
+                //   // extend link with text sprite
+                //   const sprite = new SpriteText(`${link.source} > ${link.target}`);
+                //   sprite.color = 'lightgrey';
+                //   sprite.textHeight = 1.5;
+                //   return sprite;
+                // })
+                // .linkPositionUpdate((sprite, { start, end }) => {
+                //   const middlePos = Object.assign(...['x', 'y', 'z'].map(c => ({
+                //     [c]: start[c] + (end[c] - start[c]) / 2 // calc middle point
+                //   })));
+    
+                //   // Position sprite
+                //   Object.assign(sprite.position, middlePos);
+                // })
+    
+                .linkWidth(1.0)
+                .linkOpacity(1.0)
+                .linkColor(color3)
+                .nodeThreeObject(({ }) => new THREE.Mesh(
+                    new THREE.BoxGeometry(scale/10.0, scale/10.0, scale/10.0),
+                    new THREE.MeshLambertMaterial({
+                        color: color3,
+                        transparent: true,
+                        opacity: 0.9
+                    })
+                ))
+                .d3Force('box', () => {
+    
+                gData.nodes.forEach(node => {
+                        node.fx=node.px;
+                        node.fy=node.py;
+                        node.fz=node.pz;
+    
+                    });
+                })
+                
+                .cooldownTime(Infinity)
+                .graphData(gData);
+            //
+    
+    
+            var count=0;
+            var count1=0;
+            var totalCount=0;
+            var increment=true;
+            var speed=1;
+            var exaggeration=10000.0;
+    
+    
+            setInterval(() => {
+    
+                $.getJSON("../simulation/dice_firmware/build/x86/src/sim/vis/positions/"+count+".json", function(json) {
+    
+                    var positions=json.positions;
+                    var edges=[];
+                    var nodes=[];
+    
+                    var scale=100.0;
+    
+    
+                    for (var i=0;i<2*numParticles;i+=2){
+                        nodes.push({
+                            id:i,
+                            x:positions[i],
+                            y:positions[i+1],
+                        });
+                    }
+    
+                    gData = {
+                        nodes: nodes.map(node => ({ 
+                            id:node.id,
+                            px:node.x*scale-scale,
+                            py:node.y*scale-scale,
+                            pz:0,
+                        })),
+                        links: edges
+                        .filter(edge => edge.id)
+                        .map(edge => ({
+                            source: 'n'+edge.source,
+                            target: 'n'+edge.target,
+                            color:getColor(edge.stress)
+                        }))
+                    };
+    
+    
+                    Graph.d3Force('box', () => {
+    
+                        gData.nodes.forEach(node => {   
+    
+    
+                            node.fx=node.px;
+                            node.fy=node.py;
+                            node.fz=node.pz;
+    
+                        });
+                    }).graphData(gData);;
+    
+                    count++;
+                    if(count>=maxFiles){
+                        count=0;
+                    }
+    
+                        
+                    //     count1=0;
+                    // }
+                    // count1++;
+    
+                    
+                    // console.log(count)
+                    // console.log(maxFiles)
+                    
+    
+    
+                    // if(count>speed){
+                    // increment=false;
+                    // }else if (count<0){
+                    // increment=true;
+                    // }
+    
+    
+                    // if(increment){
+                    // count++;
+                    // }else{
+                    // count--;
+                    // }
+                    // totalCount++;
+                    // console.log(totalCount);
+                });
+    
+                
+            }, 50);
+    
+    
+            var helper = new THREE.GridHelper( 2, 2 );
+            helper.material.opacity = 0.5;
+            helper.material.transparent = true;
+            helper.scale.x=1.0*scale
+            helper.scale.z=1.0*scale
+            helper.rotation.x=Math.PI/2.0;
+            Graph.scene().add(helper);
+    
+            Graph.scene()
+    
+        });
+    });
+}
+