Skip to content
Snippets Groups Projects
Commit 8167e35d authored by marmart0's avatar marmart0
Browse files

Subida de todos los archivos de la practica

parents
No related branches found
No related tags found
No related merge requests found
Pipeline #13269 failed
Stage: build
Stage: test
Stage: dast
Show whitespace changes
Inline Side-by-side
data/cleaned_5250.csv 0 → 100644
+ 0
− 0
View file @ 8167e35d
Source diff could not be displayed: it is too large. Options to address this: view the blob.
estilo.css 0 → 100644
+ 44
− 0
View file @ 8167e35d
/*
* Autor: Mario Martín González
* Asignatura: Diseño y Evaluación de Sistemas Interactivos (DESI)
*/
#squareBotones {
position: fixed;
width: 33%;
height: 100vh;
left: 0;
background-color: #333;
}
#squareGrafico {
width: 67%;
height: 90vh;
position: fixed;
right: 0;
bottom: 0;
background-color: #05050A;
}
#squareTitulo {
width: 100%;
height: 10vh;
position: fixed;
top: 0;
left: 0;
background-color: #333;
}
#ventanaInfo {
position: fixed;
display: none;
background-color: #353644;
border: 1px solid #444;
border-radius: 5px;
color: white;
padding: 10px;
font-family: "Times New Roman", serif;
font-size: 12px;
z-index: 1000;
pointer-events: none;
}
index.html 0 → 100644
+ 35
− 0
View file @ 8167e35d
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://d3js.org/d3.v7.min.js"></script>
<script type="text/javascript" src="script.js"></script>
<link rel="stylesheet" href="estilo.css">
<style>
</style>
</head>
<body>
<div id="fondo">
<div id="squareBotones"></div>
<div id="squareTitulo"></div>
<div id="squareGrafico"></div>
<div id="ventanaInfo"></div>
<script>
let visibilidad = [
{nombre: 'Rocoso', estado: true},
{nombre: 'Super Tierra', estado: true},
{nombre: 'Neptuniano', estado: true},
{nombre: 'Planeta Gaseoso', estado: true}
]
insertaTitulo()
insertaGrafico(visibilidad)
insertaBotones(visibilidad)
</script>
</div>
</body>
</html>
\ No newline at end of file
script.js 0 → 100644
+ 608
− 0
View file @ 8167e35d
/**
* Autor: Mario Martín González
* Asignatura: Diseño y Evaluación de Sistemas Interactivos (DESI)
*/
/**
* Función para insertar el primer recuadro en el que aparece el titulo.
*/
function insertaTitulo() {
var svg = d3.select('#squareTitulo')
.append('svg')
.attr('width', '100%')
.attr('height', '100%');
svg.append('text')
.attr('x', '50%')
.attr('y', '50%')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-family', 'Times New Roman')
.style('font-size', '58px')
.style('fill', 'white')
.style('font-weight', 'bold')
.text('Los exoplanetas descubiertos por la NASA');
}
/**
* Función para insertar el cuadro de botones para cambaiar a cada grafica de la visualización.
* @param {*} visibilidad Visibilidad de los planetas actual en la gráfica.
*/
function insertaBotones(visibilidad) {
const svgAltura = 100;
const svgAnchura = 100;
const botones = [
{ label: 'tránsito' },
{ label: 'velocidad radial' },
{ label: 'variaciones de tiempo de tránsito' },
{ label: 'microlente gravitacional' }
];
const alturaBoton = 6;
const espacioBotones = 1;
const anchuraBoton = botones.length * alturaBoton + (botones.length - 1) * espacioBotones;
const startY = (svgAltura - anchuraBoton) / 2;
var svg = d3.select('#squareBotones')
.append('svg')
.attr('width', '100%')
.attr('height', '100%');
svg.append('text')
.attr('x', `${svgAnchura / 2}%`)
.attr('y', `${startY - 5}%`)
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-family', 'serif')
.style('font-size', '20px')
.style('font-weight', 'bold')
.style('fill', 'white')
.text('Métodos de búsqueda de exoplanetas');
svg.append('rect')
.attr('x', `${(svgAnchura - 45) / 2}%`)
.attr('y', `35%`)
.attr('width', '45%')
.attr('height', `${alturaBoton * 4 + 7}%`)
.style('fill', '#A3A3A3')
.style('rx', 5)
.style('ry', 5)
botones.forEach((boton, index) => {
const yPosicion = startY + index * (alturaBoton + espacioBotones);
svg.append('rect')
.attr('x', `${(svgAnchura - 40) / 2}%`)
.attr('y', `${yPosicion}%`)
.attr('width', '40%')
.attr('height', `${alturaBoton}%`)
.style('fill', '#080B2B')
.style('rx', 5)
.style('ry', 5)
.style('cursor', 'pointer')
.on('click', function () {
cambiarGrafico(boton.label, visibilidad);
});
svg.append('text')
.attr('x', `${svgAnchura / 2}%`)
.attr('y', `${yPosicion + alturaBoton / 2}%`)
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-family', 'sans-serif')
.style('font-size', '10px')
.style('fill', 'white')
.text(boton.label);
});
}
/**
* Función para inicializar la el gráfico que vemos al abrir la visualización.
* @param {*} visibilidad Visibilidad inicial de los planetas actual en la gráfica.
*/
function insertaGrafico(visibilidad) {
var svg = d3.select('#squareGrafico')
.append('svg')
.attr('width', '100%')
.attr('height', '100%');
cambiarGrafico("tránsito", visibilidad)
}
/**
* Función para aparecer los elementos de la gráfica elegida.
* @param {*} comentario Gráfica que queremos poner.
* @param {*} visibilidad Visibilidad actual de los planetas en la gráfica.
*/
function cambiarGrafico(comentario, visibilidad) {
var svgContainer = d3.select('#squareGrafico');
svgContainer.html('');
var svg = svgContainer
.append('svg')
.attr('width', '100%')
.attr('height', '100%');
//Eje X.
svg.append('rect')
.attr('x', '15%')
.attr('y', '80%')
.attr('width', '75%')
.attr('height', '2px')
.style('fill', 'white');
//Eje Y.
svg.append('rect')
.attr('x', '15%')
.attr('y', '15%')
.attr('width', '2px')
.attr('height', '65%')
.style('fill', 'white');
//Número 0 de la gráfica.
svg.append('text')
.attr('x', '14%')
.attr('y', '82%')
.style('font-family', 'Times New Roman')
.style('font-size', '10px')
.style('fill', 'white')
.text("0");
//Título Gráfico.
svg.append('text')
.attr('x', '50%')
.attr('y', '5%')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-family', 'Times New Roman')
.style('font-size', '17px')
.style('fill', 'white')
.style('font-weight', 'bold')
.text("Gráfica de los exoplanetas encontrados con el método " + comentario);
//Texto indicativo del volumen del planeta.
svg.append('text')
.attr('x', '25%')
.attr('y', '72%')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.attr('transform', `rotate(270, ${0.08 * parseFloat(svg.style("width"))}, ${0.71 * parseFloat(svg.style("height"))})`)
.style('font-family', 'Times New Roman')
.style('font-size', '15px')
.style('fill', 'white')
.text("Volumen del planeta (km³)");
//Texto indicativo de la masa del planeta.
svg.append('text')
.attr('x', '50%')
.attr('y', '89%')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-family', 'Times New Roman')
.style('font-size', '15px')
.style('fill', 'white')
.text("Masa del planeta (T)");
//Agrega la leyenda de la gráfica.
agregarBotonesPlanetas(svg, visibilidad, comentario)
//Agrega la gráfica con los datos y sus ejes partidos.
switch(comentario){
case 'tránsito':
implementacionDatosGráfica('Transit', svg, visibilidad)
break;
case 'velocidad radial':
implementacionDatosGráfica('Radial Velocity', svg, visibilidad)
break;
case 'microlente gravitacional':
implementacionDatosGráfica('Gravitational Microlensing', svg, visibilidad)
break;
default:-
implementacionDatosGráfica('Transit Timing Variations', svg, visibilidad)
}
}
/**
* Función que cambiar la visibilidad actual de un planeta a true o false, si es true el tipo de planeta se excluyes
* se ve, si es false no se ve.
* @param {*} visibilidad Visbilidad actual de los planetas de la gráfica.
* @param {*} tipo El planeta que queremos excluir.
* @param {*} comentario Tipo de gráfica que se quiere representar.
*/
function estadoPlanetas(visibilidad, tipo, comentario){
var cont = 0;
for(var i = 0; i<4; i++){
if(visibilidad[i].estado == false){
cont++;
}
if(visibilidad[i].nombre == tipo && visibilidad[i].estado == false){
cont--;
}
}
if(cont == 3){
alert("No puedes eliminar todos los elementos del grafico")
}else{
for(var i = 0; i<4; i++){
if(visibilidad[i].nombre == tipo){
visibilidad[i].estado = !(visibilidad[i].estado);
}
}
cambiarGrafico(comentario, visibilidad);
}
}
/**
* Función que implementa los botones de la leyenda de la gráfica con su funcionalidad.
* @param {*} svg Elemento svg en el que trabajamos.
* @param {*} visibilidad Estado actual de la visibilidad de los planetas.
* @param {*} comentario Gráfica actual que queremos implementar.
*/
function agregarBotonesPlanetas(svg, visibilidad, comentario) {
const botones = [
{ label: 'Rocoso', xPosition: 0.35, colorPlaneta: '#C9644A' },
{ label: 'Super Tierra', xPosition: 0.42, colorPlaneta: '#7ED0E7' },
{ label: 'Neptuniano', xPosition: 0.52, colorPlaneta: '#007BFF' },
{ label: 'Planeta Gaseoso', xPosition: 0.615, colorPlaneta: ' #A89792' }
];
const svgAnchura = parseFloat(svg.style('width'));
botones.forEach((boton) => {
const xPosicionText = boton.xPosition * svgAnchura;
const xPosicionRect = xPosicionText - 15;
const botonGroup = svg.append('g')
.attr('transform', `translate(${xPosicionText}, 95%)`);
svg.append('rect')
.attr('x', xPosicionRect)
.attr('y', '94%')
.attr('width', 10)
.attr('height', 10)
.style('fill', boton.colorPlaneta)
.attr('text-anchor', 'middle')
botonGroup.append('text')
.attr('x', xPosicionText)
.attr('y', '95%')
.attr('dominant-baseline', 'middle')
.style('font-family', 'sans-serif')
.style('font-size', '14px')
.style('fill', 'white')
.text(boton.label)
.style('cursor', 'pointer')
.on('click', function () {
estadoPlanetas(visibilidad, boton.label, comentario);
});
});
}
/**
* Función que cuenta los dígitos enteros que tiene un número.
* @param {*} numero Número que queremos contar.
* @returns Número de dígitos contados
*/
function cuentaDigitos(numero){
var cont = 0;
while(numero > 1){
numero = numero/10;
cont++;
}
return cont;
}
/**
* Función que analiza todos los planetas de la base de datos para guardar aquellos del método de búsqueda que vamos a
* representar en el gráfico y dependiendo de la visibilidad actual del gráfico.
* @param {*} data Datos de la base de datos.
* @param {*} tipo Tipo de metodo que vamosa represenatar.
* @param {*} visibilidad Visibilidad actual de los planetas.
* @returns Lista de planetas que cumplen los requisitos dados.
*/
function exclusionPlanetaria(data, tipo, visibilidad){
let info = [];
for(var i = 0; i < data.length; i++){
if(data[i].detection_method == tipo){
switch (data[i].planet_type){
case 'Terrestrial':
if(visibilidad[0].estado == true){
info.push(data[i]);
}
break;
case 'Super Earth':
if(visibilidad[1].estado == true){
info.push(data[i]);
}
break;
case 'Neptune-like':
if(visibilidad[2].estado == true){
info.push(data[i]);
}
break;
default:
if(visibilidad[3].estado == true){
info.push(data[i]);
}
}
}
}
return info;
}
/**
* Función que ajusta al ejeX de la gráfica al cortandolo según el planeta con la mayor masa de todos.
* @param {*} planetas Lista de planetas que vamos a representar.
* @param {*} svg Elemento svg donde lo camos a representar.
* @returns Estructura de datos con información del ejeX y sus medidas.
*/
function insertaEjeX(planetas, svg){
var maxPlaneta = 0, masaPlaneta;
var tamEjeX;
var divEjeX;
var multiplicador;
let info;
for(var i = 0; i < planetas.length; i++){
if(planetas[i].mass_wrt == "Earth"){
masaPlaneta = planetas[i].mass_multiplier*5.972;
}else{
masaPlaneta = planetas[i].mass_multiplier*1898.130;
}
if(masaPlaneta > maxPlaneta){
maxPlaneta = masaPlaneta;
}
}
tamEjeX = (Math.floor((maxPlaneta/(Math.pow(10, (cuentaDigitos(maxPlaneta)-Math.floor(cuentaDigitos(maxPlaneta)/3, 100000))))), 1000000)) +1;
divEjeX = 75 / tamEjeX;
multiplicador = Math.pow(10, (cuentaDigitos(maxPlaneta) - cuentaDigitos(tamEjeX)));
for(var j = 1; j <= tamEjeX; j++){
svg.append('rect')
.attr('x', `${15 + (j * divEjeX)}%`)
.attr('y', '79.5%')
.attr('width', 2)
.attr('height', 10)
.style('fill', 'white');
svg.append('text')
.attr('x', `${15 + (j * divEjeX)}%`)
.attr('y', '83.5%')
.style('font-family', 'Times New Roman')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-size', '8px')
.style('fill', 'white')
.text(j*multiplicador);
svg.append('text')
.attr('x', `${15 + (j * divEjeX)}%`)
.attr('y', '85.5%')
.style('font-family', 'Times New Roman')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-size', '8px')
.style('fill', 'white')
.text("Sxt");
}
info = [tamEjeX, (Math.pow(10, (cuentaDigitos(maxPlaneta)-Math.floor(cuentaDigitos(maxPlaneta)/3, 100000))))];
return info;
}
/**
* Función que calcula el volumen de una esfera.
* @param {*} radioMult Multiplicador del radio aproximado.
* @param {*} radioAp Radio de referencia.
* @returns Volumen de la esfera.
*/
function volumen(radioMult, radioAp){
return 4/3 * Math.PI * Math.pow((radioMult*radioAp), 3);
}
/**
* Función que ajusta al ejeY de la gráfica al cortandolo según el planeta con el mayor volumen de todos.
* @param {*} planetas Lista de planetas que vamos a representar.
* @param {*} svg Elemento svg donde lo camos a representar.
* @returns Estructura de datos con información del ejeY y sus medidas.
*/
function insertaEjeY(planetas, svg){
var maxPlaneta = 0;
var volumenPlaneta = 0;
let info;
var digits;
var tamEjeY;
var divEjeY;
var multiplicador;
let formato = d3.format(".1f");
for(var i = 0; i < planetas.length; i++){
if(planetas[i].radius_wrt == "Earth"){
volumenPlaneta = volumen(planetas[i].radius_multiplier,6370);
}else{
volumenPlaneta = volumen(planetas[i].radius_multiplier, 69911);
}
if(volumenPlaneta > maxPlaneta){
maxPlaneta = volumenPlaneta;
}
}
maxPlaneta = Math.floor(maxPlaneta/Math.pow(10, 12), Math.pow(10, 12));
digits = Math.pow(10, (cuentaDigitos(maxPlaneta) - Math.ceil(cuentaDigitos(maxPlaneta)/3)));
tamEjeY = (Math.floor((maxPlaneta/digits), digits)) +1;
divEjeY = 65 / tamEjeY;
multiplicador = Math.pow(10, (cuentaDigitos(maxPlaneta) - cuentaDigitos(tamEjeY)));
for(var j = 1; j <= tamEjeY; j++){
svg.append('rect')
.attr('x', '14.65%')
.attr('y', `${80 - (j * divEjeY)}%`)
.attr('width', 10)
.attr('height', 2)
.style('fill', 'white');
svg.append('text')
.attr('x', '12.5%')
.attr('y', `${80 - (j * divEjeY)}%`)
.style('font-family', 'Times New Roman')
.attr('text-anchor', 'middle')
.attr('dominant-baseline', 'middle')
.style('font-size', '10px')
.style('fill', 'white')
.text(formato(j * multiplicador) + " Tln");
}
info = [tamEjeY, digits];
return info;
}
/**
* Función que crea una pantalla con la información de un planeta seleccionado.
* @param {*} planeta Planeta elegido.
* @param {*} infoPlanetas Información del planeta.
* @param {*} event Evento que se ocurre y hace aparecer la pantalla.
*/
function pantallaInformacion(planeta, infoPlanetas, event) {
const infoDiv = d3.select("#ventanaInfo");
let formato = d3.format(".3f");
switch (planeta.planet_type){
case 'Gas Giant':
tipoPlaneta = 'Gigante Gaseoso';
break;
case 'Neptune-like':
tipoPlaneta = 'Neptuniano';
break;
case 'Super Earth':
tipoPlaneta = 'Super Tierra';
break;
default:
tipoPlaneta = 'Rocoso';
}
infoDiv.html(`
<div style="padding: 10px; color: white; font-family: 'Times New Roman';">
Nombre: <strong> ${planeta.name}</strong><br>
Tipo de planeta: ${tipoPlaneta}<br>
Radio: ${infoPlanetas[0].radio} Km<br>
Masa: ${formato(infoPlanetas[2].masa)} * 10^21 T<br>
Volumen: ${formato(infoPlanetas[1].volumen)} * 10^12 Km
</div>
`);
infoDiv
.style("display", "block")
.style("top", `${event.clientY + 20}px`)
.style("left", `${event.clientX - 100}px`);
}
/**
* Función para ocultar la pantalla con informacion de un planeta.
*/
function ocultarInformacion() {
d3.select("#ventanaInfo").style("display", "none");
}
/**
* Función que implementa los datos en el gráfico extrayendo los datos de la base de datos de planetas y creando circulos
* representando cad uno en la posición en la que deben estar.
* @param {*} tipo Método de búsqueda de planetas seleccionado para crear la gráfica.
* @param {*} svg Elemento svg donde implementaremos los datos.
* @param {*} visibilidad Visibilidad actual de los tipos de planetas que hay.
*/
function implementacionDatosGráfica(tipo, svg, visibilidad) {
d3.csv(".data/cleaned_5250.csv").then(function(data) {
let planetas = exclusionPlanetaria(data, tipo, visibilidad);
let infoEjeX = insertaEjeX(planetas, svg);
let infoEjeY = insertaEjeY(planetas, svg);
var color, posX, posY;
var masaPlaneta, volumenPlaneta, radioPlaneta;
const recuadro = document.querySelector('#squareGrafico');
planetas.forEach(planeta => {
switch (planeta.planet_type) {
case 'Gas Giant':
color = '#A89792';
break;
case 'Neptune-like':
color = '#007BFF';
break;
case 'Super Earth':
color = '#7ED0E7';
break;
default:
color = '#C9644A';
break;
}
if (planeta.mass_wrt == "Earth") {
masaPlaneta = planeta.mass_multiplier * 5.972;
} else {
masaPlaneta = planeta.mass_multiplier * 1898.130;
}
if(planeta.radius_wrt == "Earth"){
volumenPlaneta = volumen(planeta.radius_multiplier,6370);
radioPlaneta = planeta.radius_multiplier * 6370;
volumenPlaneta = volumenPlaneta/Math.pow(10, 12), Math.pow(10, 12);
}else{
volumenPlaneta = volumen(planeta.radius_multiplier, 69911);
radioPlaneta = planeta.radius_multiplier * 69911;
volumenPlaneta = volumenPlaneta/Math.pow(10, 12), Math.pow(10, 12);
}
let originalPosX, originalPosY;
if (planeta.mass_wrt == "Earth") {
originalPosX = masaPlaneta / (infoEjeX[1] * infoEjeX[0]);
} else {
originalPosX = masaPlaneta / (infoEjeX[1] *infoEjeX[0]);
}
posX = 0.15 * recuadro.offsetWidth + 0.75 * originalPosX * recuadro.offsetWidth;
if (planeta.radius_wrt == "Earth") {
originalPosY = volumenPlaneta / (infoEjeY[1] * infoEjeY[0]);
} else {
originalPosY = volumenPlaneta /(infoEjeY[1] * infoEjeY[0]);
}
posY = 0.8 * recuadro.offsetHeight - 0.65 * originalPosY * recuadro.offsetHeight;
let infoPlaneta = [
{ radio: radioPlaneta },
{ volumen: volumenPlaneta },
{ masa: masaPlaneta },
];
svg.append('circle')
.attr('cx', `${posX}`)
.attr('cy', `${posY}`)
.attr('r', planeta.radius_multiplier * 5)
.attr('fill', color)
.on("mouseenter", (event) => {
pantallaInformacion(planeta, infoPlaneta, event);
d3.select(event.target)
.attr('stroke', 'red')
.attr('stroke-width', 2);
})
.on("mousemove", (event) => {
pantallaInformacion(planeta, infoPlaneta, event);
})
.on("mouseleave", (event) => {
ocultarInformacion();
d3.select(event.target)
.attr('stroke', null)
.attr('stroke-width', null);
});
});
});
}
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment