flow like the river

2025-11-07 00:06:12 +01:00 · 2025-11-07 00:06:12 +01:00 · 013fe673f3
commit 013fe673f3
42435 changed files with 5764238 additions and 0 deletions
--- a/VISUALIZACION/node_modules/3d-force-graph/example/async-load/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/async-load/index.html
@ -0,0 +1,18 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group');
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/auto-colored/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/auto-colored/index.html
@ -0,0 +1,35 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const NODES = 300;
+    const GROUPS = 12;
+    const gData = {
+      nodes: [...Array(NODES).keys()].map(i => ({
+        id: i,
+        group: Math.ceil(Math.random() * GROUPS)
+      })),
+      links: [...Array(NODES).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .nodeAutoColorBy('group')
+        .linkAutoColorBy(d => gData.nodes[d.source].group)
+        .linkOpacity(0.5)
+        .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/basic/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/basic/index.html
@ -0,0 +1,28 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/bloom-effect/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/bloom-effect/index.html
@ -0,0 +1,28 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { UnrealBloomPass } from '//unpkg.com/three/examples/jsm/postprocessing/UnrealBloomPass.js';
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .backgroundColor('#000003')
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group');
+
+    const bloomPass = new UnrealBloomPass();
+    bloomPass.strength = 4;
+    bloomPass.radius = 1;
+    bloomPass.threshold = 0;
+    Graph.postProcessingComposer().addPass(bloomPass);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/camera-auto-orbit/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/camera-auto-orbit/index.html
@ -0,0 +1,44 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const distance = 1400;
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .enableNodeDrag(false)
+        .enableNavigationControls(false)
+        .showNavInfo(false)
+        .cameraPosition({ z: distance })
+        .graphData(gData);
+
+    // camera orbit
+    let angle = 0;
+    setInterval(() => {
+      Graph.cameraPosition({
+        x: distance * Math.sin(angle),
+        z: distance * Math.cos(angle)
+      });
+      angle += Math.PI / 300;
+    }, 10);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/click-to-focus/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/click-to-focus/index.html
@ -0,0 +1,35 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const elem = document.getElementById('3d-graph');
+
+    const Graph = ForceGraph3D()
+      (elem)
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .onNodeClick(node => {
+          // Aim at node from outside it
+          const distance = 40;
+          const distRatio = 1 + distance/Math.hypot(node.x, node.y, node.z);
+
+          const newPos = node.x || node.y || node.z
+            ? { x: node.x * distRatio, y: node.y * distRatio, z: node.z * distRatio }
+            : { x: 0, y: 0, z: distance }; // special case if node is in (0,0,0)
+
+          Graph.cameraPosition(
+            newPos, // new position
+            node, // lookAt ({ x, y, z })
+            3000  // ms transition duration
+          );
+        });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/collision-detection/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/collision-detection/index.html
@ -0,0 +1,52 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+
+  <script src="//unpkg.com/d3-octree"></script>
+  <script src="//unpkg.com/d3-force-3d"></script>
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const N = 50;
+    const nodes = [...Array(N).keys()].map(() => ({
+      // Initial velocity in random direction
+      vx: Math.random(),
+      vy: Math.random(),
+      vz: Math.random()
+    }));
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'));
+
+    Graph.cooldownTime(Infinity)
+      .d3AlphaDecay(0)
+      .d3VelocityDecay(0)
+
+      // Deactivate existing forces
+      .d3Force('center', null)
+      .d3Force('charge', null)
+
+      // Add collision and bounding box forces
+      .d3Force('collide', d3.forceCollide(Graph.nodeRelSize()))
+      .d3Force('box', () => {
+        const CUBE_HALF_SIDE = Graph.nodeRelSize() * N * 0.5;
+
+        nodes.forEach(node => {
+          const x = node.x || 0, y = node.y || 0, z = node.z || 0;
+
+          // bounce on box walls
+          if (Math.abs(x) > CUBE_HALF_SIDE) { node.vx *= -1; }
+          if (Math.abs(y) > CUBE_HALF_SIDE) { node.vy *= -1; }
+          if (Math.abs(z) > CUBE_HALF_SIDE) { node.vz *= -1; }
+        });
+      })
+
+      // Add nodes
+      .graphData({ nodes, links: [] });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/controls-fly/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/controls-fly/index.html
@ -0,0 +1,18 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+<div id="3d-graph"></div>
+
+<script>
+  const Graph = ForceGraph3D({ controlType: 'fly' })
+  (document.getElementById('3d-graph'))
+    .jsonUrl('../datasets/miserables.json')
+    .nodeLabel('id')
+    .nodeAutoColorBy('group');
+</script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/controls-orbit/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/controls-orbit/index.html
@ -0,0 +1,18 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+<div id="3d-graph"></div>
+
+<script>
+  const Graph = ForceGraph3D({ controlType: 'orbit' })
+  (document.getElementById('3d-graph'))
+    .jsonUrl('../datasets/miserables.json')
+    .nodeLabel('id')
+    .nodeAutoColorBy('group');
+</script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/curved-links/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/curved-links/index.html
@ -0,0 +1,59 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const gData = {
+      nodes: [...Array(14).keys()].map(i => ({ id: i })),
+      links: [
+        { source: 0, target: 1, curvature: 0, rotation: 0 },
+        { source: 0, target: 1, curvature: 0.8, rotation: 0 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 1 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 2 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 3 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 4 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 5 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 7 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 8 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 9 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 10 / 6 },
+        { source: 0, target: 1, curvature: 0.8, rotation: Math.PI * 11 / 6 },
+        { source: 2, target: 3, curvature: 0.4, rotation: 0 },
+        { source: 3, target: 2, curvature: 0.4, rotation: Math.PI / 2 },
+        { source: 2, target: 3, curvature: 0.4, rotation: Math.PI },
+        { source: 3, target: 2, curvature: 0.4, rotation: -Math.PI / 2 },
+        { source: 4, target: 4, curvature: 0.3, rotation: 0 },
+        { source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 2 / 3 },
+        { source: 4, target: 4, curvature: 0.3, rotation: Math.PI * 4 / 3 },
+        { source: 5, target: 6, curvature: 0, rotation: 0 },
+        { source: 5, target: 5, curvature: 0.5, rotation: 0 },
+        { source: 6, target: 6, curvature: -0.5, rotation: 0 },
+        { source: 7, target: 8, curvature: 0.2, rotation: 0 },
+        { source: 8, target: 9, curvature: 0.5, rotation: 0 },
+        { source: 9, target: 10, curvature: 0.7, rotation: 0 },
+        { source: 10, target: 11, curvature: 1, rotation: 0 },
+        { source: 11, target: 12, curvature: 2, rotation: 0 },
+        { source: 12, target: 7, curvature: 4, rotation: 0 },
+        { source: 13, target: 13, curvature: 0.1, rotation: 0 },
+        { source: 13, target: 13, curvature: 0.2, rotation: 0 },
+        { source: 13, target: 13, curvature: 0.5, rotation: 0 },
+        { source: 13, target: 13, curvature: 0.7, rotation: 0 },
+        { source: 13, target: 13, curvature: 1, rotation: 0 }
+      ]
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .linkCurvature('curvature')
+        .linkCurveRotation('rotation')
+        .linkDirectionalParticles(2)
+        .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/custom-node-geometry/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/custom-node-geometry/index.html
@ -0,0 +1,46 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
+    // Random tree
+    const N = 100;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .nodeThreeObject(({ id }) => new THREE.Mesh(
+          [
+            new THREE.BoxGeometry(Math.random() * 20, Math.random() * 20, Math.random() * 20),
+            new THREE.ConeGeometry(Math.random() * 10, Math.random() * 20),
+            new THREE.CylinderGeometry(Math.random() * 10, Math.random() * 10, Math.random() * 20),
+            new THREE.DodecahedronGeometry(Math.random() * 10),
+            new THREE.SphereGeometry(Math.random() * 10),
+            new THREE.TorusGeometry(Math.random() * 10, Math.random() * 2),
+            new THREE.TorusKnotGeometry(Math.random() * 10, Math.random() * 2)
+          ][id%7],
+          new THREE.MeshLambertMaterial({
+            color: Math.round(Math.random() * Math.pow(2, 24)),
+            transparent: true,
+            opacity: 0.75
+          })
+        ))
+        .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/dag-yarn/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/dag-yarn/index.html
@ -0,0 +1,74 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//bundle.run/@yarnpkg/lockfile@1.1.0"></script>
+  <script src="//unpkg.com/dat.gui"></script>
+  <script src="//unpkg.com/d3-octree"></script>
+  <script src="//unpkg.com/d3-force-3d"></script>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+<div id="graph"></div>
+
+<script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+<script type="module">
+  import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
+  // controls
+  const controls = { 'DAG Orientation': 'lr'};
+  const gui = new dat.GUI();
+  gui.add(controls, 'DAG Orientation', ['lr', 'td', 'zout', 'radialout', null])
+    .onChange(orientation => graph && graph.dagMode(orientation));
+
+  // graph config
+  const graph = ForceGraph3D()
+    .backgroundColor('#101020')
+    .linkColor(() => 'rgba(255, 255, 255, 0.6)')
+    .dagMode('lr')
+    .onDagError(() => false)
+    .dagLevelDistance(180)
+    .nodeId('package')
+    .linkCurvature(0.07)
+    .nodeThreeObject(node => {
+      const sprite = new SpriteText(node.package);
+      sprite.material.depthWrite = false;
+      sprite.color = 'lightsteelblue';
+      sprite.textHeight = 8;
+      return sprite;
+    })
+    .d3Force('collide', d3.forceCollide(13))
+    .d3AlphaDecay(0.02)
+    .d3VelocityDecay(0.3);
+
+  fetch('../../yarn.lock')
+    .then(r => r.text())
+    .then(text => {
+      const yarnlock = _yarnpkg_lockfile.parse(text);
+      if (yarnlock.type !== 'success') throw new Error('invalid yarn.lock');
+      return yarnlock.object;
+    })
+    .then(yarnlock => {
+      const nodes = [];
+      const links = [];
+
+      Object.entries(yarnlock).forEach(([pkg, details]) => {
+        nodes.push({
+          package: pkg,
+          version: details.version
+        });
+
+        if (details.dependencies) {
+          Object.entries(details.dependencies).forEach(([dep, version]) => {
+            links.push({source: pkg, target: `${dep}@${version}`});
+          });
+        }
+      });
+
+      graph(document.getElementById('graph'))
+        .graphData({ nodes, links });
+    });
+</script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/datasets/blocks.json
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/datasets/blocks.json
--- a/VISUALIZACION/node_modules/3d-force-graph/example/datasets/d3-dependencies.csv
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/datasets/d3-dependencies.csv
@ -0,0 +1,464 @@
+size,path
+,d3
+,d3/d3-array
+,d3/d3-array/threshold
+,d3/d3-axis
+,d3/d3-brush
+,d3/d3-chord
+,d3/d3-collection
+,d3/d3-color
+,d3/d3-dispatch
+,d3/d3-drag
+,d3/d3-dsv
+,d3/d3-ease
+,d3/d3-force
+,d3/d3-format
+,d3/d3-geo
+,d3/d3-geo/clip
+,d3/d3-geo/path
+,d3/d3-geo/projection
+,d3/d3-hierarchy
+,d3/d3-hierarchy/hierarchy
+,d3/d3-hierarchy/pack
+,d3/d3-hierarchy/treemap
+,d3/d3-interpolate
+,d3/d3-interpolate/transform
+,d3/d3-path
+,d3/d3-polygon
+,d3/d3-quadtree
+,d3/d3-queue
+,d3/d3-random
+,d3/d3-request
+,d3/d3-scale
+,d3/d3-selection
+,d3/d3-selection/selection
+,d3/d3-shape
+,d3/d3-shape/curve
+,d3/d3-shape/offset
+,d3/d3-shape/order
+,d3/d3-shape/symbol
+,d3/d3-time-format
+,d3/d3-time
+,d3/d3-timer
+,d3/d3-transition
+,d3/d3-transition/selection
+,d3/d3-transition/transition
+,d3/d3-voronoi
+,d3/d3-zoom
+90,d3/d3-array/array.js
+86,d3/d3-array/ascending.js
+238,d3/d3-array/bisect.js
+786,d3/d3-array/bisector.js
+72,d3/d3-array/constant.js
+86,d3/d3-array/descending.js
+135,d3/d3-array/deviation.js
+553,d3/d3-array/extent.js
+1876,d3/d3-array/histogram.js
+43,d3/d3-array/identity.js
+451,d3/d3-array/max.js
+362,d3/d3-array/mean.js
+452,d3/d3-array/median.js
+339,d3/d3-array/merge.js
+451,d3/d3-array/min.js
+63,d3/d3-array/number.js
+182,d3/d3-array/pairs.js
+161,d3/d3-array/permute.js
+416,d3/d3-array/quantile.js
+344,d3/d3-array/range.js
+357,d3/d3-array/scan.js
+285,d3/d3-array/shuffle.js
+295,d3/d3-array/sum.js
+361,d3/d3-array/threshold/freedmanDiaconis.js
+180,d3/d3-array/threshold/scott.js
+96,d3/d3-array/threshold/sturges.js
+672,d3/d3-array/ticks.js
+356,d3/d3-array/transpose.js
+540,d3/d3-array/variance.js
+99,d3/d3-array/zip.js
+42,d3/d3-axis/array.js
+5239,d3/d3-axis/axis.js
+43,d3/d3-axis/identity.js
+15778,d3/d3-brush/brush.js
+72,d3/d3-brush/constant.js
+127,d3/d3-brush/event.js
+202,d3/d3-brush/noevent.js
+42,d3/d3-chord/array.js
+3178,d3/d3-chord/chord.js
+72,d3/d3-chord/constant.js
+159,d3/d3-chord/math.js
+2340,d3/d3-chord/ribbon.js
+137,d3/d3-collection/entries.js
+104,d3/d3-collection/keys.js
+1988,d3/d3-collection/map.js
+2021,d3/d3-collection/nest.js
+800,d3/d3-collection/set.js
+115,d3/d3-collection/values.js
+9276,d3/d3-color/color.js
+1855,d3/d3-color/cubehelix.js
+340,d3/d3-color/define.js
+3167,d3/d3-color/lab.js
+72,d3/d3-color/math.js
+2729,d3/d3-dispatch/dispatch.js
+72,d3/d3-drag/constant.js
+4297,d3/d3-drag/drag.js
+430,d3/d3-drag/event.js
+857,d3/d3-drag/nodrag.js
+202,d3/d3-drag/noevent.js
+199,d3/d3-dsv/csv.js
+3582,d3/d3-dsv/dsv.js
+200,d3/d3-dsv/tsv.js
+653,d3/d3-ease/back.js
+521,d3/d3-ease/bounce.js
+261,d3/d3-ease/circle.js
+210,d3/d3-ease/cubic.js
+1309,d3/d3-ease/elastic.js
+251,d3/d3-ease/exp.js
+43,d3/d3-ease/linear.js
+596,d3/d3-ease/poly.js
+192,d3/d3-ease/quad.js
+236,d3/d3-ease/sin.js
+654,d3/d3-force/center.js
+2447,d3/d3-force/collide.js
+72,d3/d3-force/constant.js
+69,d3/d3-force/jiggle.js
+3213,d3/d3-force/link.js
+3181,d3/d3-force/manyBody.js
+3444,d3/d3-force/simulation.js
+1030,d3/d3-force/x.js
+1030,d3/d3-force/y.js
+361,d3/d3-format/defaultLocale.js
+134,d3/d3-format/exponent.js
+656,d3/d3-format/formatDecimal.js
+368,d3/d3-format/formatDefault.js
+475,d3/d3-format/formatGroup.js
+611,d3/d3-format/formatPrefixAuto.js
+458,d3/d3-format/formatRounded.js
+1589,d3/d3-format/formatSpecifier.js
+846,d3/d3-format/formatTypes.js
+5247,d3/d3-format/locale.js
+119,d3/d3-format/precisionFixed.js
+190,d3/d3-format/precisionPrefix.js
+186,d3/d3-format/precisionRound.js
+906,d3/d3-geo/adder.js
+1958,d3/d3-geo/area.js
+5361,d3/d3-geo/bounds.js
+929,d3/d3-geo/cartesian.js
+3816,d3/d3-geo/centroid.js
+2373,d3/d3-geo/circle.js
+2897,d3/d3-geo/clip/antimeridian.js
+470,d3/d3-geo/clip/buffer.js
+5956,d3/d3-geo/clip/circle.js
+5527,d3/d3-geo/clip/extent.js
+3813,d3/d3-geo/clip/index.js
+1099,d3/d3-geo/clip/line.js
+2802,d3/d3-geo/clip/polygon.js
+250,d3/d3-geo/compose.js
+72,d3/d3-geo/constant.js
+229,d3/d3-geo/distance.js
+3034,d3/d3-geo/graticule.js
+43,d3/d3-geo/identity.js
+911,d3/d3-geo/interpolate.js
+1309,d3/d3-geo/length.js
+880,d3/d3-geo/math.js
+34,d3/d3-geo/noop.js
+945,d3/d3-geo/path/area.js
+485,d3/d3-geo/path/bounds.js
+2033,d3/d3-geo/path/centroid.js
+914,d3/d3-geo/path/context.js
+1690,d3/d3-geo/path/index.js
+1149,d3/d3-geo/path/string.js
+139,d3/d3-geo/pointEqual.js
+2491,d3/d3-geo/polygonContains.js
+235,d3/d3-geo/projection/albers.js
+3986,d3/d3-geo/projection/albersUsa.js
+502,d3/d3-geo/projection/azimuthal.js
+447,d3/d3-geo/projection/azimuthalEqualArea.js
+443,d3/d3-geo/projection/azimuthalEquidistant.js
+402,d3/d3-geo/projection/conic.js
+1017,d3/d3-geo/projection/conicConformal.js
+871,d3/d3-geo/projection/conicEqualArea.js
+771,d3/d3-geo/projection/conicEquidistant.js
+314,d3/d3-geo/projection/cylindricalEqualArea.js
+253,d3/d3-geo/projection/equirectangular.js
+910,d3/d3-geo/projection/fit.js
+387,d3/d3-geo/projection/gnomonic.js
+1922,d3/d3-geo/projection/identity.js
+3752,d3/d3-geo/projection/index.js
+1119,d3/d3-geo/projection/mercator.js
+376,d3/d3-geo/projection/orthographic.js
+3275,d3/d3-geo/projection/resample.js
+436,d3/d3-geo/projection/stereographic.js
+762,d3/d3-geo/projection/transverseMercator.js
+2509,d3/d3-geo/rotation.js
+2305,d3/d3-geo/stream.js
+701,d3/d3-geo/transform.js
+166,d3/d3-hierarchy/accessors.js
+2093,d3/d3-hierarchy/cluster.js
+120,d3/d3-hierarchy/constant.js
+138,d3/d3-hierarchy/hierarchy/ancestors.js
+121,d3/d3-hierarchy/hierarchy/descendants.js
+381,d3/d3-hierarchy/hierarchy/each.js
+353,d3/d3-hierarchy/hierarchy/eachAfter.js
+282,d3/d3-hierarchy/hierarchy/eachBefore.js
+1819,d3/d3-hierarchy/hierarchy/index.js
+164,d3/d3-hierarchy/hierarchy/leaves.js
+246,d3/d3-hierarchy/hierarchy/links.js
+606,d3/d3-hierarchy/hierarchy/path.js
+151,d3/d3-hierarchy/hierarchy/sort.js
+264,d3/d3-hierarchy/hierarchy/sum.js
+2452,d3/d3-hierarchy/pack/enclose.js
+1917,d3/d3-hierarchy/pack/index.js
+389,d3/d3-hierarchy/pack/shuffle.js
+3497,d3/d3-hierarchy/pack/siblings.js
+1266,d3/d3-hierarchy/partition.js
+1934,d3/d3-hierarchy/stratify.js
+7060,d3/d3-hierarchy/tree.js
+1184,d3/d3-hierarchy/treemap/binary.js
+309,d3/d3-hierarchy/treemap/dice.js
+2810,d3/d3-hierarchy/treemap/index.js
+1029,d3/d3-hierarchy/treemap/resquarify.js
+166,d3/d3-hierarchy/treemap/round.js
+309,d3/d3-hierarchy/treemap/slice.js
+170,d3/d3-hierarchy/treemap/sliceDice.js
+1868,d3/d3-hierarchy/treemap/squarify.js
+372,d3/d3-interpolate/array.js
+600,d3/d3-interpolate/basis.js
+360,d3/d3-interpolate/basisClosed.js
+697,d3/d3-interpolate/color.js
+72,d3/d3-interpolate/constant.js
+760,d3/d3-interpolate/cubehelix.js
+134,d3/d3-interpolate/date.js
+547,d3/d3-interpolate/hcl.js
+547,d3/d3-interpolate/hsl.js
+447,d3/d3-interpolate/lab.js
+100,d3/d3-interpolate/number.js
+390,d3/d3-interpolate/object.js
+163,d3/d3-interpolate/quantize.js
+1277,d3/d3-interpolate/rgb.js
+112,d3/d3-interpolate/round.js
+1758,d3/d3-interpolate/string.js
+672,d3/d3-interpolate/transform/decompose.js
+2064,d3/d3-interpolate/transform/index.js
+980,d3/d3-interpolate/transform/parse.js
+598,d3/d3-interpolate/value.js
+1387,d3/d3-interpolate/zoom.js
+4089,d3/d3-path/path.js
+243,d3/d3-polygon/area.js
+346,d3/d3-polygon/centroid.js
+411,d3/d3-polygon/contains.js
+402,d3/d3-polygon/cross.js
+1710,d3/d3-polygon/hull.js
+375,d3/d3-polygon/length.js
+2441,d3/d3-quadtree/add.js
+1667,d3/d3-quadtree/cover.js
+170,d3/d3-quadtree/data.js
+206,d3/d3-quadtree/extent.js
+1696,d3/d3-quadtree/find.js
+134,d3/d3-quadtree/quad.js
+2077,d3/d3-quadtree/quadtree.js
+1898,d3/d3-quadtree/remove.js
+51,d3/d3-quadtree/root.js
+155,d3/d3-quadtree/size.js
+695,d3/d3-quadtree/visit.js
+773,d3/d3-quadtree/visitAfter.js
+138,d3/d3-quadtree/x.js
+138,d3/d3-quadtree/y.js
+29,d3/d3-queue/array.js
+2870,d3/d3-queue/queue.js
+168,d3/d3-random/bates.js
+113,d3/d3-random/exponential.js
+137,d3/d3-random/irwinHall.js
+178,d3/d3-random/logNormal.js
+503,d3/d3-random/normal.js
+236,d3/d3-random/uniform.js
+101,d3/d3-request/csv.js
+517,d3/d3-request/dsv.js
+157,d3/d3-request/html.js
+127,d3/d3-request/json.js
+4593,d3/d3-request/request.js
+109,d3/d3-request/text.js
+118,d3/d3-request/tsv.js
+370,d3/d3-request/type.js
+174,d3/d3-request/xml.js
+90,d3/d3-scale/array.js
+2637,d3/d3-scale/band.js
+119,d3/d3-scale/category10.js
+179,d3/d3-scale/category20.js
+179,d3/d3-scale/category20b.js
+179,d3/d3-scale/category20c.js
+101,d3/d3-scale/colors.js
+72,d3/d3-scale/constant.js
+3328,d3/d3-scale/continuous.js
+188,d3/d3-scale/cubehelix.js
+463,d3/d3-scale/identity.js
+1206,d3/d3-scale/linear.js
+3273,d3/d3-scale/log.js
+340,d3/d3-scale/nice.js
+44,d3/d3-scale/number.js
+1116,d3/d3-scale/ordinal.js
+1000,d3/d3-scale/pow.js
+1280,d3/d3-scale/quantile.js
+1066,d3/d3-scale/quantize.js
+536,d3/d3-scale/rainbow.js
+717,d3/d3-scale/sequential.js
+802,d3/d3-scale/threshold.js
+1203,d3/d3-scale/tickFormat.js
+4565,d3/d3-scale/time.js
+379,d3/d3-scale/utcTime.js
+6471,d3/d3-scale/viridis.js
+72,d3/d3-selection/constant.js
+662,d3/d3-selection/creator.js
+536,d3/d3-selection/local.js
+533,d3/d3-selection/matcher.js
+224,d3/d3-selection/mouse.js
+303,d3/d3-selection/namespace.js
+254,d3/d3-selection/namespaces.js
+448,d3/d3-selection/point.js
+259,d3/d3-selection/select.js
+282,d3/d3-selection/selectAll.js
+235,d3/d3-selection/selection/append.js
+1460,d3/d3-selection/selection/attr.js
+134,d3/d3-selection/selection/call.js
+1740,d3/d3-selection/selection/classed.js
+3597,d3/d3-selection/selection/data.js
+132,d3/d3-selection/selection/datum.js
+869,d3/d3-selection/selection/dispatch.js
+289,d3/d3-selection/selection/each.js
+53,d3/d3-selection/selection/empty.js
+792,d3/d3-selection/selection/enter.js
+176,d3/d3-selection/selection/exit.js
+546,d3/d3-selection/selection/filter.js
+520,d3/d3-selection/selection/html.js
+2216,d3/d3-selection/selection/index.js
+468,d3/d3-selection/selection/insert.js
+171,d3/d3-selection/selection/lower.js
+575,d3/d3-selection/selection/merge.js
+258,d3/d3-selection/selection/node.js
+140,d3/d3-selection/selection/nodes.js
+3119,d3/d3-selection/selection/on.js
+367,d3/d3-selection/selection/order.js
+617,d3/d3-selection/selection/property.js
+138,d3/d3-selection/selection/raise.js
+153,d3/d3-selection/selection/remove.js
+653,d3/d3-selection/selection/select.js
+550,d3/d3-selection/selection/selectAll.js
+98,d3/d3-selection/selection/size.js
+681,d3/d3-selection/selection/sort.js
+71,d3/d3-selection/selection/sparse.js
+889,d3/d3-selection/selection/style.js
+528,d3/d3-selection/selection/text.js
+152,d3/d3-selection/selector.js
+171,d3/d3-selection/selectorAll.js
+175,d3/d3-selection/sourceEvent.js
+407,d3/d3-selection/touch.js
+323,d3/d3-selection/touches.js
+218,d3/d3-selection/window.js
+8831,d3/d3-shape/arc.js
+2917,d3/d3-shape/area.js
+42,d3/d3-shape/array.js
+81,d3/d3-shape/constant.js
+1436,d3/d3-shape/curve/basis.js
+1530,d3/d3-shape/curve/basisClosed.js
+1069,d3/d3-shape/curve/basisOpen.js
+1081,d3/d3-shape/curve/bundle.js
+1633,d3/d3-shape/curve/cardinal.js
+1605,d3/d3-shape/curve/cardinalClosed.js
+1288,d3/d3-shape/curve/cardinalOpen.js
+2637,d3/d3-shape/curve/catmullRom.js
+2083,d3/d3-shape/curve/catmullRomClosed.js
+1760,d3/d3-shape/curve/catmullRomOpen.js
+738,d3/d3-shape/curve/linear.js
+514,d3/d3-shape/curve/linearClosed.js
+3203,d3/d3-shape/curve/monotone.js
+1761,d3/d3-shape/curve/natural.js
+655,d3/d3-shape/curve/radial.js
+1367,d3/d3-shape/curve/step.js
+86,d3/d3-shape/descending.js
+43,d3/d3-shape/identity.js
+1516,d3/d3-shape/line.js
+106,d3/d3-shape/math.js
+29,d3/d3-shape/noop.js
+319,d3/d3-shape/offset/expand.js
+310,d3/d3-shape/offset/none.js
+314,d3/d3-shape/offset/silhouette.js
+740,d3/d3-shape/offset/wiggle.js
+305,d3/d3-shape/order/ascending.js
+112,d3/d3-shape/order/descending.js
+545,d3/d3-shape/order/insideOut.js
+120,d3/d3-shape/order/none.js
+97,d3/d3-shape/order/reverse.js
+2336,d3/d3-shape/pie.js
+81,d3/d3-shape/point.js
+934,d3/d3-shape/radialArea.js
+396,d3/d3-shape/radialLine.js
+1432,d3/d3-shape/stack.js
+186,d3/d3-shape/symbol/circle.js
+476,d3/d3-shape/symbol/cross.js
+307,d3/d3-shape/symbol/diamond.js
+137,d3/d3-shape/symbol/square.js
+609,d3/d3-shape/symbol/star.js
+255,d3/d3-shape/symbol/triangle.js
+733,d3/d3-shape/symbol/wye.js
+1160,d3/d3-shape/symbol.js
+867,d3/d3-time-format/defaultLocale.js
+284,d3/d3-time-format/isoFormat.js
+319,d3/d3-time-format/isoParse.js
+13876,d3/d3-time-format/locale.js
+462,d3/d3-time/day.js
+164,d3/d3-time/duration.js
+569,d3/d3-time/hour.js
+1845,d3/d3-time/interval.js
+668,d3/d3-time/millisecond.js
+437,d3/d3-time/minute.js
+414,d3/d3-time/month.js
+440,d3/d3-time/second.js
+397,d3/d3-time/utcDay.js
+399,d3/d3-time/utcHour.js
+412,d3/d3-time/utcMinute.js
+453,d3/d3-time/utcMonth.js
+979,d3/d3-time/utcWeek.js
+808,d3/d3-time/utcYear.js
+963,d3/d3-time/week.js
+754,d3/d3-time/year.js
+400,d3/d3-timer/interval.js
+250,d3/d3-timer/timeout.js
+2771,d3/d3-timer/timer.js
+484,d3/d3-transition/active.js
+665,d3/d3-transition/interrupt.js
+245,d3/d3-transition/selection/index.js
+138,d3/d3-transition/selection/interrupt.js
+1090,d3/d3-transition/selection/transition.js
+2473,d3/d3-transition/transition/attr.js
+904,d3/d3-transition/transition/attrTween.js
+510,d3/d3-transition/transition/delay.js
+528,d3/d3-transition/transition/duration.js
+348,d3/d3-transition/transition/ease.js
+574,d3/d3-transition/transition/filter.js
+1892,d3/d3-transition/transition/index.js
+340,d3/d3-transition/transition/interpolate.js
+653,d3/d3-transition/transition/merge.js
+853,d3/d3-transition/transition/on.js
+284,d3/d3-transition/transition/remove.js
+4792,d3/d3-transition/transition/schedule.js
+826,d3/d3-transition/transition/select.js
+883,d3/d3-transition/transition/selectAll.js
+174,d3/d3-transition/transition/selection.js
+2119,d3/d3-transition/transition/style.js
+607,d3/d3-transition/transition/styleTween.js
+473,d3/d3-transition/transition/text.js
+691,d3/d3-transition/transition/transition.js
+2026,d3/d3-transition/transition/tween.js
+4381,d3/d3-voronoi/Beach.js
+4087,d3/d3-voronoi/Cell.js
+1632,d3/d3-voronoi/Circle.js
+72,d3/d3-voronoi/constant.js
+3415,d3/d3-voronoi/Diagram.js
+3634,d3/d3-voronoi/Edge.js
+81,d3/d3-voronoi/point.js
+5302,d3/d3-voronoi/RedBlackTree.js
+1420,d3/d3-voronoi/voronoi.js
+72,d3/d3-zoom/constant.js
+137,d3/d3-zoom/event.js
+202,d3/d3-zoom/noevent.js
+1336,d3/d3-zoom/transform.js
+12133,d3/d3-zoom/zoom.js
--- a/VISUALIZACION/node_modules/3d-force-graph/example/datasets/miserables.json
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/datasets/miserables.json
@ -0,0 +1,337 @@
+{
+  "nodes": [
+    {"id": "Myriel", "group": 1},
+    {"id": "Napoleon", "group": 1},
+    {"id": "Mlle.Baptistine", "group": 1},
+    {"id": "Mme.Magloire", "group": 1},
+    {"id": "CountessdeLo", "group": 1},
+    {"id": "Geborand", "group": 1},
+    {"id": "Champtercier", "group": 1},
+    {"id": "Cravatte", "group": 1},
+    {"id": "Count", "group": 1},
+    {"id": "OldMan", "group": 1},
+    {"id": "Labarre", "group": 2},
+    {"id": "Valjean", "group": 2},
+    {"id": "Marguerite", "group": 3},
+    {"id": "Mme.deR", "group": 2},
+    {"id": "Isabeau", "group": 2},
+    {"id": "Gervais", "group": 2},
+    {"id": "Tholomyes", "group": 3},
+    {"id": "Listolier", "group": 3},
+    {"id": "Fameuil", "group": 3},
+    {"id": "Blacheville", "group": 3},
+    {"id": "Favourite", "group": 3},
+    {"id": "Dahlia", "group": 3},
+    {"id": "Zephine", "group": 3},
+    {"id": "Fantine", "group": 3},
+    {"id": "Mme.Thenardier", "group": 4},
+    {"id": "Thenardier", "group": 4},
+    {"id": "Cosette", "group": 5},
+    {"id": "Javert", "group": 4},
+    {"id": "Fauchelevent", "group": 0},
+    {"id": "Bamatabois", "group": 2},
+    {"id": "Perpetue", "group": 3},
+    {"id": "Simplice", "group": 2},
+    {"id": "Scaufflaire", "group": 2},
+    {"id": "Woman1", "group": 2},
+    {"id": "Judge", "group": 2},
+    {"id": "Champmathieu", "group": 2},
+    {"id": "Brevet", "group": 2},
+    {"id": "Chenildieu", "group": 2},
+    {"id": "Cochepaille", "group": 2},
+    {"id": "Pontmercy", "group": 4},
+    {"id": "Boulatruelle", "group": 6},
+    {"id": "Eponine", "group": 4},
+    {"id": "Anzelma", "group": 4},
+    {"id": "Woman2", "group": 5},
+    {"id": "MotherInnocent", "group": 0},
+    {"id": "Gribier", "group": 0},
+    {"id": "Jondrette", "group": 7},
+    {"id": "Mme.Burgon", "group": 7},
+    {"id": "Gavroche", "group": 8},
+    {"id": "Gillenormand", "group": 5},
+    {"id": "Magnon", "group": 5},
+    {"id": "Mlle.Gillenormand", "group": 5},
+    {"id": "Mme.Pontmercy", "group": 5},
+    {"id": "Mlle.Vaubois", "group": 5},
+    {"id": "Lt.Gillenormand", "group": 5},
+    {"id": "Marius", "group": 8},
+    {"id": "BaronessT", "group": 5},
+    {"id": "Mabeuf", "group": 8},
+    {"id": "Enjolras", "group": 8},
+    {"id": "Combeferre", "group": 8},
+    {"id": "Prouvaire", "group": 8},
+    {"id": "Feuilly", "group": 8},
+    {"id": "Courfeyrac", "group": 8},
+    {"id": "Bahorel", "group": 8},
+    {"id": "Bossuet", "group": 8},
+    {"id": "Joly", "group": 8},
+    {"id": "Grantaire", "group": 8},
+    {"id": "MotherPlutarch", "group": 9},
+    {"id": "Gueulemer", "group": 4},
+    {"id": "Babet", "group": 4},
+    {"id": "Claquesous", "group": 4},
+    {"id": "Montparnasse", "group": 4},
+    {"id": "Toussaint", "group": 5},
+    {"id": "Child1", "group": 10},
+    {"id": "Child2", "group": 10},
+    {"id": "Brujon", "group": 4},
+    {"id": "Mme.Hucheloup", "group": 8}
+  ],
+  "links": [
+    {"source": "Napoleon", "target": "Myriel", "value": 1},
+    {"source": "Mlle.Baptistine", "target": "Myriel", "value": 8},
+    {"source": "Mme.Magloire", "target": "Myriel", "value": 10},
+    {"source": "Mme.Magloire", "target": "Mlle.Baptistine", "value": 6},
+    {"source": "CountessdeLo", "target": "Myriel", "value": 1},
+    {"source": "Geborand", "target": "Myriel", "value": 1},
+    {"source": "Champtercier", "target": "Myriel", "value": 1},
+    {"source": "Cravatte", "target": "Myriel", "value": 1},
+    {"source": "Count", "target": "Myriel", "value": 2},
+    {"source": "OldMan", "target": "Myriel", "value": 1},
+    {"source": "Valjean", "target": "Labarre", "value": 1},
+    {"source": "Valjean", "target": "Mme.Magloire", "value": 3},
+    {"source": "Valjean", "target": "Mlle.Baptistine", "value": 3},
+    {"source": "Valjean", "target": "Myriel", "value": 5},
+    {"source": "Marguerite", "target": "Valjean", "value": 1},
+    {"source": "Mme.deR", "target": "Valjean", "value": 1},
+    {"source": "Isabeau", "target": "Valjean", "value": 1},
+    {"source": "Gervais", "target": "Valjean", "value": 1},
+    {"source": "Listolier", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Tholomyes", "value": 4},
+    {"source": "Fameuil", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Tholomyes", "value": 4},
+    {"source": "Blacheville", "target": "Listolier", "value": 4},
+    {"source": "Blacheville", "target": "Fameuil", "value": 4},
+    {"source": "Favourite", "target": "Tholomyes", "value": 3},
+    {"source": "Favourite", "target": "Listolier", "value": 3},
+    {"source": "Favourite", "target": "Fameuil", "value": 3},
+    {"source": "Favourite", "target": "Blacheville", "value": 4},
+    {"source": "Dahlia", "target": "Tholomyes", "value": 3},
+    {"source": "Dahlia", "target": "Listolier", "value": 3},
+    {"source": "Dahlia", "target": "Fameuil", "value": 3},
+    {"source": "Dahlia", "target": "Blacheville", "value": 3},
+    {"source": "Dahlia", "target": "Favourite", "value": 5},
+    {"source": "Zephine", "target": "Tholomyes", "value": 3},
+    {"source": "Zephine", "target": "Listolier", "value": 3},
+    {"source": "Zephine", "target": "Fameuil", "value": 3},
+    {"source": "Zephine", "target": "Blacheville", "value": 3},
+    {"source": "Zephine", "target": "Favourite", "value": 4},
+    {"source": "Zephine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Tholomyes", "value": 3},
+    {"source": "Fantine", "target": "Listolier", "value": 3},
+    {"source": "Fantine", "target": "Fameuil", "value": 3},
+    {"source": "Fantine", "target": "Blacheville", "value": 3},
+    {"source": "Fantine", "target": "Favourite", "value": 4},
+    {"source": "Fantine", "target": "Dahlia", "value": 4},
+    {"source": "Fantine", "target": "Zephine", "value": 4},
+    {"source": "Fantine", "target": "Marguerite", "value": 2},
+    {"source": "Fantine", "target": "Valjean", "value": 9},
+    {"source": "Mme.Thenardier", "target": "Fantine", "value": 2},
+    {"source": "Mme.Thenardier", "target": "Valjean", "value": 7},
+    {"source": "Thenardier", "target": "Mme.Thenardier", "value": 13},
+    {"source": "Thenardier", "target": "Fantine", "value": 1},
+    {"source": "Thenardier", "target": "Valjean", "value": 12},
+    {"source": "Cosette", "target": "Mme.Thenardier", "value": 4},
+    {"source": "Cosette", "target": "Valjean", "value": 31},
+    {"source": "Cosette", "target": "Tholomyes", "value": 1},
+    {"source": "Cosette", "target": "Thenardier", "value": 1},
+    {"source": "Javert", "target": "Valjean", "value": 17},
+    {"source": "Javert", "target": "Fantine", "value": 5},
+    {"source": "Javert", "target": "Thenardier", "value": 5},
+    {"source": "Javert", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Javert", "target": "Cosette", "value": 1},
+    {"source": "Fauchelevent", "target": "Valjean", "value": 8},
+    {"source": "Fauchelevent", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Fantine", "value": 1},
+    {"source": "Bamatabois", "target": "Javert", "value": 1},
+    {"source": "Bamatabois", "target": "Valjean", "value": 2},
+    {"source": "Perpetue", "target": "Fantine", "value": 1},
+    {"source": "Simplice", "target": "Perpetue", "value": 2},
+    {"source": "Simplice", "target": "Valjean", "value": 3},
+    {"source": "Simplice", "target": "Fantine", "value": 2},
+    {"source": "Simplice", "target": "Javert", "value": 1},
+    {"source": "Scaufflaire", "target": "Valjean", "value": 1},
+    {"source": "Woman1", "target": "Valjean", "value": 2},
+    {"source": "Woman1", "target": "Javert", "value": 1},
+    {"source": "Judge", "target": "Valjean", "value": 3},
+    {"source": "Judge", "target": "Bamatabois", "value": 2},
+    {"source": "Champmathieu", "target": "Valjean", "value": 3},
+    {"source": "Champmathieu", "target": "Judge", "value": 3},
+    {"source": "Champmathieu", "target": "Bamatabois", "value": 2},
+    {"source": "Brevet", "target": "Judge", "value": 2},
+    {"source": "Brevet", "target": "Champmathieu", "value": 2},
+    {"source": "Brevet", "target": "Valjean", "value": 2},
+    {"source": "Brevet", "target": "Bamatabois", "value": 1},
+    {"source": "Chenildieu", "target": "Judge", "value": 2},
+    {"source": "Chenildieu", "target": "Champmathieu", "value": 2},
+    {"source": "Chenildieu", "target": "Brevet", "value": 2},
+    {"source": "Chenildieu", "target": "Valjean", "value": 2},
+    {"source": "Chenildieu", "target": "Bamatabois", "value": 1},
+    {"source": "Cochepaille", "target": "Judge", "value": 2},
+    {"source": "Cochepaille", "target": "Champmathieu", "value": 2},
+    {"source": "Cochepaille", "target": "Brevet", "value": 2},
+    {"source": "Cochepaille", "target": "Chenildieu", "value": 2},
+    {"source": "Cochepaille", "target": "Valjean", "value": 2},
+    {"source": "Cochepaille", "target": "Bamatabois", "value": 1},
+    {"source": "Pontmercy", "target": "Thenardier", "value": 1},
+    {"source": "Boulatruelle", "target": "Thenardier", "value": 1},
+    {"source": "Eponine", "target": "Mme.Thenardier", "value": 2},
+    {"source": "Eponine", "target": "Thenardier", "value": 3},
+    {"source": "Anzelma", "target": "Eponine", "value": 2},
+    {"source": "Anzelma", "target": "Thenardier", "value": 2},
+    {"source": "Anzelma", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Woman2", "target": "Valjean", "value": 3},
+    {"source": "Woman2", "target": "Cosette", "value": 1},
+    {"source": "Woman2", "target": "Javert", "value": 1},
+    {"source": "MotherInnocent", "target": "Fauchelevent", "value": 3},
+    {"source": "MotherInnocent", "target": "Valjean", "value": 1},
+    {"source": "Gribier", "target": "Fauchelevent", "value": 2},
+    {"source": "Mme.Burgon", "target": "Jondrette", "value": 1},
+    {"source": "Gavroche", "target": "Mme.Burgon", "value": 2},
+    {"source": "Gavroche", "target": "Thenardier", "value": 1},
+    {"source": "Gavroche", "target": "Javert", "value": 1},
+    {"source": "Gavroche", "target": "Valjean", "value": 1},
+    {"source": "Gillenormand", "target": "Cosette", "value": 3},
+    {"source": "Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Magnon", "target": "Gillenormand", "value": 1},
+    {"source": "Magnon", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Mlle.Gillenormand", "target": "Gillenormand", "value": 9},
+    {"source": "Mlle.Gillenormand", "target": "Cosette", "value": 2},
+    {"source": "Mlle.Gillenormand", "target": "Valjean", "value": 2},
+    {"source": "Mme.Pontmercy", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Mme.Pontmercy", "target": "Pontmercy", "value": 1},
+    {"source": "Mlle.Vaubois", "target": "Mlle.Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Mlle.Gillenormand", "value": 2},
+    {"source": "Lt.Gillenormand", "target": "Gillenormand", "value": 1},
+    {"source": "Lt.Gillenormand", "target": "Cosette", "value": 1},
+    {"source": "Marius", "target": "Mlle.Gillenormand", "value": 6},
+    {"source": "Marius", "target": "Gillenormand", "value": 12},
+    {"source": "Marius", "target": "Pontmercy", "value": 1},
+    {"source": "Marius", "target": "Lt.Gillenormand", "value": 1},
+    {"source": "Marius", "target": "Cosette", "value": 21},
+    {"source": "Marius", "target": "Valjean", "value": 19},
+    {"source": "Marius", "target": "Tholomyes", "value": 1},
+    {"source": "Marius", "target": "Thenardier", "value": 2},
+    {"source": "Marius", "target": "Eponine", "value": 5},
+    {"source": "Marius", "target": "Gavroche", "value": 4},
+    {"source": "BaronessT", "target": "Gillenormand", "value": 1},
+    {"source": "BaronessT", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Marius", "value": 1},
+    {"source": "Mabeuf", "target": "Eponine", "value": 1},
+    {"source": "Mabeuf", "target": "Gavroche", "value": 1},
+    {"source": "Enjolras", "target": "Marius", "value": 7},
+    {"source": "Enjolras", "target": "Gavroche", "value": 7},
+    {"source": "Enjolras", "target": "Javert", "value": 6},
+    {"source": "Enjolras", "target": "Mabeuf", "value": 1},
+    {"source": "Enjolras", "target": "Valjean", "value": 4},
+    {"source": "Combeferre", "target": "Enjolras", "value": 15},
+    {"source": "Combeferre", "target": "Marius", "value": 5},
+    {"source": "Combeferre", "target": "Gavroche", "value": 6},
+    {"source": "Combeferre", "target": "Mabeuf", "value": 2},
+    {"source": "Prouvaire", "target": "Gavroche", "value": 1},
+    {"source": "Prouvaire", "target": "Enjolras", "value": 4},
+    {"source": "Prouvaire", "target": "Combeferre", "value": 2},
+    {"source": "Feuilly", "target": "Gavroche", "value": 2},
+    {"source": "Feuilly", "target": "Enjolras", "value": 6},
+    {"source": "Feuilly", "target": "Prouvaire", "value": 2},
+    {"source": "Feuilly", "target": "Combeferre", "value": 5},
+    {"source": "Feuilly", "target": "Mabeuf", "value": 1},
+    {"source": "Feuilly", "target": "Marius", "value": 1},
+    {"source": "Courfeyrac", "target": "Marius", "value": 9},
+    {"source": "Courfeyrac", "target": "Enjolras", "value": 17},
+    {"source": "Courfeyrac", "target": "Combeferre", "value": 13},
+    {"source": "Courfeyrac", "target": "Gavroche", "value": 7},
+    {"source": "Courfeyrac", "target": "Mabeuf", "value": 2},
+    {"source": "Courfeyrac", "target": "Eponine", "value": 1},
+    {"source": "Courfeyrac", "target": "Feuilly", "value": 6},
+    {"source": "Courfeyrac", "target": "Prouvaire", "value": 3},
+    {"source": "Bahorel", "target": "Combeferre", "value": 5},
+    {"source": "Bahorel", "target": "Gavroche", "value": 5},
+    {"source": "Bahorel", "target": "Courfeyrac", "value": 6},
+    {"source": "Bahorel", "target": "Mabeuf", "value": 2},
+    {"source": "Bahorel", "target": "Enjolras", "value": 4},
+    {"source": "Bahorel", "target": "Feuilly", "value": 3},
+    {"source": "Bahorel", "target": "Prouvaire", "value": 2},
+    {"source": "Bahorel", "target": "Marius", "value": 1},
+    {"source": "Bossuet", "target": "Marius", "value": 5},
+    {"source": "Bossuet", "target": "Courfeyrac", "value": 12},
+    {"source": "Bossuet", "target": "Gavroche", "value": 5},
+    {"source": "Bossuet", "target": "Bahorel", "value": 4},
+    {"source": "Bossuet", "target": "Enjolras", "value": 10},
+    {"source": "Bossuet", "target": "Feuilly", "value": 6},
+    {"source": "Bossuet", "target": "Prouvaire", "value": 2},
+    {"source": "Bossuet", "target": "Combeferre", "value": 9},
+    {"source": "Bossuet", "target": "Mabeuf", "value": 1},
+    {"source": "Bossuet", "target": "Valjean", "value": 1},
+    {"source": "Joly", "target": "Bahorel", "value": 5},
+    {"source": "Joly", "target": "Bossuet", "value": 7},
+    {"source": "Joly", "target": "Gavroche", "value": 3},
+    {"source": "Joly", "target": "Courfeyrac", "value": 5},
+    {"source": "Joly", "target": "Enjolras", "value": 5},
+    {"source": "Joly", "target": "Feuilly", "value": 5},
+    {"source": "Joly", "target": "Prouvaire", "value": 2},
+    {"source": "Joly", "target": "Combeferre", "value": 5},
+    {"source": "Joly", "target": "Mabeuf", "value": 1},
+    {"source": "Joly", "target": "Marius", "value": 2},
+    {"source": "Grantaire", "target": "Bossuet", "value": 3},
+    {"source": "Grantaire", "target": "Enjolras", "value": 3},
+    {"source": "Grantaire", "target": "Combeferre", "value": 1},
+    {"source": "Grantaire", "target": "Courfeyrac", "value": 2},
+    {"source": "Grantaire", "target": "Joly", "value": 2},
+    {"source": "Grantaire", "target": "Gavroche", "value": 1},
+    {"source": "Grantaire", "target": "Bahorel", "value": 1},
+    {"source": "Grantaire", "target": "Feuilly", "value": 1},
+    {"source": "Grantaire", "target": "Prouvaire", "value": 1},
+    {"source": "MotherPlutarch", "target": "Mabeuf", "value": 3},
+    {"source": "Gueulemer", "target": "Thenardier", "value": 5},
+    {"source": "Gueulemer", "target": "Valjean", "value": 1},
+    {"source": "Gueulemer", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Gueulemer", "target": "Javert", "value": 1},
+    {"source": "Gueulemer", "target": "Gavroche", "value": 1},
+    {"source": "Gueulemer", "target": "Eponine", "value": 1},
+    {"source": "Babet", "target": "Thenardier", "value": 6},
+    {"source": "Babet", "target": "Gueulemer", "value": 6},
+    {"source": "Babet", "target": "Valjean", "value": 1},
+    {"source": "Babet", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Babet", "target": "Javert", "value": 2},
+    {"source": "Babet", "target": "Gavroche", "value": 1},
+    {"source": "Babet", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Thenardier", "value": 4},
+    {"source": "Claquesous", "target": "Babet", "value": 4},
+    {"source": "Claquesous", "target": "Gueulemer", "value": 4},
+    {"source": "Claquesous", "target": "Valjean", "value": 1},
+    {"source": "Claquesous", "target": "Mme.Thenardier", "value": 1},
+    {"source": "Claquesous", "target": "Javert", "value": 1},
+    {"source": "Claquesous", "target": "Eponine", "value": 1},
+    {"source": "Claquesous", "target": "Enjolras", "value": 1},
+    {"source": "Montparnasse", "target": "Javert", "value": 1},
+    {"source": "Montparnasse", "target": "Babet", "value": 2},
+    {"source": "Montparnasse", "target": "Gueulemer", "value": 2},
+    {"source": "Montparnasse", "target": "Claquesous", "value": 2},
+    {"source": "Montparnasse", "target": "Valjean", "value": 1},
+    {"source": "Montparnasse", "target": "Gavroche", "value": 1},
+    {"source": "Montparnasse", "target": "Eponine", "value": 1},
+    {"source": "Montparnasse", "target": "Thenardier", "value": 1},
+    {"source": "Toussaint", "target": "Cosette", "value": 2},
+    {"source": "Toussaint", "target": "Javert", "value": 1},
+    {"source": "Toussaint", "target": "Valjean", "value": 1},
+    {"source": "Child1", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Gavroche", "value": 2},
+    {"source": "Child2", "target": "Child1", "value": 3},
+    {"source": "Brujon", "target": "Babet", "value": 3},
+    {"source": "Brujon", "target": "Gueulemer", "value": 3},
+    {"source": "Brujon", "target": "Thenardier", "value": 3},
+    {"source": "Brujon", "target": "Gavroche", "value": 1},
+    {"source": "Brujon", "target": "Eponine", "value": 1},
+    {"source": "Brujon", "target": "Claquesous", "value": 1},
+    {"source": "Brujon", "target": "Montparnasse", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bossuet", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Joly", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Grantaire", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Bahorel", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Courfeyrac", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Gavroche", "value": 1},
+    {"source": "Mme.Hucheloup", "target": "Enjolras", "value": 1}
+  ]
+}
--- a/VISUALIZACION/node_modules/3d-force-graph/example/directional-links-arrows/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/directional-links-arrows/index.html
@ -0,0 +1,31 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 40;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+    .filter(id => id)
+      .map(id => ({
+        source: id,
+        target: Math.round(Math.random() * (id-1))
+      }))
+    };
+
+    const Graph = ForceGraph3D()
+    (document.getElementById('3d-graph'))
+      .graphData(gData)
+      .linkDirectionalArrowLength(3.5)
+      .linkDirectionalArrowRelPos(1)
+      .linkCurvature(0.25);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/directional-links-particles/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/directional-links-particles/index.html
@ -0,0 +1,20 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .linkDirectionalParticles("value")
+        .linkDirectionalParticleSpeed(d => d.value * 0.001);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/dynamic/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/dynamic/index.html
@ -0,0 +1,43 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const initData = {
+      nodes: [ {id: 0 } ],
+      links: []
+    };
+
+    const elem = document.getElementById("3d-graph");
+
+    const Graph = ForceGraph3D()(elem)
+        .enableNodeDrag(false)
+        .onNodeClick(removeNode)
+        .graphData(initData);
+
+    setInterval(() => {
+      const { nodes, links } = Graph.graphData();
+      const id = nodes.length;
+      Graph.graphData({
+        nodes: [...nodes, { id }],
+        links: [...links, { source: id, target: Math.round(Math.random() * (id-1)) }]
+      });
+    }, 1000);
+
+    //
+
+    function removeNode(node) {
+      let { nodes, links } = Graph.graphData();
+      links = links.filter(l => l.source !== node && l.target !== node); // Remove links attached to node
+      nodes.splice(node.id, 1); // Remove node
+      nodes.forEach((n, idx) => { n.id = idx; }); // Reset node ids to array index
+      Graph.graphData({ nodes, links });
+    }
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/emit-particles/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/emit-particles/index.html
@ -0,0 +1,50 @@
+<head>
+  <style>
+    body { margin: 0; }
+
+    #emit-particles-btn {
+      position: absolute;
+      top: 10px;
+      right: 10px;
+      font-size: 13px;
+    }
+  </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+  <button id="emit-particles-btn">Emit 10 Random Particles</button>
+
+  <script>
+    // Random tree
+    const N = 50;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+    .filter(id => id)
+      .map(id => ({
+        source: id,
+        target: Math.round(Math.random() * (id-1))
+      }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+      .linkDirectionalParticleColor(() => 'red')
+      .linkDirectionalParticleWidth(4)
+      .linkHoverPrecision(10)
+      .graphData(gData);
+
+    Graph.onLinkClick(Graph.emitParticle); // emit particles on link click
+
+    document.getElementById('emit-particles-btn').addEventListener('click', () => {
+      [...Array(10).keys()].forEach(() => {
+        const link = gData.links[Math.floor(Math.random() * gData.links.length)];
+        Graph.emitParticle(link);
+      });
+    });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/expandable-nodes/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/expandable-nodes/index.html
@ -0,0 +1,65 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+
+  <style>
+    .clickable { cursor: unset !important }
+  </style>
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const rootId = 0;
+
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i, collapsed: i !== rootId, childLinks: [] })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: Math.round(Math.random() * (id - 1)),
+          target: id
+        }))
+    };
+
+    // link parent/children
+    const nodesById = Object.fromEntries(gData.nodes.map(node => [node.id, node]));
+    gData.links.forEach(link => {
+      nodesById[link.source].childLinks.push(link);
+    });
+
+    const getPrunedTree = () => {
+      const visibleNodes = [];
+      const visibleLinks = [];
+
+      (function traverseTree(node = nodesById[rootId]) {
+        visibleNodes.push(node);
+        if (node.collapsed) return;
+        visibleLinks.push(...node.childLinks);
+        node.childLinks
+          .map(link => ((typeof link.target) === 'object') ? link.target : nodesById[link.target]) // get child node
+          .forEach(traverseTree);
+      })(); // IIFE
+
+      return { nodes: visibleNodes, links: visibleLinks };
+    };
+
+    const elem = document.getElementById('3d-graph');
+    const Graph = ForceGraph3D()(elem)
+      .graphData(getPrunedTree())
+      .linkDirectionalParticles(2)
+      .nodeColor(node => !node.childLinks.length ? 'green' : node.collapsed ? 'red' : 'yellow')
+      .onNodeHover(node => elem.style.cursor = node && node.childLinks.length ? 'pointer' : null)
+      .onNodeClick(node => {
+        if (node.childLinks.length) {
+          node.collapsed = !node.collapsed; // toggle collapse state
+          Graph.graphData(getPrunedTree());
+        }
+      });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/fit-to-canvas/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/fit-to-canvas/index.html
@ -0,0 +1,32 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+<div id="3d-graph"></div>
+
+<script>
+  // Random tree
+  const N = 300;
+  const gData = {
+    nodes: [...Array(N).keys()].map(i => ({ id: i })),
+    links: [...Array(N).keys()]
+      .filter(id => id)
+      .map(id => ({
+        source: id,
+        target: Math.round(Math.random() * (id-1))
+      }))
+  };
+
+  const Graph = ForceGraph3D()
+    (document.getElementById('3d-graph'))
+      .cooldownTicks(100)
+      .graphData(gData);
+
+  // fit to canvas when engine stops
+  Graph.onEngineStop(() => Graph.zoomToFit(400));
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/fix-dragged-nodes/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/fix-dragged-nodes/index.html
@ -0,0 +1,23 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .onNodeDragEnd(node => {
+          node.fx = node.x;
+          node.fy = node.y;
+          node.fz = node.z;
+        });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/gradient-links/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/gradient-links/index.html
@ -0,0 +1,70 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/d3"></script>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
+    // Random tree
+    const N = 25;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const nodeColorScale = d3.scaleOrdinal(d3.schemeRdYlGn[4]);
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .nodeColor(node => nodeColorScale(node.id))
+        .linkThreeObject(link => {
+          // 2 (nodes) x 3 (r+g+b) bytes between [0, 1]
+          // For example:
+          // new Float32Array([
+          //   1, 0, 0,  // source node: red
+          //   0, 1, 0   // target node: green
+          // ]);
+          const colors = new Float32Array([].concat(
+            ...[link.source, link.target]
+              .map(nodeColorScale)
+              .map(d3.color)
+              .map(({ r, g, b }) => [r, g, b].map(v => v / 255)
+            )));
+
+          const material = new THREE.LineBasicMaterial({ vertexColors: true });
+          const geometry = new THREE.BufferGeometry();
+          geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
+          geometry.setAttribute('color', new THREE.BufferAttribute(colors, 3));
+
+          return new THREE.Line(geometry, material);
+        })
+        .linkPositionUpdate((line, { start, end }) => {
+          const startR = Graph.nodeRelSize();
+          const endR = Graph.nodeRelSize();
+          const lineLen = Math.sqrt(['x', 'y', 'z'].map(dim => Math.pow((end[dim] || 0) - (start[dim] || 0), 2)).reduce((acc, v) => acc + v, 0));
+
+          const linePos = line.geometry.getAttribute('position');
+
+          // calculate coordinate on the node's surface instead of center
+          linePos.set([startR / lineLen, 1 - endR / lineLen].map(t =>
+            ['x', 'y', 'z'].map(dim => start[dim] + (end[dim] - start[dim]) * t)
+          ).flat());
+          linePos.needsUpdate = true;
+          return true;
+        })
+        .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/highlight/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/highlight/index.html
@ -0,0 +1,87 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 80;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    // cross-link node objects
+    gData.links.forEach(link => {
+      const a = gData.nodes[link.source];
+      const b = gData.nodes[link.target];
+      !a.neighbors && (a.neighbors = []);
+      !b.neighbors && (b.neighbors = []);
+      a.neighbors.push(b);
+      b.neighbors.push(a);
+
+      !a.links && (a.links = []);
+      !b.links && (b.links = []);
+      a.links.push(link);
+      b.links.push(link);
+    });
+
+    const highlightNodes = new Set();
+    const highlightLinks = new Set();
+    let hoverNode = null;
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData)
+        .nodeColor(node => highlightNodes.has(node) ? node === hoverNode ? 'rgb(255,0,0,1)' : 'rgba(255,160,0,0.8)' : 'rgba(0,255,255,0.6)')
+        .linkWidth(link => highlightLinks.has(link) ? 4 : 1)
+        .linkDirectionalParticles(link => highlightLinks.has(link) ? 4 : 0)
+        .linkDirectionalParticleWidth(4)
+        .onNodeHover(node => {
+          // no state change
+          if ((!node && !highlightNodes.size) || (node && hoverNode === node)) return;
+
+          highlightNodes.clear();
+          highlightLinks.clear();
+          if (node) {
+            highlightNodes.add(node);
+            node.neighbors.forEach(neighbor => highlightNodes.add(neighbor));
+            node.links.forEach(link => highlightLinks.add(link));
+          }
+
+          hoverNode = node || null;
+
+          updateHighlight();
+        })
+        .onLinkHover(link => {
+          highlightNodes.clear();
+          highlightLinks.clear();
+
+          if (link) {
+            highlightLinks.add(link);
+            highlightNodes.add(link.source);
+            highlightNodes.add(link.target);
+          }
+
+          updateHighlight();
+        });
+
+    function updateHighlight() {
+      // trigger update of highlighted objects in scene
+      Graph
+        .nodeColor(Graph.nodeColor())
+        .linkWidth(Graph.linkWidth())
+        .linkDirectionalParticles(Graph.linkDirectionalParticles());
+    }
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/html-nodes/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/html-nodes/index.html
@ -0,0 +1,41 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+
+  <style>
+    .node-label {
+      font-size: 12px;
+      padding: 1px 4px;
+      border-radius: 4px;
+      background-color: rgba(0,0,0,0.5);
+      user-select: none;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="importmap">{ "imports": { "three": "https://unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import { CSS2DRenderer, CSS2DObject } from '//unpkg.com/three/examples/jsm/renderers/CSS2DRenderer.js';
+
+    const Graph = ForceGraph3D({
+      extraRenderers: [new CSS2DRenderer()]
+    })
+    (document.getElementById('3d-graph'))
+      .jsonUrl('../datasets/miserables.json')
+      .nodeAutoColorBy('group')
+      .nodeThreeObject(node => {
+        const nodeEl = document.createElement('div');
+        nodeEl.textContent = node.id;
+        nodeEl.style.color = node.color;
+        nodeEl.className = 'node-label';
+        return new CSS2DObject(nodeEl);
+      })
+      .nodeThreeObjectExtend(true)
+    ;
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/cat.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/cat.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/dog.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/dog.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/eagle.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/eagle.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/elephant.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/elephant.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/grasshopper.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/grasshopper.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/octopus.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/octopus.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/owl.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/owl.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/panda.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/panda.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/squirrel.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/squirrel.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/tiger.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/tiger.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/whale.jpg
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/imgs/whale.jpg
--- a/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/img-nodes/index.html
@ -0,0 +1,39 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
+    const imgs = ['cat.jpg', 'dog.jpg', 'eagle.jpg', 'elephant.jpg', 'grasshopper.jpg', 'octopus.jpg', 'owl.jpg', 'panda.jpg', 'squirrel.jpg', 'tiger.jpg', 'whale.jpg'];
+
+    // Random connected graph
+    const gData = {
+      nodes: imgs.map((img, id) => ({ id, img })),
+      links: [...Array(imgs.length).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+      .nodeThreeObject(({ img }) => {
+        const imgTexture = new THREE.TextureLoader().load(`./imgs/${img}`);
+        imgTexture.colorSpace = THREE.SRGBColorSpace;
+        const material = new THREE.SpriteMaterial({ map: imgTexture });
+        const sprite = new THREE.Sprite(material);
+        sprite.scale.set(12, 12);
+        return sprite;
+      })
+      .graphData(gData);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/large-graph/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/large-graph/index.html
@ -0,0 +1,21 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+
+  <div id="3d-graph"></div>
+
+  <script>
+    const elem = document.getElementById('3d-graph');
+
+    const Graph = ForceGraph3D()(elem)
+      .jsonUrl('../datasets/blocks.json')
+      .nodeAutoColorBy('user')
+      .nodeLabel(node => `${node.user}: ${node.description}`)
+      .onNodeClick(node => window.open(`https://bl.ocks.org/${node.user}/${node.id}`, '_blank'));
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/manipulate-link-force/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/manipulate-link-force/index.html
@ -0,0 +1,57 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/dat.gui"></script>
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!-- <script src="../../dist/3d-force-graph.js"></script> -->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Create Random tree
+    const N = 20;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1)),
+          color: id % 2
+        }))
+    };
+
+    const graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .nodeLabel(node => node.id)
+        .linkColor(link => link.color ? 'red' : 'green' )
+        .linkOpacity(1)
+        .graphData(gData);
+
+    const linkForce = graph
+      .d3Force('link')
+      .distance(link => link.color ? settings.redDistance : settings.greenDistance);
+    
+    //Define GUI
+    const Settings = function() {
+      this.redDistance = 20;
+      this.greenDistance = 20;
+    };
+
+    const settings = new Settings();
+    const gui = new dat.GUI();
+
+    const controllerOne = gui.add(settings, 'redDistance', 0, 100);
+    const controllerTwo = gui.add(settings, 'greenDistance', 0, 100);
+
+    controllerOne.onChange(updateLinkDistance);
+    controllerTwo.onChange(updateLinkDistance);
+
+    function updateLinkDistance() {
+      linkForce.distance(link => link.color ? settings.redDistance : settings.greenDistance);
+      graph.numDimensions(3); // Re-heat simulation
+    }
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/multi-selection/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/multi-selection/index.html
@ -0,0 +1,57 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 40;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    let selectedNodes = new Set();
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData)
+        .nodeRelSize(9)
+        .nodeColor(node => selectedNodes.has(node) ? 'yellow' : 'grey')
+        .onNodeClick((node, event) => {
+          if (event.ctrlKey || event.shiftKey || event.altKey) { // multi-selection
+            selectedNodes.has(node) ? selectedNodes.delete(node) : selectedNodes.add(node);
+          } else { // single-selection
+            const untoggle = selectedNodes.has(node) && selectedNodes.size === 1;
+            selectedNodes.clear();
+            !untoggle && selectedNodes.add(node);
+          }
+
+          Graph.nodeColor(Graph.nodeColor()); // update color of selected nodes
+        })
+        .onNodeDrag((node, translate) => {
+          if (selectedNodes.has(node)) { // moving a selected node
+            [...selectedNodes]
+              .filter(selNode => selNode !== node) // don't touch node being dragged
+              .forEach(node => ['x', 'y', 'z'].forEach(coord => node[`f${coord}`] = node[coord] + translate[coord])); // translate other nodes by same amount
+          }
+        })
+        .onNodeDragEnd(node => {
+          if (selectedNodes.has(node)) { // finished moving a selected node
+            [...selectedNodes]
+              .filter(selNode => selNode !== node) // don't touch node being dragged
+              .forEach(node => ['x', 'y', 'z'].forEach(coord => node[`f${coord}`] = undefined)); // unfix controlled nodes
+          }
+        });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/pause-resume/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/pause-resume/index.html
@ -0,0 +1,67 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+   <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <div style="position: absolute; top: 5px; right: 5px;">
+    <button id="animationToggle" style="margin: 8px; height: 25px; width: 150px;">
+      Pause Animation
+    </button>
+    <button id="rotationToggle" style="margin: 8px; height: 25px; width: 150px;">
+      Pause Rotation
+    </button>
+  </div>
+
+  <script>
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+    const distance = 1400;
+
+    let isRotationActive = true;
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .enableNodeDrag(false)
+        .enableNavigationControls(false)
+        .showNavInfo(false)
+        .cameraPosition({ z: distance })
+        .graphData(gData);
+    // camera orbit
+    let angle = 0;
+    setInterval(() => {
+      if (isRotationActive) {
+        Graph.cameraPosition({
+          x: distance * Math.sin(angle),
+          z: distance * Math.cos(angle)
+        });
+        angle += Math.PI / 300;
+      }
+    }, 10);
+
+    document.getElementById('rotationToggle').addEventListener('click', event => {
+      isRotationActive = !isRotationActive;
+      event.target.innerHTML = `${(isRotationActive ? 'Pause' : 'Resume')} Rotation`;
+    });
+
+    let isAnimationActive = true;
+    document.getElementById('animationToggle').addEventListener('click', event => {
+      isAnimationActive ? Graph.pauseAnimation() : Graph.resumeAnimation();
+
+      isAnimationActive = !isAnimationActive;
+      event.target.innerHTML = `${(isAnimationActive ? 'Pause' : 'Resume')} Animation`;
+    });
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/preview.png
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/preview.png
--- a/VISUALIZACION/node_modules/3d-force-graph/example/responsive/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/responsive/index.html
@ -0,0 +1,36 @@
+<head>
+  <style> body { margin: 30px; } </style>
+
+  <script src="//unpkg.com/element-resize-detector/dist/element-resize-detector.min.js"></script>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+<!--  <script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script>
+    // Random tree
+    const N = 300;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+      .height(window.innerHeight - 60)
+      .graphData(gData);
+
+    elementResizeDetectorMaker().listenTo(
+      document.getElementById('3d-graph'),
+      el => Graph.width(el.offsetWidth)
+    );
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/scene/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/scene/index.html
@ -0,0 +1,38 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!-- <script src="../../dist/3d-force-graph.js"></script> -->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="module">
+    import * as THREE from '//unpkg.com/three/build/three.module.js';
+
+    // Random tree
+    const N = 30;
+    const gData = {
+      nodes: [...Array(N).keys()].map(i => ({ id: i })),
+      links: [...Array(N).keys()]
+        .filter(id => id)
+        .map(id => ({
+          source: id,
+          target: Math.round(Math.random() * (id-1))
+        }))
+    };
+
+    const graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .graphData(gData);
+
+    const planeGeometry = new THREE.PlaneGeometry(1000, 1000, 1, 1);
+    const planeMaterial = new THREE.MeshLambertMaterial({color: 0xFF0000, side: THREE.DoubleSide});
+    const mesh = new THREE.Mesh(planeGeometry, planeMaterial);
+    mesh.position.set(-100, -200, -100);
+    mesh.rotation.set(0.5 * Math.PI, 0, 0);
+
+    graph.scene().add(mesh);
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/text-links/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/text-links/index.html
@ -0,0 +1,41 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .jsonUrl('../datasets/miserables.json')
+        .nodeLabel('id')
+        .nodeAutoColorBy('group')
+        .linkThreeObjectExtend(true)
+        .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);
+        });
+
+    // Spread nodes a little wider
+    Graph.d3Force('charge').strength(-120);
+
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/text-nodes/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/text-nodes/index.html
@ -0,0 +1,31 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="3d-graph"></div>
+
+  <script type="importmap">{ "imports": { "three": "//unpkg.com/three/build/three.module.js" }}</script>
+  <script type="module">
+    import SpriteText from "//unpkg.com/three-spritetext/dist/three-spritetext.mjs";
+
+    const Graph = ForceGraph3D()
+      (document.getElementById('3d-graph'))
+        .jsonUrl('../datasets/miserables.json')
+        .nodeAutoColorBy('group')
+        .nodeThreeObject(node => {
+          const sprite = new SpriteText(node.id);
+          sprite.material.depthWrite = false; // make sprite background transparent
+          sprite.color = node.color;
+          sprite.textHeight = 8;
+          return sprite;
+        });
+
+    // Spread nodes a little wider
+    Graph.d3Force('charge').strength(-120);
+
+  </script>
+</body>
--- a/VISUALIZACION/node_modules/3d-force-graph/example/tree/index.html
+++ b/VISUALIZACION/node_modules/3d-force-graph/example/tree/index.html
@ -0,0 +1,76 @@
+<head>
+  <style> body { margin: 0; } </style>
+
+  <script src="//unpkg.com/d3-dsv"></script>
+  <script src="//unpkg.com/dat.gui"></script>
+  <script src="//unpkg.com/d3-octree"></script>
+  <script src="//unpkg.com/d3-force-3d"></script>
+
+  <script src="//unpkg.com/3d-force-graph"></script>
+  <!--<script src="../../dist/3d-force-graph.js"></script>-->
+</head>
+
+<body>
+  <div id="graph"></div>
+
+  <script>
+    // controls
+    const controls = { 'DAG Orientation': 'td'};
+    const gui = new dat.GUI();
+    gui.add(controls, 'DAG Orientation', ['td', 'bu', 'lr', 'rl', 'zout', 'zin', 'radialout', 'radialin', null])
+      .onChange(orientation => graph && graph.dagMode(orientation));
+
+    // graph config
+    const NODE_REL_SIZE = 1;
+    const graph = ForceGraph3D()
+      .dagMode('td')
+      .dagLevelDistance(200)
+      .backgroundColor('#101020')
+      .linkColor(() => 'rgba(255,255,255,0.2)')
+      .nodeRelSize(NODE_REL_SIZE)
+      .nodeId('path')
+      .nodeVal('size')
+      .nodeLabel('path')
+      .nodeAutoColorBy('module')
+      .nodeOpacity(0.9)
+      .linkDirectionalParticles(2)
+      .linkDirectionalParticleWidth(0.8)
+      .linkDirectionalParticleSpeed(0.006)
+      .d3Force('collision', d3.forceCollide(node => Math.cbrt(node.size) * NODE_REL_SIZE))
+      .d3VelocityDecay(0.3);
+
+    // Decrease repel intensity
+    graph.d3Force('charge').strength(-15);
+
+    fetch('../datasets/d3-dependencies.csv')
+      .then(r => r.text())
+      .then(d3.csvParse)
+      .then(data => {
+        const nodes = [], links = [];
+        data.forEach(({ size, path }) => {
+          const levels = path.split('/'),
+            level = levels.length - 1,
+            module = level > 0 ? levels[1] : null,
+            leaf = levels.pop(),
+            parent = levels.join('/');
+
+          const node = {
+            path,
+            leaf,
+            module,
+            size: +size || 20,
+            level
+          };
+
+          nodes.push(node);
+
+          if (parent) {
+            links.push({source: parent, target: path, targetNode: node});
+          }
+        });
+
+        graph(document.getElementById('graph'))
+          .graphData({ nodes, links });
+      });
+  </script>
+</body>