-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
53 lines (45 loc) · 2.19 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<script src="https://d3js.org/d3.v7.js"></script>
<title>T02</title>
</head>
<body>
<div class="container">
<h1>Herramienta de visualización del Sistema Solar</h1>
<p class="paragraph">
A continuación, se presenta una herramienta que utiliza tecnologías de desarrollo Web
como HTML, CSS, JavaScript y D3.js, para crear dos visualizaciones relacionadas al sistema solar.
</p>
<p class="paragraph">
Para comenzar, la primera visualización consiste en círculos y elipses que buscan representar los
planetas del sistema, junto con sus respectivas órbitas. En esta, los colores representan la
temperatura media del planeta, donde mientras más rojo, el planeta es más caliente.
</p>
<p class="paragraph">
Por otro lado, la segunda visualización consiste en distintos dibujos de personas que buscan
representar los satélites de cada planeta del sistema. En esta, los colores representan el
planeta al que pertenece el satélite, el tamaño de la cabeza representa el tamaño del satélite
y la distancia de sus manos a la cabeza representa su albedo.
</p>
<p class="paragraph">
Los colores de los planetas son los siguientes:
</p>
<p id="mercury-text">Mercurio</p>
<p id="venus-text">Venus</p>
<p id="earth-text">Tierra</p>
<p id="mars-text">Marte</p>
<p id="jupiter-text">Júpiter</p>
<p id="saturn-text">Saturno</p>
<p id="uranus-text">Urano</p>
<p id="neptune-text">Neptuno</p>
<h3>Creado por Cristóbal Osvaldo Avendaño Zamorano con datos de
<a href="https://devstronomy.com">Devstronomy</a>
</h3>
<button class="button-to-vis" onclick="location.href='vis.html'">Ir a la visualización</button>
</div>
</body>