b80c28c4f2
- 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>
385 lines
15 KiB
HTML
385 lines
15 KiB
HTML
<!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 <span id="d-articulo"></span></div>
|
||
<div>LICENCIA <span id="d-licencia"></span></div>
|
||
<div>AUTOR <span id="d-autor"></span></div>
|
||
<div>TAMAÑO <span id="d-size"></span></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="stats">
|
||
<div>NODOS <span>15</span></div>
|
||
<div>TEMA <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>
|