Descarreguem l\u2019arxiu de l\u2019any que vulguem, per\u00f2 la versi\u00f3 CSV. Per a preparar aquest exemple hem agafat les dades de 2018, per\u00f2 per la data en qu\u00e8 hem descarregat les dades (finals de desembre de 2018) nom\u00e9s hi ha dades fins al novembre.<\/p>\n
Per qu\u00e8 cal agafar l\u2019arxiu csv<\/em>? Doncs perqu\u00e8 \u00e9s el tipus d\u2019arxiu que p5.js pot obrir per a recuperar les dades (p\u00e0gina 182 del llibre).<\/p>\n Problema<\/strong><\/p>\n Aquest arxiu, tot i que \u00e9s csv<\/em> i els programes de full de c\u00e0lcul l\u2019obriran sense problemes, no fa servir com a separador cap de les dues opcions que ens permet loadTable()<\/span><\/a> que s\u00f3n comes o tabuladors. Aquest csv<\/em> fa servir com a separadors punts i comes, que \u00e9s el format que es fa servir all\u00e0 on fem servir la coma com a separador de decimals (m\u00e9s explicacions a la Viquip\u00e8dia: CSV<\/span><\/a>). Com que els punts i coma no estan suportats per loadTable()<\/span>, el primer que toca fer \u00e9s substituir tots els punts i coma per comes. Aix\u00f2 ho podem fer f\u00e0cilment amb el nostre editor habitual. Compte<\/strong>! Si tenim nombres amb decimals, la millor opci\u00f3 ser\u00e0 canviar els punt i comes per tabuladors. A m\u00e9s, caldr\u00e0 tenir en compte el fet que p5.js fa servir el punt com a separador de decimals (per\u00f2 aix\u00f2 es podr\u00e0 arreglar un cop recuperades les dades).<\/p>\n \n<\/div>\n B\u00e9, ja tenim l\u2019arxiu csv<\/em> com li agrada a loadTable()<\/span>. El podeu descarregar aqu\u00ed: http:\/\/multimedia.uoc.edu\/carlos\/marques\/Dades\/datos\/AccidentesBicicletas_2018.csv<\/a>.<\/u><\/p>\n Per a poder treballar amb les dades, primer hem de saber quines dades tenim i, sobretot, com estan organitzades! Descarregueu-vos l\u2019arxiu csv<\/em> de la web de l\u2019Ajuntament i obriu-lo amb el vostre programa de full de c\u00e0lcul preferit. Se\u2019ns obrir\u00e0 un arxiu amb aquest aspecte:<\/p>\n Veiem que tenim una primera fila d\u2019encap\u00e7alament. Aix\u00f2 \u00e9s important perqu\u00e8 aquesta informaci\u00f3 tamb\u00e9 l\u2019haurem de fer saber a la funci\u00f3 loadTable()<\/span>.<\/p>\n Despr\u00e9s de l\u2019encap\u00e7alament cada fila \u00e9s un accident. I de cada accident tenim un munt de dades: data, hora aproximada, dia de la setmana, districte, etc. A la pr\u00e0ctica, per a l\u2019exercici que farem, de totes les dades nom\u00e9s farem servir la columna \u00abDIA SEMANA\u00bb. I una sola dada ja ens dona per fer una visualitzaci\u00f3!<\/p>\n El pas seg\u00fcent ja \u00e9s fer el programa que mostri les gr\u00e0fiques representatives d\u2019aquestes dades. Per a simplificar-ho, farem un gr\u00e0fic de barres on les barres representaran el nombre d\u2019accidents amb bicicletes implicades, per dia de la setmana. El resultat amb aquestes dades ser\u00e0 aquest:<\/p>\n \u00c9s molt senzill per\u00f2 el que ens interessa \u00e9s veure com recuperem i treballem les dades.<\/p>\n Primer pas, recuperar les dades.<\/p>\n Per a recuperar les dades, necessitem:<\/p>\n Igual que ens passava quan carreg\u00e0vem les imatges, aquests programes no els podrem executar en local, caldr\u00e0 que estiguin a un servidor.<\/p>\n El pas seg\u00fcent ser\u00e0 treballar les dades. Com? Doncs comptarem, per a cada dia de la setmana, quants accidents hi ha hagut. Vegem el programa com va (creix for\u00e7a per\u00f2 no us espanteu, no \u00e9s gens complicat). De moment, encara no posem la funci\u00f3 draw()<\/span> perqu\u00e8 nom\u00e9s estem recuperant i preparant les dades.<\/p>\n Com veiem, la gr\u00e0cia est\u00e0 a la funci\u00f3 preparacion()<\/span> que agafa les dades que hem carregat i calcula quants accidents hi ha hagut cada dia de la setmana.<\/p>\n Anem a poc a poc. Primer de tot, necessitem un array<\/em> per a guardar el nombre d\u2019accidents de cada dia de la setmana. A aquest array li hem dit diasSemana<\/span>. Tamb\u00e9 hem declarat una variable maximo<\/span> on guardarem el valor m\u00e9s gran (el nombre d\u2019accidents del dia que hi ha hagut m\u00e9s accidents). Ho farem servir a l\u2019hora de dibuixar la gr\u00e0fica al canvas<\/em>.<\/p>\n Vegem qu\u00e8 fa la funci\u00f3 preparacion()<\/span>. El primer que fa \u00e9s aix\u00f2:<\/p>\n Posa les 7 posicions de l\u2019array<\/em> que farem servir (del 0 al 6) a 0.<\/p>\n I \u00e9s molt important!<\/strong> Si no ho fem, el nostre programa no funcionar\u00e0.<\/p>\n<\/div>\n El pas seg\u00fcent \u00e9s revisar totes les dades que hi ha a l\u2019arxiu csv. Per a aix\u00f2, farem servir una instrucci\u00f3 for<\/span> d\u2019aquesta manera:<\/p>\n Utilitzem una funci\u00f3 bicis.getRowCount()<\/span> que ens diu quantes dades podem trobar a la variable bicis<\/span>.<\/p>\n El pas seg\u00fcent \u00e9s extreure, de cada fila, el dia de la setmana:<\/p>\n Repassem una mica. El for<\/span><\/strong> ens ajudar\u00e0 a rec\u00f3rrer, una a una, totes les fileres de l\u2019arxiu. Per a cada accident (recordeu, un per fila) necessitem saber el dia de la setmana en qu\u00e8 ha passat. La funci\u00f3 bicis.getString(i<\/em>,\u201dDIA SEMANA\u201d)<\/span> agafa, de la variable bicis <\/span>(que recordeu \u00e9s on hem guardat totes les dades de l\u2019arxiu), la dada que hi ha a la fila i<\/em>, columna DIA SEMANA<\/em>.<\/p>\n El pas seg\u00fcent \u00e9s sumar 1 al comptador d\u2019aquest dia de la setmana. Aix\u00f2 ho fem amb la instrucci\u00f3 seg\u00fcent, el switch<\/span>:<\/p>\n Aix\u00ed, si el dia \u00e9s \u00abLUNES\u00bb sumen 1 a diasSemana[0]<\/span>. I si \u00e9s diumenge li sumarem 1 a diasSemana[6]<\/span>.<\/p>\n Finalment, calculem quin \u00e9s el nombre m\u00e9s gran d\u2019accidents que hi ha hagut en un dia determinat de la setmana (com hem dit, farem servir aquesta dada per a dibuixar millor la gr\u00e0fica).<\/p>\n Ara ja tenim les dades que volem representar. Nom\u00e9s cal representar-les. I dibuixar-ho \u00e9s cosa de la funci\u00f3 draw()<\/span>.<\/p>\n El que fem \u00e9s, per a cada dia de la setmana, dibuixar un rectangle. El for<\/span><\/strong> ens serveix per a pintar els 7 dies. I el dibuix es fa amb una funci\u00f3 rect()<\/span>.<\/p>\n Dibuixar les barres \u00e9s una mica complicat, aix\u00ed que anirem veient tots els par\u00e0metres de la funci\u00f3 rect()<\/span> un a un. Primer, per\u00f2, recordem com \u00e9s la funci\u00f3 rect()<\/span><\/a>:<\/p>\n Recordem que comencem a pintar els rectangles a partir del seu v\u00e8rtex superior esquerre. B\u00e9, veiem ara els diferents par\u00e0metres. L\u2019x<\/strong>:<\/p>\n El que estem fent, \u00e9s que la primera barra la posarem a 40 p\u00edxels de l\u2019esquerra del canvas<\/em>. La segona 60 p\u00edxels m\u00e9s enll\u00e0 i, aix\u00ed, successivament. Com que les barres les farem de 40 p\u00edxels, tindrem una separaci\u00f3 de 20 p\u00edxels entre barra i barra.<\/p>\n Ara l\u2019y<\/strong>.<\/p>\n Aix\u00f2 \u00e9s m\u00e9s complicat. Les barres comen\u00e7aran (visualment) als 210 p\u00edxels. I tindran una al\u00e7ada m\u00e0xima de 200 p\u00edxels. Primer el que hem de fer \u00e9s convertir el nombre d\u2019accidents, que estar\u00e0 entre 0 i maximo<\/span> (recordeu d\u2019on ve aquest valor?) a un valor entre 0 i 200. Aix\u00f2 ho fem amb la funci\u00f3 map()<\/span><\/a> que ja hem treballat. Amb la funci\u00f3 map()<\/span> tenim l\u2019al\u00e7ada que tindr\u00e0 la barra. Per a decidir a quina posici\u00f3 y<\/strong> cal comen\u00e7ar, restem a la posici\u00f3 final (210) l\u2019al\u00e7ada de la barra. I ja sabem on hem de comen\u00e7ar a pintar.<\/p>\n Ara ens falta determinar l\u2019amplada:<\/p>\n i l\u2019al\u00e7ada<\/p>\n que ja hem fet servir abans. El programa queda aix\u00ed:<\/p>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_5_005.jpg\")
<\/p>\n![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_5_007.jpg\")
<\/p>\nvar bicis;\r\n\r\nfunction preload() {\r\n bicis = loadTable(\"datos\/AccidentesBicicletas_2018.csv\", \"header\");\r\n}<\/pre>\n\n
var bicis;\r\nvar dia;\r\nvar diasSemana = [];\r\nvar maximo = 0;\r\n\r\nfunction preload() {\r\n bicis = loadTable(\"datos\/AccidentesBicicletas_2018.csv\", \"header\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(480, 240);\r\n noStroke();\r\n preparacion();\r\n}\r\n\r\nfunction preparacion(){\r\n for (var i = 0; i < 7; i++) {\r\n diasSemana[i]=0;\r\n}\r\nfor (var i = 0; i < bicis.getRowCount(); i++){\r\n dia = bicis.getString(i,\"DIA SEMANA\");\r\n switch (dia) {\r\n\u00a0\u00a0 case \"LUNES\":\r\n\u00a0\u00a0 diasSemana[0]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"MARTES\":\r\n\u00a0\u00a0 diasSemana[1]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"MIERCOLES\":\r\n\u00a0 diasSemana[2]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"JUEVES\":\r\n\u00a0\u00a0 diasSemana[3]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"VIERNES\":\r\n\u00a0\u00a0 diasSemana[4]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"SABADO\":\r\n\u00a0\u00a0 diasSemana[5]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"DOMINGO\":\r\n\u00a0\u00a0 diasSemana[6]++;\r\n\u00a0\u00a0 break;\r\n }\r\n}\r\nfor (var i = 0; i < 7; i++) {\r\n if (maximo < diasSemana[i]) {\r\n\u00a0\u00a0maximo = diasSemana[i];\r\n }\r\n }\r\n}<\/pre>\nfor (var i = 0; i < 7; i++) {\r\n diasSemana[i]=0;\r\n}<\/pre>\nfor (var i = 0; i < bicis.getRowCount(); i++){<\/pre>\ndia = bicis.getString(i,\"DIA SEMANA\");<\/pre>\n
switch (dia) {\r\n\u00a0\u00a0 case \"LUNES\":\r\n\u00a0\u00a0 diasSemana[0]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"MARTES\":\r\n diasSemana[1]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"MIERCOLES\":\r\n\u00a0\u00a0 diasSemana[2]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"JUEVES\":\r\n\u00a0\u00a0 diasSemana[3]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"VIERNES\":\r\n\u00a0\u00a0 diasSemana[4]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"SABADO\":\r\n\u00a0\u00a0 diasSemana[5]++;\r\n\u00a0\u00a0 break;\r\n\u00a0\u00a0 case \"DOMINGO\":\r\n\u00a0\u00a0 diasSemana[6]++; \r\n\u00a0\u00a0 break;\r\n}<\/pre>\nfor (var i = 0; i < 7; i++) {\r\n if (maximo < diasSemana[i]) {\r\n\u00a0\u00a0 maximo = diasSemana[i];\r\n }\r\n}<\/pre>\nfunction draw() {\r\n background(100);\r\n fill(255);\r\n for (var i = 0; i < 7; i++) {\r\n rect(40+(i*60), 210-map(diasSemana[i],0,maximo,0,200), 40, map(diasSemana[i],0,maximo,0,200));\r\n\u00a0\u00a0 }\r\n}<\/pre>\nrect(x, y, w, h)\r\nx\u00a0\u00a0\u00a0\u00a0 N\u00famero: coordenada x del rect\u00e1ngulo.\r\ny\u00a0\u00a0\u00a0\u00a0 N\u00famero: coordenada y del rect\u00e1ngulo.\r\nw\u00a0\u00a0\u00a0\u00a0 N\u00famero: ancho del rect\u00e1ngulo.\r\nh\u00a0\u00a0\u00a0\u00a0 N\u00famero: altura del rect\u00e1ngulo.<\/pre>\n
40+(i*60)<\/pre>\n
210-map(diasSemana[i],0,maximo,0,200)<\/pre>\n
40<\/pre>\n
map(diasSemana[i],0,maximo,0,200)<\/pre>\n
var bicis;\r\nvar dia;\r\nvar diasSemana = [];\r\nvar maximo = 0;\r\n\r\nfunction preload() {\r\n bicis = loadTable(\"datos\/AccidentesBicicletas_2018.csv\", \"header\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(480, 240);\r\n noStroke();\r\n preparacion();\r\n}\r\n\r\nfunction draw() {\r\n background(100);\r\n fill(255);\r\n for (var i = 0; i < 7; i++) {\r\n rect(40+(i*60), 210-map(diasSemana[i],0,maximo,0,200), 40, map(diasSemana[i],0,maximo,0,200));\r\n }\r\n}\r\n\r\nfunction preparacion(){\r\n for (var i = 0; i < 7; i++) {\r\n diasSemana[i]=0;\r\n}\r\nfor (var i = 0; i < bicis.getRowCount(); i++){\r\n dia = bicis.getString(i,\"DIA SEMANA\");\r\n switch (dia) {\r\n case \"LUNES\":\r\n diasSemana[0]++;\r\n break;\r\n case \"MARTES\":\r\n diasSemana[1]++;\r\n break;\r\n case \"MIERCOLES\":\r\n diasSemana[2]++;\r\n break;\r\n case \"JUEVES\":\r\n diasSemana[3]++;\r\n break;\r\n case \"VIERNES\":\r\n diasSemana[4]++;\r\n break;\r\n case \"SABADO\":\r\n diasSemana[5]++;\r\n break;\r\n case \"DOMINGO\":\r\n diasSemana[6]++;\r\n break;\r\n }\r\n}\r\nfor (var i = 0; i < 7; i++) {\r\n if (maximo < diasSemana[i]) {\r\n maximo = diasSemana[i];\r\n }\r\n }\r\n}<\/pre>\n
![\"\"](\"http:\/\/disseny-test.uoc.edu\/materials\/programacio\/wp-content\/uploads\/sites\/17\/2019\/07\/PID_00258586_5_009.jpg\")
<\/p>\n