Skip to content
Snippets Groups Projects
Commit 92ca5b2a authored by alvcard's avatar alvcard
Browse files

Add new file

parent f5edb530
Branches
No related tags found
No related merge requests found
Show whitespace changes
Inline Side-by-side
Showing
with 332 additions and 0 deletions
index.html 0 → 100644
+ 332
− 0
View file @ 92ca5b2a
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<title>Mapa Usuarios Internet</title>
<link rel="stylesheet" href="ruta/estilos.css" type="text/css" media="all">
<body>
<div class="tab">
<button class="tablinks" onclick="cambio(event, 1)">2000</button>
<button class="tablinks" onclick="cambio(event, 2)">2005</button>
<button class="tablinks" onclick="cambio(event, 3)">2010</button>
<button class="tablinks" onclick="cambio(event, 4)">2011</button>
<button class="tablinks" onclick="cambio(event, 5)">2012</button>
<button class="tablinks" onclick="cambio(event, 6)">2013</button>
<button class="tablinks" onclick="cambio(event, 7)">2014</button>
<button class="tablinks" onclick="cambio(event, 8)">2015</button>
</div>
<script src="http://datamaps.github.io/scripts/d3.min.js"></script>
<script src="http://datamaps.github.io/scripts/topojson.js"></script>
<script src="http://datamaps.github.io/scripts/0.5.8/datamaps.all.js"></script>
<div id="container" style="position: absolute;height: 590px"></div>
<script>
var map;
map = new Datamap({element: document.getElementById('container'),
scope: "world",
fills:
{ defaultFill: '#b0b0b0',
1: '#f7ff00',
2: '#ffdc00',
3: '#ffc500',
4: '#ffaa00',
5: '#ff8700',
6: '#ff6100',
7: '#ff2c00',
8: '#d22400',
9: '#a71d00',
10: '#681200'}
});
var fecha, evt,y2000,y2005,y2010;
function cambiaColor(evt,yfecha){
d3.csv("buenos.csv", function(error,data) {
if (error) throw error;
var datos = data;
if(yfecha==1){
for (var i = 0; i < data.length; i++) {
if(data[i].y2000 == " "){data[i].fillKey = 0}
else if(data[i].y2000>=0 && data[i].y2000<10){data[i].fillKey = 1;}
else if(data[i].y2000>=10 && data[i].y2000<20){data[i].fillKey = 2;}
else if(data[i].y2000>=20 && data[i].y2000<30){data[i].fillKey = 3;}
else if(data[i].y2000>=30 && data[i].y2000<40){data[i].fillKey = 4;}
else if(data[i].y2000>=40 && data[i].y2000<50){data[i].fillKey = 5;}
else if(data[i].y2000>=50 && data[i].y2000<60){data[i].fillKey = 6;}
else if(data[i].y2000>=60 && data[i].y2000<70){data[i].fillKey = 7;}
else if(data[i].y2000>=70 && data[i].y2000<80){data[i].fillKey = 8;}
else if(data[i].y2000>=80 && data[i].y2000<90){data[i].fillKey = 9;}
else if(data[i].y2000>=90 && data[i].y2000<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if (yfecha==2) {
for (var i = 0; i < data.length; i++) {
if(data[i].y2005 == " "){data[i].fillKey = 0}
else if(data[i].y2005>=0 && data[i].y2005<10){data[i].fillKey = 1;}
else if(data[i].y2005>=10 && data[i].y2005<20){data[i].fillKey = 2;}
else if(data[i].y2005>=20 && data[i].y2005<30){data[i].fillKey = 3;}
else if(data[i].y2005>=30 && data[i].y2005<40){data[i].fillKey = 4;}
else if(data[i].y2005>=40 && data[i].y2005<50){data[i].fillKey = 5;}
else if(data[i].y2005>=50 && data[i].y2005<60){data[i].fillKey = 6;}
else if(data[i].y2005>=60 && data[i].y2005<70){data[i].fillKey = 7;}
else if(data[i].y2005>=70 && data[i].y2005<80){data[i].fillKey = 8;}
else if(data[i].y2005>=80 && data[i].y2005<90){data[i].fillKey = 9;}
else if(data[i].y2005>=90 && data[i].y2005<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if(yfecha==3){
for (var i = 0; i < data.length; i++) {
if(data[i].y2010 == " "){data[i].fillKey = 0}
else if(data[i].y2010>=0 && data[i].y2010<10){data[i].fillKey = 1;}
else if(data[i].y2010>=10 && data[i].y2010<20){data[i].fillKey = 2;}
else if(data[i].y2010>=20 && data[i].y2010<30){data[i].fillKey = 3;}
else if(data[i].y2010>=30 && data[i].y2010<40){data[i].fillKey = 4;}
else if(data[i].y2010>=40 && data[i].y2010<50){data[i].fillKey = 5;}
else if(data[i].y2010>=50 && data[i].y2010<60){data[i].fillKey = 6;}
else if(data[i].y2010>=60 && data[i].y2010<70){data[i].fillKey = 7;}
else if(data[i].y2010>=70 && data[i].y2010<80){data[i].fillKey = 8;}
else if(data[i].y2010>=80 && data[i].y2010<90){data[i].fillKey = 9;}
else if(data[i].y2010>=90 && data[i].y2010<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if(yfecha==4){
for (var i = 0; i < data.length; i++) {
if(data[i].y2011 == " "){data[i].fillKey = 0}
else if(data[i].y2011>=0 && data[i].y2011<10){data[i].fillKey = 1;}
else if(data[i].y2011>=10 && data[i].y2011<20){data[i].fillKey = 2;}
else if(data[i].y2011>=20 && data[i].y2011<30){data[i].fillKey = 3;}
else if(data[i].y2011>=30 && data[i].y2011<40){data[i].fillKey = 4;}
else if(data[i].y2011>=40 && data[i].y2011<50){data[i].fillKey = 5;}
else if(data[i].y2011>=50 && data[i].y2011<60){data[i].fillKey = 6;}
else if(data[i].y2011>=60 && data[i].y2011<70){data[i].fillKey = 7;}
else if(data[i].y2011>=70 && data[i].y2011<80){data[i].fillKey = 8;}
else if(data[i].y2011>=80 && data[i].y2011<90){data[i].fillKey = 9;}
else if(data[i].y2011>=90 && data[i].y2011<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if(yfecha==5){
for (var i = 0; i < data.length; i++) {
if(data[i].y2012 == " "){data[i].fillKey = 0}
else if(data[i].y2012>=0 && data[i].y2012<10){data[i].fillKey = 1;}
else if(data[i].y2012>=10 && data[i].y2012<20){data[i].fillKey = 2;}
else if(data[i].y2012>=20 && data[i].y2012<30){data[i].fillKey = 3;}
else if(data[i].y2012>=30 && data[i].y2012<40){data[i].fillKey = 4;}
else if(data[i].y2012>=40 && data[i].y2012<50){data[i].fillKey = 5;}
else if(data[i].y2012>=50 && data[i].y2012<60){data[i].fillKey = 6;}
else if(data[i].y2012>=60 && data[i].y2012<70){data[i].fillKey = 7;}
else if(data[i].y2012>=70 && data[i].y2012<80){data[i].fillKey = 8;}
else if(data[i].y2012>=80 && data[i].y2012<90){data[i].fillKey = 9;}
else if(data[i].y2012>=90 && data[i].y2012<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if(yfecha==6){
for (var i = 0; i < data.length; i++) {
if(data[i].y2013 == " "){data[i].fillKey = 0}
else if(data[i].y2013>=0 && data[i].y2013<10){data[i].fillKey = 1;}
else if(data[i].y2013>=10 && data[i].y2013<20){data[i].fillKey = 2;}
else if(data[i].y2013>=20 && data[i].y2013<30){data[i].fillKey = 3;}
else if(data[i].y2013>=30 && data[i].y2013<40){data[i].fillKey = 4;}
else if(data[i].y2013>=40 && data[i].y2013<50){data[i].fillKey = 5;}
else if(data[i].y2013>=50 && data[i].y2013<60){data[i].fillKey = 6;}
else if(data[i].y2013>=60 && data[i].y2013<70){data[i].fillKey = 7;}
else if(data[i].y2013>=70 && data[i].y2013<80){data[i].fillKey = 8;}
else if(data[i].y2013>=80 && data[i].y2013<90){data[i].fillKey = 9;}
else if(data[i].y2013>=90 && data[i].y2013<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else if(yfecha==7){
for (var i = 0; i < data.length; i++) {
if(data[i].y2014 == " "){data[i].fillKey = 0}
else if(data[i].y2014>=0 && data[i].y2014<10){data[i].fillKey = 1;}
else if(data[i].y2014>=10 && data[i].y2014<20){data[i].fillKey = 2;}
else if(data[i].y2014>=20 && data[i].y2014<30){data[i].fillKey = 3;}
else if(data[i].y2014>=30 && data[i].y2014<40){data[i].fillKey = 4;}
else if(data[i].y2014>=40 && data[i].y2014<50){data[i].fillKey = 5;}
else if(data[i].y2014>=50 && data[i].y2014<60){data[i].fillKey = 6;}
else if(data[i].y2014>=60 && data[i].y2014<70){data[i].fillKey = 7;}
else if(data[i].y2014>=70 && data[i].y2014<80){data[i].fillKey = 8;}
else if(data[i].y2014>=80 && data[i].y2014<90){data[i].fillKey = 9;}
else if(data[i].y2014>=90 && data[i].y2014<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
else{
for (var i = 0; i < data.length; i++) {
if(data[i].y2015 == " "){data[i].fillKey = 0}
else if(data[i].y2015>=0 && data[i].y2015<10){data[i].fillKey = 1;}
else if(data[i].y2015>=10 && data[i].y2015<20){data[i].fillKey = 2;}
else if(data[i].y2015>=20 && data[i].y2015<30){data[i].fillKey = 3;}
else if(data[i].y2015>=30 && data[i].y2015<40){data[i].fillKey = 4;}
else if(data[i].y2015>=40 && data[i].y2015<50){data[i].fillKey = 5;}
else if(data[i].y2015>=50 && data[i].y2015<60){data[i].fillKey = 6;}
else if(data[i].y2015>=60 && data[i].y2015<70){data[i].fillKey = 7;}
else if(data[i].y2015>=70 && data[i].y2015<80){data[i].fillKey = 8;}
else if(data[i].y2015>=80 && data[i].y2015<90){data[i].fillKey = 9;}
else if(data[i].y2015>=90 && data[i].y2015<=100){data[i].fillKey = 10;}
datos[datos[i].ISO] = datos[i];
delete datos[i].ISO;
delete datos[i];
}
}
map.updateChoropleth(data);
});
}
function cambio(evt,fecha){
cambiaColor(evt,fecha);
return map;
}
</script>
<form>
<fieldset>
<legend align="right">Leyenda</legend>
<div class="polig"> </div>
<div class="polig" style="width:100px; height:20px; background-color: #f7ff00;">0-10 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ffdc00;">10-20 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ffc500;">20-30 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ffaa00;">30-40 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ff8700;">40-50 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ff6100;">50-60 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #ff2c00;">60-70 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #d22400;">70-80 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #a71d00;">80-90 %<br></div>
<div class="polig" style="width:100px; height:20px; background-color: #681200;">90-100 %<br></div>
<br>
</fieldset>
</form>
<style type="text/css">
.polig{
width:100px;
height:20px;
background:#b0b0b0;
font-family:arial;
color:#000000;
}
.tab {
overflow: hidden;
border: 1px solid #ccc;
background-color: #f1f1f1;
margin-right: 850px;
}
/* Style the buttons that are used to open the tab content */
.tab button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
padding: 14px 16px;
transition: 0.3s;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid #ccc;
border-top: none;
}
fieldset {
display: block;
margin-left: 10px;
margin-right: 1100px;
border: 2px groove (internal value);
margin-top: 300px;
}
</style>
</body>
</html>
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment