Descargamos el archivo del a\u00f1o que queramos, pero la versi\u00f3n CSV. Para preparar este ejemplo se han cogido los datos de 2018, pero por la fecha en que hemos descargado los datos (finales de diciembre de 2018) solo est\u00e1n los datos hasta noviembre.<\/p>\n
\u00bfPor qu\u00e9 cogemos el archivo csv<\/em>? Pues porque es el tipo de archivo que p5.js puede abrir para recuperar los datos (p\u00e1gina 182 del libro).<\/p>\n Problema<\/strong><\/p>\n Este archivo, a pesar de que es csv<\/em> y los programas de hoja de c\u00e1lculo lo abrir\u00e1n sin problemas, no usa como separador ninguna de las dos opciones que nos permite loadTable()<\/span><\/a> que son comas o tabuladores. Este csv<\/em> usa como separadores puntos y comas, que es el formato que se usa ah\u00ed donde usamos la coma como separador de decimales (m\u00e1s explicaciones en\u00a0la Wikipedia: CSV<\/span><\/a>). Como los puntos y coma no est\u00e1n soportados por loadTable()<\/span>, lo primero que hay que hacer es sustituir todos los puntos y coma por comas. Esto lo podemos hacer f\u00e1cilmente con nuestro editor habitual. \u00a1Cuidado!<\/strong> Si tenemos n\u00fameros con decimales, la mejor opci\u00f3n ser\u00e1 cambiar los puntos y comas por tabuladores. Adem\u00e1s, habr\u00e1 que tener en cuenta el hecho de que p5.js usa el punto como separador de decimales (pero esto se podr\u00e1 arreglar una vez recuperados los datos).<\/p>\n \n<\/div>\n Bien, ya tenemos el archivo csv<\/em> como le gusta a loadTable()<\/span>. Lo pod\u00e9is descargar de aqu\u00ed: http:\/\/multimedia.uoc.edu\/carlos\/marques\/Dades\/datos\/AccidentesBicicletas_2018.csv<\/a>.<\/u><\/p>\n Para poder trabajar con los datos, primero tenemos que saber qu\u00e9 datos tenemos y, sobre todo, \u00a1c\u00f3mo est\u00e1n organizados! Descargaos el archivo csv<\/em> de la web del ayuntamiento y abridlo con vuestro programa de hoja de c\u00e1lculo preferida. Se nos abrir\u00e1 un archivo con este aspecto:<\/p>\n Vemos que tenemos una primera fila de encabezamiento. Esto es importante porque esta informaci\u00f3n tambi\u00e9n la tendremos que llamar en la funci\u00f3n loadTable()<\/span>.<\/p>\n Despu\u00e9s del encabezamiento cada fila es un accidente. Y de cada accidente tenemos un mont\u00f3n de datos: fecha, hora aproximada, d\u00eda de la semana, distrito, etc. En la pr\u00e1ctica, por el ejercicio que haremos, de todos los datos solo usaremos la columna \u00abD\u00cdA SEMANA\u00bb. \u00a1Y un solo dato ya nos da para hacer una visualizaci\u00f3n!<\/p>\n El siguiente paso ya es hacer el programa que muestre las gr\u00e1ficas representativas de estos datos. Para simplificar, haremos un gr\u00e1fico de barras donde las barras representar\u00e1n el n\u00famero de accidentes con bicicletas implicadas, por d\u00eda de la semana. El resultado con estos datos ser\u00e1 este:<\/p>\n Es muy sencillo, pero lo que nos interesa es ver c\u00f3mo recuperamos y trabajamos los datos.<\/p>\n Primer paso, recuperar los datos.<\/p>\n Para recuperar los datos necesitamos:<\/p>\n Igual que nos pasaba al cargar las im\u00e1genes, estos programas no los podremos ejecutar en local, har\u00e1 falta que est\u00e9n en un servidor.<\/p>\n El siguiente paso ser\u00e1 trabajar los datos. \u00bfC\u00f3mo? Pues contaremos, para cada d\u00eda de la semana, cu\u00e1ntos accidentes ha habido. Vemos el programa c\u00f3mo va (crece bastante, pero no os asust\u00e9is, no es nada complicado). De momento no ponemos todav\u00eda la funci\u00f3n draw()<\/span> porque solo estamos recuperando y preparando los datos.<\/p>\n Como vemos, la gracia est\u00e1 en la funci\u00f3n preparacion()<\/span> que coge los datos que hemos cargado y calcula cu\u00e1ntos accidentes ha habido cada d\u00eda de la semana.<\/p>\n Vamos poco a poco. Antes que nada, necesitamos un array<\/em> para guardar el n\u00famero de accidentes de cada d\u00eda de la semana. A este array<\/em> lo hemos llamado diasSemana<\/span>. Tambi\u00e9n hemos declarado una variable maximo<\/span> donde guardaremos el valor m\u00e1s grande (el n\u00famero de accidentes del d\u00eda que ha habido m\u00e1s accidentes). Lo usaremos a la hora de dibujar la gr\u00e1fica en el canvas<\/em>.<\/p>\n Vamos ahora a ver qu\u00e9 hace la funci\u00f3n preparacion()<\/span>. Lo primero que hace es esto:<\/p>\n Pone las 7 posiciones del array<\/em> que usaremos (del 0 al 6) a 0.<\/p>\n \u00a1Y es muy importante!<\/strong> Si no lo hacemos, nuestro programa no funcionar\u00e1.<\/p>\n<\/div>\n El siguiente paso es revisar todos los datos que hay en el archivo csv. Para lo cual usaremos una instrucci\u00f3n for<\/span><\/strong> de este modo:<\/p>\n Utilizamos una funci\u00f3n bicis.getRowCount()<\/span> que nos dice cu\u00e1ntos datos podemos encontrar en la variable bicis<\/span>.<\/p>\n El siguiente paso es extraer, de cada fila, el d\u00eda de la semana:<\/p>\n Repasemos un poco. El for<\/span><\/strong> nos ayudar\u00e1 a recorrer, una a una, todas las filas del archivo. Para cada accidente (recordad, uno por fila) necesitamos saber el d\u00eda de la semana en que ha pasado. La funci\u00f3n bicis.getString(i<\/em>,\u201dDIA SEMANA\u201d)<\/span> coge, de la variable bicis <\/span>(que, recordad, es donde hemos guardado todos los datos del archivo), el dato que hay en la fila i<\/em>, columna DIA SEMANA<\/em>.<\/p>\n El siguiente paso es sumar 1 al contador de este d\u00eda de la semana. Esto lo hacemos con la instrucci\u00f3n siguiente, el switch<\/span>:<\/p>\n As\u00ed, si el d\u00eda es \u00abLUNES\u00bb sumamos 1 a diasSemana[0]<\/span>. Y si es domingo le sumaremos 1 a diasSemana[6]<\/span>.<\/p>\n Al final, se calcula cu\u00e1l es el n\u00famero m\u00e1s grande de accidentes que ha habido en un d\u00eda determinado de la semana (como hemos dicho, usaremos este dato para dibujar mejor la gr\u00e1fica).<\/p>\n Ahora ya tenemos los datos que queremos representar. Solo hay que representarlos. Y dibujar es cosa de la funci\u00f3n draw()<\/span>.<\/p>\n Lo que hacemos es, para cada d\u00eda de la semana, dibujar un rect\u00e1ngulo. El for<\/span><\/strong> nos sirve para pintar los 7 d\u00edas. Y el dibujo se hace con una funci\u00f3n rect()<\/span>.<\/p>\n Dibujar las barras es un poco complicado, as\u00ed que iremos viendo todos los par\u00e1metros de la funci\u00f3n rect()<\/span> uno a uno. Primero, sin embargo, recordemos c\u00f3mo es la funci\u00f3n\u00a0rect()<\/span><\/a>:<\/p>\n Recordemos que empezamos a pintar los rect\u00e1ngulos a partir de su v\u00e9rtice superior izquierdo. Bien, veamos ahora los diferentes par\u00e1metros. La x<\/strong>:<\/p>\n Lo que estamos haciendo es que la primera barra la pondremos a 40 p\u00edxeles de la izquierda del canvas<\/em>. La segunda 60 p\u00edxeles m\u00e1s all\u00e1, y as\u00ed sucesivamente. Como las barras las haremos de 40 p\u00edxeles, tendremos una separaci\u00f3n de 20 p\u00edxeles entre barra y barra.<\/p>\n Ahora la y<\/strong>.<\/p>\n Esto es m\u00e1s complicado. Las barras empezar\u00e1n (visualmente) en los 210 p\u00edxeles. Y tendr\u00e1n una altura m\u00e1xima de 200 p\u00edxeles. Primero, lo que tenemos que hacer es convertir el n\u00famero de accidentes, que estar\u00e1 entre 0 y maximo<\/span> (\u00bfrecord\u00e1is de d\u00f3nde viene este valor?), en un valor entre 0 y 200. Esto lo hacemos con la funci\u00f3n\u00a0map()<\/span><\/a>\u00a0<\/span>que ya hab\u00edamos trabajado. Con la funci\u00f3n map()<\/span> tenemos la altura que tendr\u00e1 la barra. Para decidir en qu\u00e9 posici\u00f3n y <\/strong>hay que empezar, restamos a la posici\u00f3n final (210) la altura de la barra. Y ya sabemos d\u00f3nde tenemos que empezar a pintar.<\/p>\n Ahora nos falta determinar la anchura:<\/p>\n y la altura<\/p>\n Que ya hab\u00edamos usado antes. El programa queda as\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