D3 és extremadament flexible sobre el tipus de dades que accepta. Aquest capítol fa una introducció a les estructures de dades que es fan servir més amb JavaScript i D3.
Una variable és un conjunt de dades, el bloc més petit que és pot anomenar conjunt de dades. Les variables són els fonaments de totes les altres estructures de dades, que senzillament són altres tipus de configuració de les mateixes variables.
Si ets nou a JavaScript, has de saber que es un llenguatge de tipus loosely typed , que vol dir que no fa falta que especifiques quin type (tipus) d'informació guardarà la variable previament a fer-la servir.
Molts altres llenguatges, com Java (que és completament diferent de JavaScript!), requereix que defineixis el tipus de dada que contindrà la variable quan la defineixes, com ara int, float, boolean, or String.
//Declarant variables a Java
int number = 5;
float value = 12.3467;
boolean active = true;
String text = "Crystal clear";
JavaScript, en canvi, defineix automaticament el types a la variable en funció del tipus de informació que se li assigna. (Fixat que '' or "" indica un valor de cadena. Prefereixo les dobles cometes "", però a algunes persones els hi agrada més les simples ''.)
//Declarant una variable a JavaScript
var number = 5;
var value = 12.3467;
var active = true;
var text = "Crystal clear";
Quin avorriment — var, var, var, var! — pero molt útil. Podem declarar i posar nom a variables abans de saber quin tipus de dades contindran. Fins i tot pots canviar el tipus de dada de la variable en temps real sense que JavaScript embogeixi.
var value = 100;
value = 99.9999;
value = false;
value = "This can't possibly work.";
value = "Argh, it does work! No errorzzzz!";
Una matriu ("array en anglès") és una seqüència de valors, convenientment guardats en una sola variable.
Fer un seguiment de valors relacionats en variables separades és totalment ineficient:
var numberA = 5;
var numberB = 10;
var numberC = 15;
var numberD = 20;
var numberE = 25;
Reescriure-ho com una matriu és molt més senzill. Els claudàtors [] indiquen que és una matriu, mentre que per separar els valors de la matriu es fa servir la coma:
var numbers = [ 5, 10, 15, 20, 25 ];
Les matrius són omnipresents en la visualització de dades, pel que has de tenir-les mot per ma. Pots accedir (recuperar) un valor d'una matriu utilitzant notació suport:
numbers[2] //Retorna el valor 15
El nombre dins dels claudàtors es refereix a la posició del valor dins la matriu. Recorda, les posicions de la matriu es comencen a comptar des de zero, així que la primera posició és 0, la segona es 1, i així succesivament.
numbers[0] //Retorna 5
numbers[1] //Retorna 10
numbers[2] //Retorna 15
numbers[3] //Retorna 20
numbers[4] //Retorna 25
Algunes persones troben útil pensar en les matrius com si fos una taula amb files i columnes:
ID | Value
------------
0 | 5
1 | 10
2 | 15
3 | 20
4 | 25
Les matrius poden tenir qualsevol tipus de dada, no només nombres sencers.
var percentages = [ 0.55, 0.32, 0.91 ];
var names = [ "Ernie", "Bert", "Oscar" ];
percentages[1] //Retorna 0.32
names[1] //Retorna "Bert"
La visualització de dades basada en codi no seria possible sense les matrius i la poderosa instrucció de bucles for(). Juntes, formen el duo dinàmic friki de les dades. (Si no et consideres un "friki de les dades", et recordo que estàs llegint el capítol titolat "tipus de dades").
Una matriu organitza grans quantitats de dades en el lloc que els hi correspon. Així la instrucció for() pot fer un bucle i aplicar alguna acció per cadascun d'ells de manera ràpida i efectiva — com ara, expressar el seu valor d'una forma visual.
D3 sovint gestiona aquest bucle per nosaltres, amb el seu mètode màgic data(), però és important ser capaç de construir els teus propis bucles.
No entraré en els mecanismes del codi for() aquí; això donaria per un altre tutorial sencer. Pero fixa't amb aquest exemple, que fa un bucle sobre els valors numbers d'abans.
for (var i = 0; i < numbers.length; i++) {
console.log(numbers[i]); //Escriu el valor a la consola
}
Veus la part numbers.length? Aquesta es la part interessant. Si numbers te 10 posicions de llargada, el bucle es repetirà 10 vegades. Si en té 10 milions… doncs si, es repetirà 10 milions . Això és el que els ordinador saben fer millor: agafar un conjunt de instruccions i executar-les una i altra vegada. I això és precisament la causa de perque la visualització de dades és tan agraida — tu dissenyes i codifiques un sistema de visualització, i el sistema et respon de la manera que esperes independenment del tipus de dades. El sistema de regles de representació és consistent encara que les dades no ho siguin.
Les matrius son adequades per assignar llistes de valors simples, però si les dades són més complexes llavors és millor fer servir els objectes.
Pel que ens ocupa, pensa en els objectes de JavaScript com una estructura de dades personalitzada.
Fem servir claus {} per definir un objecte. Dins les claus incluim indexs i valors. Els dos punts : separen cada index del seu valor, i una coma separa cada parella index/valor.
var fruit = {
kind: "grape",
color: "red",
quantity: 12,
tasty: true
};
Per fer referència a cada valor, podem fer servir la notació amb punt , especificant el nom de l'index:
fruit.kind //Retorna "grape"
fruit.color //Retorna "red"
fruit.quantity //Retorna 12
fruit.tasty //Retorna true
Pensa en el valor com una "propietat" de l'objecte.
Oh, mira, fruita. “Quin tipus de fruita és?” et pots preguntar.
Doncs resulta que, fruit.kind es "grape".
“Es saborosa?” Oh, i tant, perque fruit.tasty és true.
Pots combinar aquestes dues estructures per crear una matriu d'objectes, o objectes de matrius, o objectes d'objectes, o, bé, básicament qualsevol estructura que doni sentit a les teves dades.
Diguem que hem comprat un parell més de peces de fruita, i volem incorporar-les al nostre catàleg. Hem fet servir claudàtors [] a la part exterior, que indiquen que és una matriu, seguida de claus {}, i la notració del tipus objecte al seu interior, amb cada objecte separat per comes.
var fruits = [
{
kind: "grape",
color: "red",
quantity: 12,
tasty: true
},
{
kind: "kiwi",
color: "brown",
quantity: 98,
tasty: true
},
{
kind: "banana",
color: "yellow",
quantity: 0,
tasty: true
}
];
Per accedidr a aquestes dades, només hem de seguir el camí dels índex fins al valor que volem. Recorda, [] vol dir matrius, i {} vol dir objecte. fruits és una matriu, així que farem servir la notació amb claudàtors per expecificar que es l'índex de una matriu:
fruits[1]
Seguim!. Cada element de la matriu és un objecte, per tant només cal un punt i un índex de l'objecte:
fruits[1].quantity //Retorna 98
Aquí tens el mapa de com accedir a cadascún dels valors de la matriu d'objectes fruits:
fruits[0].kind == "grape"
fruits[0].color == "red"
fruits[0].quantity == 12
fruits[0].tasty == true
fruits[1].kind == "kiwi"
fruits[1].color == "brown"
fruits[1].quantity == 98
fruits[1].tasty == true
fruits[2].kind == "banana"
fruits[2].color == "yellow"
fruits[2].quantity == 0
fruits[2].tasty == true
Si, perfecte, tenim fruits[2].quantity bananas.
En algun moment del teu estudi de D3, et trobaràs amb la notació d'objectes de JavaScript(JavaScript Object Notation).
Pots llegir-ne els detalls aquí, però JSON es bàsicamenet una sintaxi específica per organitzar dades com a objectes de JavaScript. La sintaxi esta optimitzada per fer-se servir amb JavaScript (obviament) i consultes d'AJAX, raó per la qual veuràs moltes APIs basades en la web que escupt dades en format JSON. És més ràpid i fàcil d'analitzar amb JavaScript que XML, i per suposat D3 s'entén bé amb aquest tipus de format.
Ès això. No sembla gaire diferent del que ja hem vist:
var jsonFruit = {
"kind": "grape",
"color": "red",
"quantity": 12,
"tasty": true
};
La única diferència és que els índexs estan escrits entre cometes "", cosa que els converteix en valors de cadena (string).
Al igual que amb JSON és només una formalització de la sintaxi d'objectes de JavaScript, GeoJSON és un altre tipus de formalització de la sintaxi d'objectes de JSON, optimitzada per a guardar dades geogràfiques (geodata). Tots els objedtes GeoJSON són objectes JSON , i tots els objectes JSON son objectes de JavaScript.
GeoJSON pot guardar coordenades de punts geogràfiques (normalment longitud i latitud), però també formes (com línies i polígons) i d'altres característiques espaials.
Si tens una gran quantitat de geodata, val la pena analitzar-la en format GeoJSON per optimitzar el seu ús per part de D3.
Entrarem en més detalls del format GeoJSON quan parlem sobre els geomapes, peró de moment, només et cal saber com es veu una senzilla dada GeoJSON:
var geodata = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Point",
"coordinates": [ 150.1282427, -24.471803 ]
},
"properties": {
"type": "town"
}
}
]
};
(Pot ser confús, però la longitud va sempre llistada abans que la latitud. Cal acostumar-se a pensar en termes de lon/lat en lloc de lat/lon.)
Ves al següent capítol: Fent un diagrama de barres →