Visualitzant dades geogràfiques amb HTML5

Objectiu:

Representar en un mateix gràfic la ubicació geogràfica dels municipis de Catalunya, aportant informació relativa al nombre d'habitants i permetent distingir les comarques a les que pertanyen. Tres informacions en un mateix gràfic.

Origen de dades:

Per als 947 municipis de Catalunya obtindrem la seva ubicació geogràfica (les seves coordenades UTMx,UTMy) i la comarca a la que pertanyen extraient-los del Nomenclàtor de l'Institut Cartogràfic de Catalunya i la seva població (del 2010) des del web de l'Idescat.

Estrategia:

• Com que totes les coordenades UTM de Catalunya es troben en una mateixa zona, la  31T, podem representar tots els municipis de forma lineal en un gràfic de dispersió amb els eixos UTMx i UTMy. Cada municipi es representarà com un punt en el gràfic. 
• Podem distingir fàcilment les comarques acolorint tots els municipis d'una mateixa comarca amb colors diferents als de la resta.
• Per últim podem representar la població de cada municipi mitjançant un cercle on el radi variï en funció del nombre d'habitants. Aquest radi però no podrà variar linealment en funció de la població, ja que tenim municipis com Barcelona amb 1615448 habitants i d'altres com Sant Jaume de Frontanyà amb només 19 habitants. La solució triada en aquest cas és fer servir una escala logarítmica (base 10) per tal de determinar el radi de cada municipi. D'aquesta manera ens mourem en un interval de radis entre 1 i 6.

Implementació:

• Aprofitarem les possibilitats gràfiques del Canvas d'HTML5 per fer la visualització d'aquestes dades.
• Començarem la construcció d'una llibreria JavaScript per a la visualització de dades i que anirem completant amb d'altres projectes.
• Les dades necessàries per a la visualització estaran codificades mitjançant JSON. Al tractar-se d'una tecnologia accessible per a molts llenguatges de programació permetrà que pugui ser utilitzada des de projectes programats amb diferents llenguatges.
• Les dades s'han preparat directament en un full de càlcul per tal de muntar la porció de codi JSON de la següent manera:

  ="{'x': "&D2&", 'y': "&E2&",'r':"&N2&",'c':'"&L2&"'},"

• per donar com a sortida:

 {'x': 3632, 'y': 45787,'r':2,'c':'A36C11'},

 

Llibreria JLib:

La versió 1 de la llibreria JLib està publicada en aquest repositori.

Per fer-la servir simplement l'haurem d'instanciar en un document HTML de la següent manera:

<script language="JavaScript" src="https://sites.google.com/site/visualitzaciodades/home/repositori/JLib.js"></script>

Exemple:

Haurem de disposar d'un objecte HTML Canvas, el llenç sobre el que es pintarà el gràfic. El crearem indicant el seu identificador (id) i les seves dimensions, per exemple així:

<canvas id="diagram" width="590" height="570" style='border:1px solid orange'></canvas>

Les dades les haurem de definir en un objecte JSON dins d'un script. En aquest exemple tenim:

<script type='text/javascript'>
<!--
var sampleDataDiagram = {
   "type":"xyw",
   "margin":{"x":50, "y":40},
   "dimension":{"t":47500,"b":44900,"l":2600,"r":5300,},
   "axisX":{"y":44900,"color":"blue","width":1,"label":"UTMx","marks":{"from":3000,"to":5000,"inc":500}},
   "axisY":{"x":2600,"color":"blue","width":1,"label":"UTMy","marks":{"from":45000,"to":47500,"inc":500}},
   "default":{"strokeColor":"green","fillColor":"black","strokeWidth":0.01},
   "data": [
 {'x': 3632, 'y': 45787,'r':2,'c':'A36C11'},
 {'x': 3469, 'y': 45697,'r':3,'c':'A36C11'},
 {'x': 3583, 'y': 45730,'r':2,'c':'A36C11'},

    ...

 {'x': 4405, 'y': 46007,'r':3,'c':'AEFAEE'}

 ]
};
-->
</script>

Per últim només toca cridar a la funció diagram de la llibreria JLib, passant-li com a paràmetres l'objecte JSON i una referència al Canvas.

diagram(sampleDataDiagram,document.getElementById('diagram'));

Tot això funcionant ho tenim fent clic a sobre del canvas (sota aquestes línies).