body { margin: 0; } .svg-tooltip { font-family: sans-serif; background: black; border: 2px solid darkgrey; color: rgb(255, 255, 255); border-radius: 5px; box-shadow: 5px 5px 5px #333; padding: 5px 5px 5px 5px; border-radius: .1rem; display: block; font-size: 18px; max-width: 400px; z-index: 1; text-align: center; bottom: 5%; LINE-HEIGHT: 18px; } .svg-tooltip2 { font-family: sans-serif; background: black; border: 2px solid darkgrey; color: rgb(255, 255, 255); border-radius: 5px; box-shadow: 5px 5px 5px #333; padding: 5px 5px 5px 5px; border-radius: .1rem; display: block; font-size: 18px; max-width: 300px; z-index: 1; text-align: center; bottom: 5%; LINE-HEIGHT: 18px; } fetch('https://corona.lmao.ninja/v2/all').then(res => res.json()).then(countries => { // https://corona.lmao.ninja/v2/countries/?jsonp=exampleCallback var cases = countries.cases var deaths = countries.deaths var recovered = countries.recovered var todayCases = countries.todayCases var todayDeaths = countries.todayDeaths var active = countries.active var critical = countries.critical var tests = countries.tests //CON ESTA FUNCION OBTENGO EL IDIOMA DEL NAVEGADOR function getLang() { if (navigator.languages != undefined) return navigator.languages[0]; else return navigator.language; } // console.log(getLang()) //CON COJO LA FECHA DE LA API var updated = new Date(countries.updated) // console.log(updated) //PONGO EL FORMATO QUE QUIERO MOSTRAR var options = { year: "numeric", month: "2-digit", day: "numeric", hour: "numeric", minute: "numeric" }; var updatedporpais = updated.toLocaleDateString(getLang(), options); //en is language option, you may specify.. //console.log(updatedporpais) document.getElementById("updatedporpais") .innerHTML = updatedporpais; }) const colorScale = d3.scaleSequentialSqrt(d3.interpolateYlOrRd); const getTooltip = (d) => ` ${d.properties.ADMIN} IA+7 días: ${d.new_cases_smoothed_per_million} Casos: ${d.cases.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} ${d.todayCases.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}(+24h) Fallecidos: ${d.deaths.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} ${d.todayDeaths.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")}(+24h) Activos: ${d.active.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} Dosis totales:${d.total_vaccinations.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".")} ${d.people_fully_vaccinated.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ".") + "(" + d.people_fully_vaccinated_per_hundred + "%)"} `; // GDP per capita (avoiding countries with small pop) const getVal = feat => feat['new_cases_smoothed_per_million']; //consulta los casos por pais para el mapa de color Promise.all([ fetch('/datos/ne_110m_admin_0_countries.geojson').then(res => res.json()), fetch('https://disease.sh/v3/covid-19/countries').then(res => res.json()), fetch('https://disease.sh/v3/covid-19/countries?yesterday=true').then(res => res.json()), ]).then(([paisescoordenadas, paisescasos, paisescasosayer]) => { // console.log(paisescasos) // console.log(paisescasosayer) // paisescasos[187].todayCases === 0 ES ESPAÑA, SI TIENE 0 CASOS HOY COJO LOS DE AYER if (paisescasos[187].todayCases === 0) { var paisescompletos = paisescasos.filter(function (d) { // console.log(d.properties.ISO_A2) return paisescasosayer.filter(function (n) { // console.log(n.countryInfo.iso2) esto es la api de ninja if (d.country == n.country) /*CLAVEEEE PARA COMPARAR LOS 2 JSON Y CUANDO COINCIDEN MONTA EL NUEVO ARRAY AÑADIENDO COUNTRY,CASES.. FUSIONA LOS 2 JSON*/ return d.todayCases = n.todayCases, d.todayDeaths = n.todayDeaths; /* con esta linea si el id de ambos json es igual mete country en el nuevo array*/ }) }) } else { var paisescompletos = paisescasos; } // console.log(paisescompletos) //console.log(paisescoordenadas) var paisescompletoscoordenadas = paisescoordenadas.features.filter(function (d) { // console.log(d.properties.ISO_A2) return paisescompletos.filter(function (n) { // console.log(n.countryInfo.iso2) esto es la api de ninja //console.log(d.properties.ISO_A2) esto es las geojson del mapa if (d.properties.ISO_A2 == n.countryInfo.iso2) /*CLAVEEEE PARA COMPARAR LOS 2 JSON Y CUANDO COINCIDEN MONTA EL NUEVO ARRAY AÑADIENDO COUNTRY,CASES.. FUSIONA LOS 2 JSON*/ return d.active = n.active, d.cases = n.cases, d.critical = n.critical, d.deaths = n.deaths, d.recovered = n.recovered, d.tests = n.tests, d.todayCases = n.todayCases, d.todayDeaths = n.todayDeaths, d.todayRecovered = n.todayRecovered, d.updated = n.updated, d.flag = n.countryInfo.flag, d.iso3 = n.countryInfo.iso3; /* con esta linea si el id de ambos json es igual mete country en el nuevo array*/ }) }) // console.log(paisescompletoscoordenadas) //VACUNADOS Papa.parse("https://raw.githubusercontent.com/owid/covid-19-data/master/public/data/latest/owid-covid-latest.csv", { download: true, complete: function (results) { //console.log(results.data) const vacunados = results.data.map(function (d) { //IMPORTANTEEEE con esto creo un json conforme yo quiero return { PAIS: d[2], "iso_code": d[0], "people_fully_vaccinated": Math.round(d[36]), "people_fully_vaccinated_per_hundred": d[41], "total_vaccinations": Math.round(d[34]), "people_vaccinated_per_hundred": d[40], "new_cases_smoothed_per_million": Math.round(d[12]), } }) // console.log(vacunados) const maxVal = Math.max(...paisescoordenadas.features.map(getVal)); //colorScale.domain([0, maxVal]); colorScale.domain([0, 400]); //mapa de color por numero de casos maximos 1Millon, ir ajustando segun cifras //CON ESTA FUNCION BUSCO VALOR 0 Y LO CAMBIO POR NO INFO // console.log(paisescompletoscoordenadas) var countriesvacunados = paisescompletoscoordenadas.filter(function (d) { // console.log(d.properties.ISO_A2) return vacunados.filter(function (n) { if (d.iso3 == n.iso_code) /*CLAVEEEE PARA COMPARAR LOS 2 JSON Y CUANDO COINCIDEN MONTA EL NUEVO ARRAY AÑADIENDO COUNTRY,CASES.. FUSIONA LOS 2 JSON*/ return d.people_fully_vaccinated = n.people_fully_vaccinated, d.people_fully_vaccinated_per_hundred = n.people_fully_vaccinated_per_hundred, d.new_cases_smoothed_per_million = n.new_cases_smoothed_per_million, d.total_vaccinations = n.total_vaccinations, d.people_vaccinated_per_hundred = n.people_vaccinated_per_hundred; /* con esta linea si el id de ambos json es igual mete country en el nuevo array*/ }) }) //OJO COJO total_vaccinations EN VEZ PEOPLE_VACINATED PORQUE CHINA NO DA ESE DATO Y EN ESPAÑA SE PUBLICAN DOSIS ADMINISTRADAS QUE SON LAS TOTAL_VACCINATIONS //console.log(countriesvacunados) function cambiarValor(valorABuscar, valorViejo, valorNuevo) { countriesvacunados.forEach(function (elemento) { // recorremos el array //asignamos el valor del elemento dependiendo del valor a buscar, validamos que el valor sea el mismo y se reemplaza con el nuevo. elemento[valorABuscar] = elemento[valorABuscar] == valorViejo ? valorNuevo : elemento[valorABuscar] }) } cambiarValor("active", 0, "-") cambiarValor("cases", 0, "-") //esto es para quitar nulos en municipio cambiarValor("critical", 0, "-") //esto es para quitar nulos en municipio cambiarValor("deaths", 0, "-") //esto es para quitar nulos en municipio cambiarValor("new_cases_smoothed_per_million", 0, "-") cambiarValor("people_fully_vaccinated", 0, "-") cambiarValor("people_fully_vaccinated_per_hundred", 0, "-") cambiarValor("total_vaccinations", 0, "-") cambiarValor("people_vaccinated_per_hundred", 0, "-") cambiarValor("todayDeaths", 0, "-") cambiarValor("todayCases", 0, "-") cambiarValor("todayRecovered", 0, "-") cambiarValor("recovered", 0, "-") cambiarValor("tests", 0, "-") var lat = 0; var lng = 0; var altitude = 2.5; const world = Globe() .globeImageUrl('/imagenes/earth-night.jpg') .backgroundImageUrl('/imagenes/night-sky.png') .polygonsData(countriesvacunados) //esto devuelve un array [] .polygonAltitude(0.06) .polygonCapColor(feat => colorScale(getVal(feat))) .polygonSideColor(() => 'rgba(0, 100, 0, 0.15)') .polygonStrokeColor(() => '#111') .polygonLabel(getTooltip) //muestra los datos del tooltip .onPolygonHover(hoverD => world .polygonAltitude(d => d === hoverD ? 0.12 : 0.06) .polygonCapColor(d => d === hoverD ? 'steelblue' : colorScale(getVal(d))) ) .polygonsTransitionDuration(300) // DOBLE CLICK // .onPolygonClick(d => window.open('country?iso=' + d.properties.ISO_A2, '_blank')) .polygonsTransitionDuration(300) (document.getElementById('container')); // Auto-rotate world.controls().autoRotate = true; world.controls().autoRotateSpeed = 0.01; world.controls().enableZoom = false; world.pointOfView({ lat: 10, lng: 10, altitude: 3 }) // altitude controla el tamaño del globo cuanto mas grande el numero mas pequeño el globo } }); }) // hides all the script from DOM $(document).ready(function () { $('#toHide').remove(); });