diff --git a/visualizacion.html b/visualizacion.html new file mode 100644 index 0000000000000000000000000000000000000000..954e3461085948bb1b58f74672a791948021e668 --- /dev/null +++ b/visualizacion.html @@ -0,0 +1,54 @@ +<!DOCTYPE html> +<html lang="en"> +<head> + <meta charset="UTF-8"> + <meta name="viewport" content="width=device-width, initial-scale=1.0"> + <meta http-equiv="X-UA-Compatible" content="ie=edge"> + <title>Proyecto de Visualización D3</title> + <link href="https://fonts.googleapis.com/css?family=Montserrat" rel="stylesheet"> + <link rel="stylesheet" href="visualizacion.css"> +</head> +<body> + <div id='overlay-info'> + <header> + <h3>Año <span id="year-data"></span></h3> + </header> + <div id="info"> + <p><u>PaÃs</u>: <span id='country-data'></span></p> + <p><u>Per cápita</u>: <span id='per-cap-data'></span> T.</p> + </div> + </div> + <main> + <h1> + Emisiones de CO<sub>2</sub> totales y per cápita por año + </h1> + <svg> + </svg> + </main> + <aside id="option-panel"> + <section id="legend"> + </section> + <section id="mode-selector"> + <article> + <div> + <input type="radio" id="total" name="mode" value="total"> + <label for="total">Totales</label> + </div> + <div> + <input type="radio" id="capita" name="mode" value="capita" checked> + <label class="marked" for="capita">Per cápita</label> + </div> + </article> + </section> + </aside> + <aside id='date-limiter'> + <div id="slider"> + <div id="arranger"></div> + <div id="progress"></div> + </div> + <div id="current-date">2016</div> + </aside> + <script src="https://d3js.org/d3.v5.min.js"></script> + <script src="visualizacion.js"></script> +</body> +</html>