Select Git revision
Code owners
Assign users and groups as approvers for specific file changes. Learn more.
index.html 3.99 KiB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tiroteos en USA</title>
<script src = "https://d3js.org/d3.v6.min.js"></script>
<script type = "text/javascript" src = "tiroteosUSA.js"></script>
<link rel = "stylesheet" type = "text/css" href = "tiroteosUSA.css">
<script type = "text/javascript">
document.addEventListener("DOMContentLoaded", function (e) { // La funcion se ejecuta cuando el documento este listo
//Represento el mapa correspondiente a los valores cuando el boton está en 0 es decir el rango 1982-1992
var rango = 0;
d3.select("#radio").selectAll("svg").remove();
d3.select("#mapa").selectAll("svg").remove();
crearMapa(rango);
var selec = d3.selectAll("input[type = radio][name= rangos]");
selec.attr("checked", false);
selec.each(function(d,i) { // para poner "checked" el elemento input con valor = 0 (inicialmente se muestran los datos del ano 2000)
if (this.value == 0) {
this["checked"] = true; // cambiamos ese elemento del objeto. En este caso para que "All" este seleccionado
}
});
selec.on("change", function (event) {
d3.select("#radio").selectAll("svg").remove();
d3.select("#mapa").selectAll("svg").remove();
document.getElementById("name").innerHTML="";
document.getElementById("compilacion").innerHTML="";
crearMapa(event.target.value);
});
});
</script>
</head>
<body style="cursor:default">
<!-- Creamos los contenedores de nuestra visualizacion -->
<h1 id = "titulo"></h1>
<div id = "central">
<!--Separo el contenedor central en 3 y teniendo el mapa a la derecha otro bloque a la izquierda y un recuadro con info abajo -->
<div id = "mapa"></div>
<!--Separo el contenedor en dos cajas una para los radioButons y otra para la leyenda del grafico -->
<div id = "cuadrados">
<div id = "radio">
<p id = "textoRangos">Elige el rango:</p>
<ul>
<li><input name = "rangos" value = "0" type = "radio" checked /> 1982-1992</li>
<li><input name = "rangos" value = "1" type = "radio"/> 1993-2002</li>
<li><input name = "rangos" value = "2" type = "radio"/> 2003-2012</li>
<li><input name = "rangos" value = "3" type = "radio"/> 2013-2022</li>
<li><input name = "rangos" value = "4" type = "radio"/> 1982-2022</li>
</ul>
</div>
<div id = "cajaLeyenda">
<p id = "textoLeyenda">Leyenda:</p>
<svg width="200" height="200">
<g transform="translate(40,-30)">
<rect x="0" y="30" width="25" height="25" fill="#E09696FF"></rect>
<text x="40" y="50" font-family="Times New Romans" font-weight="bold" font-size="18px">De 0 a 15</text>
<rect x="0" y="60" width="25" height="25" fill="#E07373FF"></rect>
<text x="40" y="78" font-family="Times New Romans" font-weight="bold" font-size="18px">De 16 a 27</text>
<rect x="0" y="90" width="25" height="25" fill="#E05555FF"></rect>
<text x="40" y="108" font-family="Times New Romans" font-weight="bold" font-size="18px">De 28 a 55</text>
<rect x="0" y="120" width="25" height="25" fill="#E02D2D"></rect>
<text x="40" y="138" font-family="Times New Romans" font-weight="bold" font-size="18px">De 56 a 149</text>
<rect x="0" y="150" width="25" height="25" fill="#E00B0B"></rect>
<text x="40" y="168" font-family="Times New Romans" font-weight="bold" font-size="18px">Más de 150</text>
</g>
</svg>
</div>
</div>
<div id="cajaInformacion"> <p id="nombreEstado">Estado: <span id="name"></span> </p>
<p id="datosEstado"><span id="compilacion"></span> </p>
</div>
</div>
</body>
</html>