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/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>