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