Antes de empezar a trabajar haz un Fork de este repositorio en tu cuenta de Github usando el botón de la parte superior derecha de la vista de repositorio, junto al botón Star.
Una vez tengas el Fork hecho, clona el repositorio en tu local usando git clone <URL>
para crear la carpeta del repositorio en tu ordenador.
Ahora solo tienes que entrar a la carpeta cd pandemic-map
y lanzar el comando npm install
.
- Este proyecto cuenta con Linters y hooks pre-commit para asegurar que tu código está limpio y bien ordenado. Antes de cada commit se comprobará tu código y corregirá acorde a las normas configuradas.
Recuerda descargar las siguientes extensiones de VSCode
- Eslint (busca
dbaeumer.vscode-eslint
) - Prettier (busca
esbenp.prettier-vscode
)
Es posible que tengas que reiniciar VSCode para que los cambios hagan efecto.
Objetivo general
Dado el archivo covidData.js
que tienes en esta misma carpeta, vamos a crear un mapa en el que, mediante pines o marcadores, podamos señalizar todos los países afectados dados los datos del array de dicho archivo. Una vez consigamos esto, añadiremos un pequeño popup a los pines que nos permite ver, mediante gráficas, la evolución del Covid en los países dados.
Pasos a seguir:
- Utilizando la librería que vimos en clase
Leaflet
, crea una función que, dados los datos del array que te proporcionamos encovidData.js
(puedes copiar el array en tu archivoindex.js
), obtenga el camponame
de cada país una sola vez en un nuevo array. Usando este nuevo array pintaremos marcadores en un mapa siguiendo lo que aprendimos en las sesiones de mapas.
- Para usar el campo
name
y obtener las coordenadas, tendrás que utilizar la API de Mapbox Places que vimos en clase a la cual le podemos enviar un nombre para buscar sus coordenadas.
Aquí un ejemplo de un objeto de datos de un país:
{
date: '01/05/2020',
dailyCases: '5442',
name: 'United_Kingdom',
abbr: 'UK',
population: '66647112',
casesPerMile: '99.25261278',
},
- A cada marcador debes añadirle un listener que lance una función al hacer click sobre ellos. Esta función se llamará
showCountryGraph
, y deberá recibir un argumento mediante el cual podamos identificar al país clickado dentro del array original decovidData.js
. Por ejemplo, añadiremos un marcador de esta forma:
const spainCoordinates = [40.415511, -3.7095896];
const name = 'España';
L.marker(spainCoordinates)
.bindPopup(`<b>${name}</b>`)
.addTo(map)
.on('click', () => showCountryGraph(name));
La función showCountryGraph
recibirá el nombre de un lugar y pintará en el HTML una gráfica de líneas para dicho país donde tengamos, en el eje X las fechas por días 01/04/2020
y en el eje Y la cantidad de infectados para cada día de inicio de més.
Recuerda usar Chartist
para el pintado de gráficas
- Adicionalmente, pintaremos bajo el mapa dos gráficas diferentes (usando dos funciones distintas para ello) que nos permitan mostrar los siguientes datos:
-
La primera será una gráfica de barras que mostrará el número de casos por 100000 habitantes
casesPerMile
totales para cada país para la fecha01/12/2020
. Teniendo en el eje X el nombre del país y en el eje Y la cantidad de casos. -
La segunda gráfica será de tipo
Pie
y tendremos como labels, nuevamente, los nombres los países afectados. En el caso del camposeries
que hay que usar para pintar los datos utilizaremos el campodailyCases
, de forma que el total de datos admitidos en nuestra gráfica de tipo Pie (recuerda que enoptions
podemos usar un campototal
) sea la suma de todos losdailyCases
que vamos a mostrar.
Si has terminado el ejercicio y tienes ganas de mejorar tus gráficas te animamos a que les des estilos para que se diferencien de las gráficas genéricas de Chartist
y darle un toque personal a tu web de pandemias 🎨.
Además, te retamos a que a cada gráfica de casos por cien mil habitantes del conjunto de países le añadas un botón Retroceder
y otro botón Avanzar
para cambiar dinámicamente los datos de las gráficas usando las fechas. Podremos ver por tanto datos para 01/12/2020
, 01/11/2020
, 01/10/2020
...