Logo UOC

Choropleth

Una visualització per a dades geolocalitzades.
PID_00233252
Autor: Álex GonzálezCoordinació: Julià Minguillón

Introducció

Aquest exemple, de Mike Bostock, mostra el nivell de desocupació per comtat als EUA mitjançant una escala de color, usant el color més fosc per a majors nivells de desocupació. S'aprecien també les fronteres entre estats. El gràfic està generat combinant un mapa de regions amb un fitxer que conté l'indicador per superposar-hi.

Exemple: Habitants per municipi a Catalunya

La visualització següent mostra com usar un mapa de coropletes per a mostrar la distribució de la població per municipis a Catalunya per a un rang d'anys.

Funcionament

En aquest cas, el nivell d'interactivitat no és molt elevat. En situar el cursor damunt d'un municipi apareix un text indicant el nom d'aquest i el nombre d'habitants per a l'any en qüestió. Mitjançant el selector inferior, és possible canviar l'any.

Anàlisi mitjançant la visualització

Aquest tipus de visualització permet explorar dues dimensions complementàries. D'una banda, la distribució geogràfica d'un indicador, en aquest cas la població. L'ús del color permet veure ràpidament les zones més clares i les més fosques, és a dir, els extrems. De manera visual, és possible identificar si hi ha alguna correlació entre regió i el valor de l'indicador mostrat.

D'altra banda, quan es canvia el selector amb l'any és fàcil detectar on hi ha hagut un canvi significatiu, encara que solament per a valors extrems.

Limitacions

La visualització solament permet mostrar un indicador, per la qual cosa seria interessant disposar d'un selector que permetés escollir quina variable s'està visualitzant.

En funció de la variabilitat o escala de l'indicador, el resultat pot ser més o menys informatiu. Hauria de ser possible també poder canviar d'escala (p. ex., de lineal a logarítmica) per a poder maximitzar les diferències entre regions.

Detalls tècnics (how to?)

Aquesta visualització consisteix en una pàgina HTML (enllaç) que incorpora codi D3.js ( enllaç) i pot ser utilitzada com a base per a reproduir-la usant qualsevol altre conjunt de dades.

És necessari disposar de les llibreries d3.v4.min.js (v4, descarregable també des de D3.js), d3-scale-chromatic.v1.min.js i topojson.v2.min.js, les quals han d'estar en el mateix directori de treball que la pàgina web esmentada, en un subdirectori anomenat js.

El fitxer de dades geogràfiques compleix el format TOPOJSON i conté les dades necessàries per a representar cada municipi.

Cada fitxer .CSV per visualitzar ha d'anar separat per comes «,» i utilitzar una codificació UTF-8. El seu contingut és el següent:

  Name,Code,Population
  Abrera,08001,12216
  ...,...,...
  

Els fitxers usats en aquest exemple poden descarregar-se des d'aquí: 2014, 2015 i 2016. Es recomana utilitzar LibreOffice per a maipular-los.

El fitxer choropleth_base.js que conté el codi D3.js pot ser modificat per a reutilitzar la visualització amb altres fitxers JSON, de la manera següent:

Exercici

Es proposa modificar la visualització mostrada com a exemple, afegint dades de població de més anys. Una altra opció més interessant seria afegir diferents variables per a cada municipi (p. ex., taxa d'atur) i afegir un selector per indicar quina variable es vol visualitzar, canviant el color i el rang de colors en cada cas.

Finalment, es recomana explorar altres mapes en el mateix format, i usar eines que permeten generar mapes TOPOJSON a partir d'uns altres que ja hi ha en altres formats.

Referències

Materials creats per Álex González (outliers) i Julià Minguillón, publicats amb una llicència Creative Commons CC-BY-SA 3.0, Universitat Oberta de Catalunya (FUOC), 2016.