feat: demo visualización imágenes Wikipedia + gitignore wiki/

- demo_wiki_images.html: grafo 3D con las 15 imágenes de Wikipedia sobre cambio climático como nodos sprite, panel de detalle al click - images/wiki/.gitignore: excluye imágenes binarias del repo Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
2026-03-29 20:48:18 +02:00 · 2026-03-29 20:48:18 +02:00 · b80c28c4f2
commit b80c28c4f2
parent 0975f44a0e
2 changed files with 387 additions and 0 deletions
--- a/VISUALIZACION/public/demos/demo_wiki_images.html
+++ b/VISUALIZACION/public/demos/demo_wiki_images.html
@ -0,0 +1,385 @@
+<!DOCTYPE html>
+<html lang="es">
+<head>
+  <meta charset="UTF-8">
+  <title>FLUJOS — Demo: Wikipedia Images</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;700&display=swap" rel="stylesheet">
+
+  <script type="importmap">
+  {
+    "imports": {
+      "three":          "https://esm.sh/three@0.168",
+      "three/":         "https://esm.sh/three@0.168/",
+      "3d-force-graph": "https://esm.sh/3d-force-graph@1.73?external=three"
+    }
+  }
+  </script>
+
+  <style>
+    * { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Fira Code', monospace; }
+    body { background: #000; color: #39ff14; overflow: hidden; }
+    #graph { position: fixed; top: 0; left: 0; width: 100%; height: 100%; }
+
+    #header {
+      position: fixed; top: 0; left: 0; right: 0; z-index: 10;
+      padding: 10px 20px;
+      background: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, transparent 100%);
+      display: flex; align-items: center; gap: 14px;
+    }
+    #header h1 { font-size: 1em; color: #39ff14; letter-spacing: 4px; text-shadow: 0 0 10px #39ff14; }
+    .tag { font-size: 0.6em; padding: 3px 8px; border: 1px solid #ff4500; color: #ff4500; letter-spacing: 2px; }
+    .tag2 { font-size: 0.6em; padding: 3px 8px; border: 1px solid #555; color: #555; letter-spacing: 2px; }
+
+    /* Panel de detalle */
+    #detail {
+      position: fixed; bottom: 0; right: 0; z-index: 10;
+      width: 340px;
+      background: rgba(0,0,0,0.95);
+      border-left: 1px solid #222;
+      border-top: 1px solid #222;
+      display: none;
+      flex-direction: column;
+      max-height: 60vh;
+    }
+    #detail img {
+      width: 100%; max-height: 200px;
+      object-fit: cover; display: block;
+    }
+    #detail .detail-body { padding: 14px 16px; overflow-y: auto; }
+    #detail h3 { font-size: 0.8em; color: #fff; margin-bottom: 6px; line-height: 1.4; }
+    #detail .badge {
+      display: inline-block; font-size: 0.6em; padding: 2px 8px;
+      border: 1px solid #ff4500; color: #ff4500; letter-spacing: 2px;
+      margin-bottom: 10px;
+    }
+    #detail p { font-size: 0.7em; color: #777; line-height: 1.6; margin-bottom: 8px; }
+    #detail .meta { font-size: 0.62em; color: #444; line-height: 1.8; }
+    #detail .meta span { color: #666; }
+    #detail .close {
+      position: absolute; top: 8px; right: 10px;
+      background: rgba(0,0,0,0.7); border: none;
+      color: #555; font-family: inherit; font-size: 0.8em;
+      cursor: pointer; padding: 2px 6px; z-index: 1;
+    }
+    #detail .close:hover { color: #fff; }
+
+    /* Stats */
+    #stats {
+      position: fixed; bottom: 20px; left: 20px; z-index: 10;
+      font-size: 0.62em; color: #333; line-height: 2;
+    }
+    #stats span { color: #555; }
+
+    /* Tooltip custom */
+    .node-tooltip {
+      position: fixed; z-index: 20; pointer-events: none;
+      background: rgba(0,0,0,0.9); border: 1px solid #333;
+      padding: 6px 10px; font-size: 0.7em; color: #fff;
+      max-width: 180px; display: none;
+    }
+  </style>
+</head>
+<body>
+
+<div id="graph"></div>
+
+<div id="header">
+  <h1>FLUJOS</h1>
+  <span class="tag">CAMBIO CLIMÁTICO</span>
+  <span class="tag2">Wikipedia Images · 15 nodos</span>
+</div>
+
+<div id="detail">
+  <button class="close" onclick="document.getElementById('detail').style.display='none'">✕</button>
+  <img id="d-img" src="" alt="">
+  <div class="detail-body">
+    <h3 id="d-title"></h3>
+    <span class="badge">CAMBIO CLIMÁTICO</span>
+    <p id="d-desc"></p>
+    <div class="meta">
+      <div>ARTÍCULO &nbsp;<span id="d-articulo"></span></div>
+      <div>LICENCIA &nbsp;<span id="d-licencia"></span></div>
+      <div>AUTOR &nbsp;&nbsp;&nbsp;<span id="d-autor"></span></div>
+      <div>TAMAÑO &nbsp;&nbsp;<span id="d-size"></span></div>
+    </div>
+  </div>
+</div>
+
+<div id="stats">
+  <div>NODOS &nbsp;<span>15</span></div>
+  <div>TEMA &nbsp;&nbsp;<span>cambio climático</span></div>
+  <div>FUENTE <span>Wikipedia / Wikimedia Commons</span></div>
+</div>
+
+<div id="node-tooltip" class="node-tooltip"></div>
+
+<script type="module">
+  import ForceGraph3D from '3d-force-graph';
+  import * as THREE from 'three';
+
+  // ── Datos: imágenes de Wikipedia sobre cambio climático ─────────────────────
+  const WIKI_NODES = [
+    {
+      id: "cambio_climático_000",
+      archivo: "cambio_climático_000.jpg",
+      img: "/images/wiki/cambio_climático_000.jpg",
+      titulo: "Vista aérea del hielo en Nunavut",
+      articulo: "Cambio climático",
+      descripcion: "Vista aérea del borde del hielo en Nunavut, Canadá. Representa el deshielo polar como consecuencia del cambio climático.",
+      autor: "Doc Searls",
+      licencia: "CC BY-SA 2.0",
+      width: 3504, height: 2336,
+      grupo: "fotografia",
+    },
+    {
+      id: "cambio_climático_001",
+      archivo: "cambio_climático_001.png",
+      img: "/images/wiki/cambio_climático_001.png",
+      titulo: "Variaciones históricas de CO₂",
+      articulo: "Cambio climático",
+      descripcion: "Historia y futuro de la concentración de CO₂ en la atmósfera. Escala logarítmica mostrando los últimos 100 millones de años.",
+      autor: "Hannes Grobe",
+      licencia: "CC BY-SA 2.5",
+      width: 1155, height: 806,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_002",
+      archivo: "cambio_climático_002.png",
+      img: "/images/wiki/cambio_climático_002.png",
+      titulo: "Factores del cambio climático",
+      articulo: "Cambio climático",
+      descripcion: "Esquema ilustrativo de los principales factores que afectan al cambio climático.",
+      autor: "Medium69 / Ortisa",
+      licencia: "CC BY-SA 4.0",
+      width: 600, height: 582,
+      grupo: "esquema",
+    },
+    {
+      id: "cambio_climático_003",
+      archivo: "cambio_climático_003.jpg",
+      img: "/images/wiki/cambio_climático_003.jpg",
+      titulo: "Consenso científico sobre el clima",
+      articulo: "Cambio climático",
+      descripcion: "Gráfico de Cook et al. (2016) ilustrando los resultados de siete estudios de consenso climático.",
+      autor: "Skeptical Science",
+      licencia: "CC BY-SA 3.0",
+      width: 1920, height: 1080,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_004",
+      archivo: "cambio_climático_004.png",
+      img: "/images/wiki/cambio_climático_004.png",
+      titulo: "Emisiones CO₂ y temperatura París",
+      articulo: "Cambio climático",
+      descripcion: "Emisiones globales de CO₂ y resultados probabilísticos de temperatura según los anuncios previos a la conferencia de París.",
+      autor: "Jae Edmonds / PNNL",
+      licencia: "Public domain",
+      width: 1920, height: 806,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_005",
+      archivo: "cambio_climático_005.png",
+      img: "/images/wiki/cambio_climático_005.png",
+      titulo: "Escenarios de emisiones futuras",
+      articulo: "Cambio climático",
+      descripcion: "Proyecciones de emisiones globales de gases de efecto invernadero según distintos escenarios de política climática.",
+      autor: "Hannah Ritchie y Max Roser",
+      licencia: "CC BY 4.0",
+      width: 2041, height: 1422,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_006",
+      archivo: "cambio_climático_006.png",
+      img: "/images/wiki/cambio_climático_006.png",
+      titulo: "Gases efecto invernadero por sector",
+      articulo: "Cambio climático",
+      descripcion: "Emisión de gases de efecto invernadero desglosada por sector económico.",
+      autor: "Robert A. Rohde / Rojasyesid",
+      licencia: "CC BY-SA 3.0",
+      width: 617, height: 584,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_007",
+      archivo: "cambio_climático_007.jpg",
+      img: "/images/wiki/cambio_climático_007.jpg",
+      titulo: "Temperatura de la Corriente del Golfo",
+      articulo: "Cambio climático",
+      descripcion: "Imagen en falso color de la temperatura de la Corriente del Golfo. La corriente cálida es visible contra las aguas más frías circundantes.",
+      autor: "NASA / MODIS Ocean Group",
+      licencia: "Public domain",
+      width: 538, height: 566,
+      grupo: "satelite",
+    },
+    {
+      id: "cambio_climático_008",
+      archivo: "cambio_climático_008.png",
+      img: "/images/wiki/cambio_climático_008.png",
+      titulo: "Mapa de Pangea",
+      articulo: "Cambio climático",
+      descripcion: "Mapa del supercontinente Pangea, relevante para entender la historia climática de la Tierra a escala geológica.",
+      autor: "en:User:Kieff / user:tsca",
+      licencia: "CC BY-SA 3.0",
+      width: 772, height: 869,
+      grupo: "esquema",
+    },
+    {
+      id: "cambio_climático_009",
+      archivo: "cambio_climático_009.jpg",
+      img: "/images/wiki/cambio_climático_009.jpg",
+      titulo: "Precesión y estaciones",
+      articulo: "Cambio climático",
+      descripcion: "Diagrama de la precesión de la Tierra y su efecto sobre las estaciones, factor clave en los ciclos climáticos naturales.",
+      autor: "Wikimedia Commons",
+      licencia: "CC BY-SA 3.0",
+      width: 593, height: 445,
+      grupo: "esquema",
+    },
+    {
+      id: "cambio_climático_010",
+      archivo: "cambio_climático_010.png",
+      img: "/images/wiki/cambio_climático_010.png",
+      titulo: "Proyecciones nivel del mar",
+      articulo: "Cambio climático",
+      descripcion: "Proyecciones del aumento del nivel medio del mar según Parris et al. (2012), traducidas al español.",
+      autor: "Enescot / Hiperfelix",
+      licencia: "CC0",
+      width: 1355, height: 761,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_011",
+      archivo: "cambio_climático_011.jpg",
+      img: "/images/wiki/cambio_climático_011.jpg",
+      titulo: "Palma de aceite en Riau, Sumatra",
+      articulo: "Cambio climático",
+      descripcion: "Concesión de palma de aceite en Riau, Sumatra (Indonesia). La deforestación tropical es un factor relevante en el cambio climático.",
+      autor: "Hayden / Flickr",
+      licencia: "CC BY 2.0",
+      width: 2048, height: 1365,
+      grupo: "fotografia",
+    },
+    {
+      id: "cambio_climático_012",
+      archivo: "cambio_climático_012.png",
+      img: "/images/wiki/cambio_climático_012.png",
+      titulo: "Sistema climático terrestre",
+      articulo: "Cambio climático",
+      descripcion: "Diagrama del sistema climático terrestre mostrando las interacciones entre atmósfera, hidrosfera, criosfera y biosfera.",
+      autor: "Martín, Rodrigo",
+      licencia: "CC BY-SA 3.0",
+      width: 1164, height: 612,
+      grupo: "esquema",
+    },
+    {
+      id: "cambio_climático_013",
+      archivo: "cambio_climático_013.png",
+      img: "/images/wiki/cambio_climático_013.png",
+      titulo: "Ciclos solares e irradiancia",
+      articulo: "Cambio climático",
+      descripcion: "Los últimos tres ciclos solares medidos en irradiancia solar, manchas solares, actividad de erupciones y flujo de radio.",
+      autor: "Robert A. Rohde",
+      licencia: "CC BY-SA 3.0",
+      width: 700, height: 466,
+      grupo: "grafico",
+    },
+    {
+      id: "cambio_climático_014",
+      archivo: "cambio_climático_014.jpg",
+      img: "/images/wiki/cambio_climático_014.jpg",
+      titulo: "Activismo climático juvenil (TedX)",
+      articulo: "Cambio climático e infancia",
+      descripcion: "Aayan Aggarwal durante su charla TedX sobre cambio climático e infancia en el NMIMS de Shirpur.",
+      autor: "Dk4588",
+      licencia: "CC BY-SA 4.0",
+      width: 791, height: 640,
+      grupo: "fotografia",
+    },
+  ];
+
+  // ── Conexiones temáticas entre imágenes ─────────────────────────────────────
+  const GRUPO_COLORS = {
+    fotografia: '#ff4500',
+    grafico:    '#39ff14',
+    esquema:    '#00fff2',
+    satelite:   '#cc44ff',
+  };
+
+  // Conectar imágenes del mismo grupo y artículo
+  const links = [];
+  for (let i = 0; i < WIKI_NODES.length; i++) {
+    for (let j = i + 1; j < WIKI_NODES.length; j++) {
+      const a = WIKI_NODES[i], b = WIKI_NODES[j];
+      if (a.articulo === b.articulo) {
+        links.push({ source: a.id, target: b.id, value: a.grupo === b.grupo ? 80 : 40 });
+      }
+    }
+  }
+
+  const graphData = { nodes: WIKI_NODES, links };
+
+  // ── Render ───────────────────────────────────────────────────────────────────
+  const elem = document.getElementById('graph');
+  const textureCache = {};
+  const loader = new THREE.TextureLoader();
+
+  function getTexture(url) {
+    if (!textureCache[url]) {
+      const t = loader.load(url);
+      t.colorSpace = THREE.SRGBColorSpace;
+      textureCache[url] = t;
+    }
+    return textureCache[url];
+  }
+
+  const Graph = ForceGraph3D()(elem)
+    .backgroundColor('#000000')
+    .nodeLabel(node => `<div style="font-family:Fira Code,monospace;font-size:11px;color:${GRUPO_COLORS[node.grupo]};background:rgba(0,0,0,0.8);padding:4px 8px;border:1px solid ${GRUPO_COLORS[node.grupo]}33">${node.titulo}</div>`)
+    .nodeColor(node => GRUPO_COLORS[node.grupo] || '#fff')
+    .nodeVal(node => {
+      const area = node.width * node.height;
+      return Math.max(1.5, Math.min(6, area / 500000));
+    })
+    .linkColor(link => {
+      const val = link.value || 40;
+      return val > 60 ? 'rgba(57,255,20,0.4)' : 'rgba(57,255,20,0.15)';
+    })
+    .linkWidth(link => link.value > 60 ? 1.2 : 0.4)
+    .nodeThreeObject(node => {
+      const texture = getTexture(node.img);
+      const material = new THREE.SpriteMaterial({ map: texture, transparent: true });
+      const sprite = new THREE.Sprite(material);
+      // Escalar manteniendo aspect ratio aproximado
+      const ratio = node.width / node.height;
+      const baseSize = 14;
+      sprite.scale.set(baseSize * Math.min(ratio, 1.6), baseSize / Math.max(ratio, 0.6));
+      return sprite;
+    })
+    .onNodeClick(node => {
+      const panel = document.getElementById('detail');
+      document.getElementById('d-img').src = node.img;
+      document.getElementById('d-title').textContent = node.titulo;
+      document.getElementById('d-desc').textContent = node.descripcion;
+      document.getElementById('d-articulo').textContent = node.articulo;
+      document.getElementById('d-licencia').textContent = node.licencia;
+      document.getElementById('d-autor').textContent = node.autor;
+      document.getElementById('d-size').textContent = `${node.width}×${node.height}px`;
+      panel.style.display = 'flex';
+    })
+    .onNodeHover(node => { elem.style.cursor = node ? 'pointer' : null; })
+    .graphData(graphData);
+
+  Graph.d3Force('charge').strength(-250);
+  setTimeout(() => Graph.zoomToFit(800, 80), 1500);
+
+  window.addEventListener('resize', () => {
+    Graph.width(elem.clientWidth).height(elem.clientHeight);
+  });
+</script>
+</body>
+</html>
--- a/VISUALIZACION/public/images/wiki/.gitignore
+++ b/VISUALIZACION/public/images/wiki/.gitignore
@ -0,0 +1,2 @@
+*
+!.gitignore