147 lines
5.4 KiB
HTML
Executable file
147 lines
5.4 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html lang="es">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Visualización 2D de Noticias Políticas</title>
|
|
<link rel="stylesheet" href="3dscript_eco-corp.css">
|
|
<style>
|
|
.popup {
|
|
display: none;
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
background: white;
|
|
color: black;
|
|
padding: 20px;
|
|
border-radius: 10px;
|
|
z-index: 2;
|
|
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.popup:focus,
|
|
.cube-container:focus + .popup {
|
|
display: block;
|
|
}
|
|
|
|
.popup button {
|
|
display: block;
|
|
margin: 10px auto;
|
|
padding: 10px;
|
|
background-color: #333;
|
|
color: white;
|
|
border: none;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.popup button:hover {
|
|
background-color: #555;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="graph-container" id="graph-container">
|
|
<svg class="lines" xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" id="svg-lines">
|
|
<!-- Líneas generadas dinámicamente -->
|
|
</svg>
|
|
</div>
|
|
|
|
<script>
|
|
const numCubes = 9; // Número total de cubos
|
|
const spacing = 150; // Espacio mínimo entre los cubos
|
|
const graphContainer = document.getElementById('graph-container');
|
|
const svgLines = document.getElementById('svg-lines');
|
|
let cubePositions = [];
|
|
|
|
// Función para detectar colisiones y asegurarse de que los cubos no se solapen
|
|
function detectCollision(newX, newY, positions) {
|
|
for (let pos of positions) {
|
|
const distance = Math.sqrt((newX - pos.x) ** 2 + (newY - pos.y) ** 2);
|
|
if (distance < spacing) {
|
|
return true; // Hay colisión
|
|
}
|
|
}
|
|
return false; // No hay colisión
|
|
}
|
|
|
|
// Función para generar una posición aleatoria sin que los cubos se solapen
|
|
function getRandomPosition(maxWidth, maxHeight) {
|
|
let x, y;
|
|
do {
|
|
x = Math.random() * (maxWidth - spacing);
|
|
y = Math.random() * (maxHeight - spacing);
|
|
} while (detectCollision(x, y, cubePositions));
|
|
return { x, y };
|
|
}
|
|
|
|
// Función para generar cubos con posiciones aleatorias
|
|
function generateRandomCubes(cubeCount) {
|
|
for (let i = 0; i < cubeCount; i++) {
|
|
const position = getRandomPosition(window.innerWidth, window.innerHeight);
|
|
const cubeContainer = document.createElement('div');
|
|
cubeContainer.classList.add('cube-container');
|
|
cubeContainer.setAttribute('tabindex', '0');
|
|
cubeContainer.style.top = position.y + 'px';
|
|
cubeContainer.style.left = position.x + 'px';
|
|
|
|
cubeContainer.innerHTML = `
|
|
<div class="cube">
|
|
<div class="face front">País ${i}</div>
|
|
<div class="face back">Detalle ${i}</div>
|
|
<div class="face left">Año ${2000 + i}</div>
|
|
<div class="face right">Muertos ${(i + 1) * 1000}</div>
|
|
<div class="face top">ONU</div>
|
|
<div class="face bottom">Fuente</div>
|
|
</div>
|
|
`;
|
|
|
|
// Crear un popup para cada cubo
|
|
const popup = document.createElement('div');
|
|
popup.classList.add('popup');
|
|
popup.innerHTML = `
|
|
<p>Noticia relacionada con País ${i}</p>
|
|
<button>Close</button>
|
|
`;
|
|
|
|
popup.querySelector('button').addEventListener('click', () => {
|
|
popup.style.display = 'none';
|
|
cubeContainer.focus(); // Regresar el foco al cubo
|
|
});
|
|
|
|
cubeContainer.addEventListener('focus', () => {
|
|
popup.style.display = 'block';
|
|
});
|
|
|
|
cubePositions.push({ x: position.x + 35, y: position.y + 35 }); // Guardar la posición
|
|
graphContainer.appendChild(cubeContainer);
|
|
graphContainer.appendChild(popup); // Añadir el popup después del cubo
|
|
}
|
|
}
|
|
|
|
// Función para generar las líneas entre cubos relacionados
|
|
function generateLines() {
|
|
for (let i = 0; i < cubePositions.length - 1; i++) {
|
|
const x1 = cubePositions[i].x;
|
|
const y1 = cubePositions[i].y;
|
|
const x2 = cubePositions[i + 1].x;
|
|
const y2 = cubePositions[i + 1].y;
|
|
|
|
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
|
|
line.setAttribute('x1', x1);
|
|
line.setAttribute('y1', y1);
|
|
line.setAttribute('x2', x2);
|
|
line.setAttribute('y2', y2);
|
|
line.setAttribute('stroke', '#333');
|
|
line.setAttribute('stroke-width', '2');
|
|
|
|
svgLines.appendChild(line);
|
|
}
|
|
}
|
|
|
|
// Generar cubos aleatorios y las líneas de conexión
|
|
generateRandomCubes(numCubes);
|
|
generateLines();
|
|
</script>
|
|
</body>
|
|
</html>
|