Skip to content
Snippets Groups Projects
Commit 059ca03a authored by cridomi's avatar cridomi
Browse files

ActualizarAmatic-Bold.ttf, datosor.csv, index.html, main.css, mapa.js, topojson.js archivos

parents
No related branches found
No related tags found
No related merge requests found
Expand all Show whitespace changes
Inline Side-by-side
Amatic-Bold.ttf 0 → 100644
+ 0
− 0
View file @ 059ca03a
File added
datosor.csv 0 → 100644
+ 196
− 0
View file @ 059ca03a
"Country","y1990","y1995","y2000","y2005","y2010","y2015","y2018","Code"
"Afghanistan","21",22,22,23,24,25,26,"AFG"
"Albania","36",39,42,47,52,57,60,"ALB"
"Algeria","52",56,60,64,68,71,73,"DZA"
"Andorra","95",94,92,90,89,88,88,"AND"
"Angola","37",44,50,56,60,63,66,"AGO"
"Antigua and Barbuda","35",34,32,29,26,25,25,"ATG"
"Argentina","87",88,89,90,91,92,92,"ARG"
"Armenia","67",66,65,64,63,63,63,"ARM"
"Australia","85",85,84,85,85,86,86,"AUS"
"Austria","63",62,60,59,57,58,58,"AUT"
"Azerbaijan","54",52,51,52,53,55,56,"AZE"
"Bahamas","80",81,82,82,82,83,83,"BHS"
"Bahrain","88",88,88,88,89,89,89,"BHR"
"Bangladesh","20",22,24,27,30,34,37,"BGD"
"Barbados","37",36,34,33,32,31,31,"BRB"
"Belarus","66",68,70,72,75,77,79,"BLR"
"Belgium","96",97,97,97,98,98,98,"BEL"
"Belize","48",46,45,45,45,45,46,"BLZ"
"Benin","34",37,38,40,43,46,47,"BEN"
"Bhutan","16",20,25,31,35,39,41,"BTN"
"Bolivia (Plurinational State of)","56",59,62,64,66,68,69,"BOL"
"Bosnia and Herzegovina","39",41,42,44,46,47,48,"BIH"
"Botswana","42",49,53,56,62,67,69,"BWA"
"Brazil","74",78,81,83,84,86,87,"BRA"
"Brunei Darussalam","66",69,71,73,75,77,78,"BRN"
"Bulgaria","66",68,69,71,72,74,75,"BGR"
"Burkina Faso","14",15,18,22,25,28,29,"BFA"
"Burundi","6",7,8,9,11,12,13,"BDI"
"Cabo Verde","44",49,53,58,62,64,66,"CPV"
"Cambodia","16",17,19,19,20,22,23,"KHM"
"Cameroon","40",43,46,48,52,55,56,"CMR"
"Canada","77",78,80,80,81,81,81,"CAN"
"Central African Republic","37",37,38,38,39,40,41,"CAF"
"Chad","21",22,22,22,22,22,23,"TCD"
"Chile","83",84,86,87,87,87,88,"CHL"
"China","26",31,36,42,49,56,59,"CHN"
"Colombia","70",72,74,76,78,80,81,"COL"
"Comoros","28",28,28,28,28,28,29,"COM"
"Congo","54",56,59,61,63,66,67,"COG"
"Congo (Democratic Republic of the)","31",33,35,38,40,43,44,"COD"
"Costa Rica","50",55,59,66,72,77,79,"CRI"
"Croatia","51",52,53,54,55,56,57,"HRV"
"Cuba","73",74,75,76,77,77,77,"CUB"
"Cyprus","67",68,69,68,68,67,67,"CYP"
"Czechia","75",75,74,74,73,74,74,"CZE"
"Côte d'Ivoire","39",41,43,45,47,49,51,"CIV"
"Denmark","85",85,85,86,87,88,88,"DNK"
"Djibouti","76",76,76,77,77,77,78,"DJI"
"Dominica","63",65,65,67,68,70,70,"DMA"
"Dominican Republic","55",58,62,67,74,79,81,"DOM"
"Ecuador","55",58,60,62,63,63,64,"ECU"
"Egypt","44",43,43,43,43,43,43,"EGY"
"El Salvador","49",54,59,62,66,70,72,"SLV"
"Equatorial Guinea","35",40,49,58,66,71,72,"GNQ"
"Eritrea","19",22,27,31,35,38,40,"ERI"
"Estonia","71",70,69,69,68,68,69,"EST"
"Eswatini (Kingdom of)","20",22,23,22,22,23,24,"SWZ"
"Ethiopia","13",14,15,16,17,19,21,"ETH"
"Fiji","42",46,48,50,52,55,56,"FJI"
"Finland","79",81,82,83,84,85,85,"FIN"
"France","74",75,76,77,78,80,80,"FRA"
"Gabon","69",75,79,82,86,88,89,"GAB"
"Gambia","38",43,48,52,56,59,61,"GMB"
"Georgia","55",54,53,54,56,57,59,"GEO"
"Germany","73",74,75,76,77,77,77,"DEU"
"Ghana","36",40,44,47,51,54,56,"GHA"
"Greece","72",72,73,74,76,78,79,"GRC"
"Grenada","33",34,36,36,36,36,36,"GRD"
"Guatemala","42",44,45,47,48,50,51,"GTM"
"Guinea","28",30,31,32,34,35,36,"GIN"
"Guinea-Bissau","31",34,36,38,40,42,43,"GNB"
"Guyana","30",29,29,28,27,26,27,"GUY"
"Haiti","28",33,36,43,48,52,55,"HTI"
"Honduras","40",43,46,49,52,55,57,"HND"
"Hong Kong"," China (SAR)",100,100,100,100,100,100,"HKG"
"Hungary","66",65,65,66,69,70,71,"HUN"
"Iceland","91",92,92,93,94,94,94,"ISL"
"India","26",27,28,29,31,33,34,"IND"
"Indonesia","31",36,42,46,50,53,55,"IDN"
"Iran (Islamic Republic of)","56",60,64,68,71,73,75,"IRN"
"Iraq","70",69,68,69,69,70,70,"IRQ"
"Ireland","57",58,59,60,62,62,63,"IRL"
"Israel","90",91,91,92,92,92,92,"ISR"
"Italy","67",67,67,68,68,70,70,"ITA"
"Jamaica","49",51,52,53,54,55,56,"JAM"
"Japan","77",78,79,86,91,91,92,"JPN"
"Jordan","73",78,78,80,86,90,91,"JOR"
"Kazakhstan","56",56,56,56,57,57,57,"KAZ"
"Kenya","17",18,20,22,24,26,27,"KEN"
"Kiribati","35",36,43,44,47,52,54,"KIR"
"Korea (Democratic People's Rep. of)","58",59,59,60,60,61,62,"PRK"
"Korea (Republic of)","74",78,80,81,82,82,82,"KOR"
"Kuwait","98",98,99,100,100,100,100,"KWT"
"Kyrgyzstan","38",36,35,35,35,36,36,"KGZ"
"Lao People's Democratic Republic","15",17,22,27,30,33,35,"LAO"
"Latvia","69",69,68,68,68,68,68,"LVA"
"Lebanon","83",85,86,87,87,88,89,"LBN"
"Lesotho","14",17,20,22,25,27,28,"LSO"
"Liberia","55",46,44,46,48,50,51,"LBR"
"Libya","76",76,76,77,78,79,80,"LBY"
"Liechtenstein","17",16,15,15,14,14,14,"LIE"
"Lithuania","68",67,67,67,67,67,68,"LTU"
"Luxembourg","81",83,84,87,88,90,91,"LUX"
"Madagascar","24",26,27,29,32,35,37,"MDG"
"Malawi","12",13,15,15,16,16,17,"MWI"
"Malaysia","50",56,62,67,71,74,76,"MYS"
"Maldives","26",26,28,34,36,38,40,"MDV"
"Mali","23",26,28,32,36,40,42,"MLI"
"Malta","90",91,92,94,94,94,95,"MLT"
"Marshall Islands","65",67,69,71,74,76,77,"MHL"
"Mauritania","39",39,38,42,47,51,54,"MRT"
"Mauritius","44",43,43,42,42,41,41,"MUS"
"Mexico","71",73,75,76,78,79,80,"MEX"
"Micronesia (Federated States of)","26",25,22,22,22,22,23,"FSM"
"Moldova (Republic of)","47",46,45,43,43,42,43,"MDA"
"Monaco","100",100,100,100,100,100,100,"MCO"
"Mongolia","57",57,57,62,68,68,68,"MNG"
"Montenegro","48",53,58,62,64,66,67,"MNE"
"Morocco","48",52,53,55,58,61,62,"MAR"
"Mozambique","25",28,29,30,32,34,36,"MOZ"
"Myanmar","25",26,27,28,29,30,31,"MMR"
"Namibia","28",30,32,37,42,47,50,"NAM"
"Nauru","100",100,100,100,100,100,100,"NRU"
"Nepal","9",11,13,15,17,19,20,"NPL"
"Netherlands","69",73,77,83,87,90,92,"NLD"
"New Zealand","85",86,86,86,86,86,86,"NZL"
"Nicaragua","53",54,55,56,57,58,58,"NIC"
"Niger","15",16,16,16,16,16,16,"NER"
"Nigeria","30",32,35,39,44,48,50,"NGA"
"North Macedonia","58",60,58,58,57,57,58,"MKD"
"Norway","72",74,76,78,79,81,82,"NOR"
"Oman","66",72,72,72,75,81,84,"OMN"
"Pakistan","31",32,33,34,35,36,37,"PAK"
"Palau","70",71,70,71,75,78,80,"PLW"
"Palestine"," State of",68,70,72,73,74,75,"ANP"
"Panama","54",58,62,64,65,67,68,"PAN"
"Papua New Guinea","15",14,13,13,13,13,13,"PNG"
"Paraguay","49",52,55,58,59,61,62,"PRY"
"Peru","69",71,73,75,76,77,78,"PER"
"Philippines","47",47,46,46,45,46,47,"PHL"
"Poland","61",62,62,62,61,60,60,"POL"
"Portugal","48",51,54,58,61,64,65,"PRT"
"Qatar","93",95,96,97,98,99,99,"QAT"
"Romania","53",54,53,53,54,54,54,"ROU"
"Russian Federation","73",73,73,74,74,74,74,"RUS"
"Rwanda","5",10,15,17,17,17,17,"RWA"
"Saint Kitts and Nevis","35",34,33,32,31,31,31,"KNA"
"Saint Lucia","29",29,28,23,18,18,19,"LCA"
"Saint Vincent and the Grenadines","41",43,45,47,49,51,52,"VCT"
"Samoa","21",22,22,21,20,19,18,"WSM"
"San Marino","90",92,93,94,96,97,97,"SMR"
"Sao Tome and Principe","44",49,53,59,65,70,73,"STP"
"Saudi Arabia","77",79,80,81,82,83,84,"SAU"
"Senegal","39",40,40,42,44,46,47,"SEN"
"Serbia","50",52,53,54,55,56,56,"SRB"
"Seychelles","49",50,50,52,53,55,57,"SYC"
"Sierra Leone","33",34,36,37,39,41,42,"SLE"
"Singapore","100",100,100,100,100,100,100,"SGP"
"Slovakia","56",56,56,56,55,54,54,"SVK"
"Slovenia","50",51,51,52,53,54,54,"SVN"
"Solomon Islands","14",15,16,18,20,22,24,"SLB"
"Somalia","30",31,33,36,39,43,45,"SOM"
"South Africa","52",54,57,60,62,65,66,"ZAF"
"South Sudan","13",16,16,17,18,19,20,"SSD"
"Spain","75",76,76,77,78,80,80,"ESP"
"Sri Lanka","18",18,18,18,18,18,18,"LKA"
"Sudan","29",32,32,33,33,34,35,"SDN"
"Suriname","66",66,66,67,66,66,66,"SUR"
"Sweden","83",84,84,84,85,87,87,"SWE"
"Switzerland","74",74,73,74,74,74,74,"CHE"
"Syrian Arab Republic","49",50,52,54,56,52,54,"SYR"
"Tajikistan","32",29,26,26,26,27,27,"TJK"
"Tanzania (United Republic of)","19",20,22,25,28,32,34,"TZA"
"Thailand","29",30,31,37,44,48,50,"THA"
"Timor-Leste","21",22,24,26,28,30,31,"TLS"
"Togo","29",31,33,35,38,40,42,"TGO"
"Tonga","23",23,23,23,23,23,23,"TON"
"Trinidad and Tobago","54",55,56,55,54,53,53,"TTO"
"Tunisia","58",62,63,65,67,68,69,"TUN"
"Turkey","59",62,65,68,71,74,75,"TUR"
"Turkmenistan","45",45,46,47,48,50,52,"TKM"
"Tuvalu","41",44,46,50,55,60,62,"TUV"
"Uganda","11",13,15,17,19,22,24,"UGA"
"Ukraine","67",67,67,68,69,69,69,"UKR"
"United Arab Emirates","79",78,80,82,84,86,86,"ARE"
"United Kingdom","78",78,79,80,81,83,83,"GBR"
"United States","75",77,79,80,81,82,82,"USA"
"Uruguay","89",90,92,93,94,95,95,"URY"
"Uzbekistan","41",44,46,48,51,51,50,"UZB"
"Vanuatu","19",20,22,23,24,25,25,"VUT"
"Venezuela (Bolivarian Republic of)","84",86,88,88,88,88,88,"VEN"
"Viet Nam","20",22,24,27,30,34,36,"VNM"
"Yemen","21",24,26,29,32,35,37,"YEM"
"Zambia","39",37,35,37,39,42,44,"ZMB"
"Zimbabwe","29",32,34,34,33,32,32,"ZWE"
index.html 0 → 100644
+ 325
− 0
View file @ 059ca03a
<!DOCTYPE html>
<html lang="es">
<head>
<h1 align="center">Evolucion de la densidad de poblacion mundial urbana</h1>
<link href="main.css" rel="stylesheet" type="text/css">
<meta charset="utf-8">
<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="topojson.js"></script>
<script src="mapa.js"></script>
<div id="container" style="position:relative ;margin-left: 10%; margin-right: 20%; margin-top: 2% ;width: 70%; height: 400px;"></div>
</head>
<body>
</div>
<div id="control" ></div>
<table>
<tr>
<td>
<div>
<label>Seleccione un año: </label>
<ul>
<li><input name="year" value="1990" type="radio" checked />1990</li>
<li><input name="year" value="1995" type="radio" />1995</li>
<li><input name="year" value="2000" type="radio" />2000</li>
<li><input name="year" value="2005" type="radio" />2005</li>
<li><input name="year" value="2010" type="radio" />2010</li>
<li><input name="year" value="2015" type="radio" />2015</li>
<li><input name="year" value="2018" type="radio" />2018</li>
</ul>
</div>
</td>
</tr>
</table>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function (e) { // La funcion se ejecute cuando el documento este listo
var anio = 1990;
d3.select("#control").selectAll("svg").remove(); // Por si acaso, borramos el elemento svg que esta en la etiqueta div con identificador "control"
cambio(anio); // Pintamos el grafico entero inicialmente
var selec = d3.selectAll("input[type=radio][name=year]"); // Seleccionamos todos los elementos que contengan lo entrecomillado
selec.attr("checked", false); // Ponemos todos los elementos del radio buttom a false
selec.each(function (d, i) { // para poner "checked" el elemento input con valor=3
if (this.value == 1990) {
this["checked"] = true; // cambiamos ese elemento del objeto. En este caso para que "All" este seleccionado
}
});
selec.on("change", function (d, i) { // Se le llama al cambiar cualquier elemento input de la seleccion
//console.log(i);
d3.select("#control").selectAll("svg").remove();
cambio(i);
});
});
</script>
</div>
<script>
var map;
map = new Datamap({element: document.getElementById('container'),
scope: "world",
/* geographyConfig: {
highlightBorderColor: '#bada55',
popupTemplate: function(geography, data) {
return geography.properties.name + '% urbana: ' + datos.porcentaje + ' '
}, */
fills:
{ defaultFill: '#b0b0b0',
1: '#F3F9FA',
2: '#9FD5E7',
3: '#6EBAD3',
4: '#448DBE',
5: '#3880B1',
6: '#1E64A1',
7: '#2167A3',
8: '#084579',
9: '#034175',
10: '#031829'}
});
var year, evt, y1990, y1995, y2000, y2005, y2010, y2015, y2018;
function cambiaColor(yfecha){
console.log("llego");
d3.csv("datosor.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].y1990 == " "){data[i].fillKey = 0}
else if(data[i].y1990>=0 && data[i].y1990<10){data[i].fillKey = 1;}
else if(data[i].y1990>=10 && data[i].y1990<20){data[i].fillKey = 2;}
else if(data[i].y1990>=20 && data[i].y1990<30){data[i].fillKey = 3;}
else if(data[i].y1990>=30 && data[i].y1990<40){data[i].fillKey = 4;}
else if(data[i].y1990>=40 && data[i].y1990<50){data[i].fillKey = 5;}
else if(data[i].y1990>=50 && data[i].y1990<60){data[i].fillKey = 6;}
else if(data[i].y1990>=60 && data[i].y1990<70){data[i].fillKey = 7;}
else if(data[i].y1990>=70 && data[i].y1990<80){data[i].fillKey = 8;}
else if(data[i].y1990>=80 && data[i].y1990<90){data[i].fillKey = 9;}
else if(data[i].y1990>=90 && data[i].y1990<=100){data[i].fillKey = 10;}
datos[datos[i].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else if (yfecha==2) {
for (var i = 0; i < data.length; i++) {
if(data[i].y1995 == " "){data[i].fillKey = 0}
else if(data[i].y1995>=0 && data[i].y1995<10){data[i].fillKey = 1;}
else if(data[i].y1995>=10 && data[i].y1995<20){data[i].fillKey = 2;}
else if(data[i].y1995>=20 && data[i].y1995<30){data[i].fillKey = 3;}
else if(data[i].y1995>=30 && data[i].y1995<40){data[i].fillKey = 4;}
else if(data[i].y1995>=40 && data[i].y1995<50){data[i].fillKey = 5;}
else if(data[i].y1995>=50 && data[i].y1995<60){data[i].fillKey = 6;}
else if(data[i].y1995>=60 && data[i].y1995<70){data[i].fillKey = 7;}
else if(data[i].y1995>=70 && data[i].y1995<80){data[i].fillKey = 8;}
else if(data[i].y1995>=80 && data[i].y1995<90){data[i].fillKey = 9;}
else if(data[i].y1995>=90 && data[i].y1995<=100){data[i].fillKey = 10;}
datos[datos[i].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else if(yfecha==3){
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].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else if(yfecha==4){
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].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else if(yfecha==5){
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].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else if(yfecha==6){
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].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
else{
for (var i = 0; i < data.length; i++) {
if(data[i].y2018 == " "){data[i].fillKey = 0}
else if(data[i].y2018>=0 && data[i].y2018<10){data[i].fillKey = 1;}
else if(data[i].y2018>=10 && data[i].y2018<20){data[i].fillKey = 2;}
else if(data[i].y2018>=20 && data[i].y2018<30){data[i].fillKey = 3;}
else if(data[i].y2018>=30 && data[i].y2018<40){data[i].fillKey = 4;}
else if(data[i].y2018>=40 && data[i].y2018<50){data[i].fillKey = 5;}
else if(data[i].y2018>=50 && data[i].y2018<60){data[i].fillKey = 6;}
else if(data[i].y2018>=60 && data[i].y2018<70){data[i].fillKey = 7;}
else if(data[i].y2018>=70 && data[i].y2018<80){data[i].fillKey = 8;}
else if(data[i].y2018>=80 && data[i].y2018<90){data[i].fillKey = 9;}
else if(data[i].y2018>=90 && data[i].y2018<=100){data[i].fillKey = 10;}
datos[datos[i].Code] = datos[i];
delete datos[i].Code;
delete datos[i];
}
}
map.updateChoropleth(data);
});
}
function cambio(fecha){
cambiaColor(fecha);
return map;
}
</script>
<form>
<fieldset>
<legend align="left">% Poblacion urbana</legend>
<label >90-100 %<br></label>
<div class="polig" style="width:80px; height:20px; background-color: #031829;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #034175;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #084579;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #2167A3;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #1E64A1;">50-60 %<br></div>
<div class="polig" style="width:80px; height:20px; background-color: #307aac;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #4e99ca ;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #6EBAD3;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #9FD5E7;"><br></div>
<div class="polig" style="width:80px; height:20px; background-color: #F3F9FA;">0-10 %<br></div>
<div class="polig" > </div>
<br>
</fieldset>
</form>
</body>
<!-- Fuentes:
- Trabajos años anteriores sobre mapas:
https://gitlab.inf.uva.es/DESI/MapaIndicePobreza
https://desi.pages.gitlab.inf.uva.es/RelacionTasaHomicidos_Educacion/
https://gitlab.inf.uva.es/desi_18-19/mortalidad_infantil_1975-2015
- Estilos y diseños de apariencia:
https://www.tutorialmonsters.com/html-color-tamano-y-tipo-de-letra/
-->
</html>
main.css 0 → 100644
+ 57
− 0
View file @ 059ca03a
/*@font-face{
font-family: Amatic SC;
src: url("https://www.cssfontstack.com/Amatic-SC");
}*/
@import url('https://fonts.googleapis.com/css2?family=Amatic+SC&display=swap');
body{
margin: 0;
padding: 0;
font-family: 'Amatic SC';
}
#control{
margin-top: -110px;
margin-right: 10px;
padding-right: 10px;
display: flex;
justify-content: space-between;
top:20%;
}
select{
font-family: 'Amatic SC';
border: solid 1px black;
}
label{
font-weight: 400;
}
.polig{
width:80px;
height:20px;
background:#ffffff;
font-family:'Amatic SC';
color:#000000;
}
fieldset {
position:absolute;
right: 60px;
top:25%
}
table {
margin-left: 90px;
}
mapa.js 0 → 100644
+ 0
− 0
View file @ 059ca03a
This diff is collapsed.
topojson.js 0 → 100644
+ 279
− 0
View file @ 059ca03a
topojson = (function() {
function merge(topology, arcs) {
var arcsByEnd = {},
fragmentByStart = {},
fragmentByEnd = {};
arcs.forEach(function(i) {
var e = ends(i);
(arcsByEnd[e[0]] || (arcsByEnd[e[0]] = [])).push(i);
(arcsByEnd[e[1]] || (arcsByEnd[e[1]] = [])).push(~i);
});
arcs.forEach(function(i) {
var e = ends(i),
start = e[0],
end = e[1],
f, g;
if (f = fragmentByEnd[start]) {
delete fragmentByEnd[f.end];
f.push(i);
f.end = end;
if (g = fragmentByStart[end]) {
delete fragmentByStart[g.start];
var fg = g === f ? f : f.concat(g);
fragmentByStart[fg.start = f.start] = fragmentByEnd[fg.end = g.end] = fg;
} else if (g = fragmentByEnd[end]) {
delete fragmentByStart[g.start];
delete fragmentByEnd[g.end];
var fg = f.concat(g.map(function(i) { return ~i; }).reverse());
fragmentByStart[fg.start = f.start] = fragmentByEnd[fg.end = g.start] = fg;
} else {
fragmentByStart[f.start] = fragmentByEnd[f.end] = f;
}
} else if (f = fragmentByStart[end]) {
delete fragmentByStart[f.start];
f.unshift(i);
f.start = start;
if (g = fragmentByEnd[start]) {
delete fragmentByEnd[g.end];
var gf = g === f ? f : g.concat(f);
fragmentByStart[gf.start = g.start] = fragmentByEnd[gf.end = f.end] = gf;
} else if (g = fragmentByStart[start]) {
delete fragmentByStart[g.start];
delete fragmentByEnd[g.end];
var gf = g.map(function(i) { return ~i; }).reverse().concat(f);
fragmentByStart[gf.start = g.end] = fragmentByEnd[gf.end = f.end] = gf;
} else {
fragmentByStart[f.start] = fragmentByEnd[f.end] = f;
}
} else if (f = fragmentByStart[start]) {
delete fragmentByStart[f.start];
f.unshift(~i);
f.start = end;
if (g = fragmentByEnd[end]) {
delete fragmentByEnd[g.end];
var gf = g === f ? f : g.concat(f);
fragmentByStart[gf.start = g.start] = fragmentByEnd[gf.end = f.end] = gf;
} else if (g = fragmentByStart[end]) {
delete fragmentByStart[g.start];
delete fragmentByEnd[g.end];
var gf = g.map(function(i) { return ~i; }).reverse().concat(f);
fragmentByStart[gf.start = g.end] = fragmentByEnd[gf.end = f.end] = gf;
} else {
fragmentByStart[f.start] = fragmentByEnd[f.end] = f;
}
} else if (f = fragmentByEnd[end]) {
delete fragmentByEnd[f.end];
f.push(~i);
f.end = start;
if (g = fragmentByEnd[start]) {
delete fragmentByStart[g.start];
var fg = g === f ? f : f.concat(g);
fragmentByStart[fg.start = f.start] = fragmentByEnd[fg.end = g.end] = fg;
} else if (g = fragmentByStart[start]) {
delete fragmentByStart[g.start];
delete fragmentByEnd[g.end];
var fg = f.concat(g.map(function(i) { return ~i; }).reverse());
fragmentByStart[fg.start = f.start] = fragmentByEnd[fg.end = g.start] = fg;
} else {
fragmentByStart[f.start] = fragmentByEnd[f.end] = f;
}
} else {
f = [i];
fragmentByStart[f.start = start] = fragmentByEnd[f.end = end] = f;
}
});
function ends(i) {
var arc = topology.arcs[i], p0 = arc[0], p1 = [0, 0];
arc.forEach(function(dp) { p1[0] += dp[0], p1[1] += dp[1]; });
return [p0, p1];
}
var fragments = [];
for (var k in fragmentByEnd) fragments.push(fragmentByEnd[k]);
return fragments;
}
function mesh(topology, o, filter) {
var arcs = [];
if (arguments.length > 1) {
var geomsByArc = [],
geom;
function arc(i) {
if (i < 0) i = ~i;
(geomsByArc[i] || (geomsByArc[i] = [])).push(geom);
}
function line(arcs) {
arcs.forEach(arc);
}
function polygon(arcs) {
arcs.forEach(line);
}
function geometry(o) {
if (o.type === "GeometryCollection") o.geometries.forEach(geometry);
else if (o.type in geometryType) {
geom = o;
geometryType[o.type](o.arcs);
}
}
var geometryType = {
LineString: line,
MultiLineString: polygon,
Polygon: polygon,
MultiPolygon: function(arcs) { arcs.forEach(polygon); }
};
geometry(o);
geomsByArc.forEach(arguments.length < 3
? function(geoms, i) { arcs.push(i); }
: function(geoms, i) { if (filter(geoms[0], geoms[geoms.length - 1])) arcs.push(i); });
} else {
for (var i = 0, n = topology.arcs.length; i < n; ++i) arcs.push(i);
}
return object(topology, {type: "MultiLineString", arcs: merge(topology, arcs)});
}
function featureOrCollection(topology, o) {
return o.type === "GeometryCollection" ? {
type: "FeatureCollection",
features: o.geometries.map(function(o) { return feature(topology, o); })
} : feature(topology, o);
}
function feature(topology, o) {
var f = {
type: "Feature",
id: o.id,
properties: o.properties || {},
geometry: object(topology, o)
};
if (o.id == null) delete f.id;
return f;
}
function object(topology, o) {
var tf = topology.transform,
kx = tf.scale[0],
ky = tf.scale[1],
dx = tf.translate[0],
dy = tf.translate[1],
arcs = topology.arcs;
function arc(i, points) {
if (points.length) points.pop();
for (var a = arcs[i < 0 ? ~i : i], k = 0, n = a.length, x = 0, y = 0, p; k < n; ++k) points.push([
(x += (p = a[k])[0]) * kx + dx,
(y += p[1]) * ky + dy
]);
if (i < 0) reverse(points, n);
}
function point(coordinates) {
return [coordinates[0] * kx + dx, coordinates[1] * ky + dy];
}
function line(arcs) {
var points = [];
for (var i = 0, n = arcs.length; i < n; ++i) arc(arcs[i], points);
if (points.length < 2) points.push(points[0]);
return points;
}
function ring(arcs) {
var points = line(arcs);
while (points.length < 4) points.push(points[0]);
return points;
}
function polygon(arcs) {
return arcs.map(ring);
}
function geometry(o) {
var t = o.type;
return t === "GeometryCollection" ? {type: t, geometries: o.geometries.map(geometry)}
: t in geometryType ? {type: t, coordinates: geometryType[t](o)}
: null;
}
var geometryType = {
Point: function(o) { return point(o.coordinates); },
MultiPoint: function(o) { return o.coordinates.map(point); },
LineString: function(o) { return line(o.arcs); },
MultiLineString: function(o) { return o.arcs.map(line); },
Polygon: function(o) { return polygon(o.arcs); },
MultiPolygon: function(o) { return o.arcs.map(polygon); }
};
return geometry(o);
}
function reverse(array, n) {
var t, j = array.length, i = j - n; while (i < --j) t = array[i], array[i++] = array[j], array[j] = t;
}
function bisect(a, x) {
var lo = 0, hi = a.length;
while (lo < hi) {
var mid = lo + hi >>> 1;
if (a[mid] < x) lo = mid + 1;
else hi = mid;
}
return lo;
}
function neighbors(objects) {
var objectsByArc = [],
neighbors = objects.map(function() { return []; });
function line(arcs, i) {
arcs.forEach(function(a) {
if (a < 0) a = ~a;
var o = objectsByArc[a] || (objectsByArc[a] = []);
if (!o[i]) o.forEach(function(j) {
var n, k;
k = bisect(n = neighbors[i], j); if (n[k] !== j) n.splice(k, 0, j);
k = bisect(n = neighbors[j], i); if (n[k] !== i) n.splice(k, 0, i);
}), o[i] = i;
});
}
function polygon(arcs, i) {
arcs.forEach(function(arc) { line(arc, i); });
}
function geometry(o, i) {
if (o.type === "GeometryCollection") o.geometries.forEach(function(o) { geometry(o, i); });
else if (o.type in geometryType) geometryType[o.type](o.arcs, i);
}
var geometryType = {
LineString: line,
MultiLineString: polygon,
Polygon: polygon,
MultiPolygon: function(arcs, i) { arcs.forEach(function(arc) { polygon(arc, i); }); }
};
objects.forEach(geometry);
return neighbors;
}
return {
version: "1.1.3",
mesh: mesh,
feature: featureOrCollection,
neighbors: neighbors
};
})();
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Please to comment