Para hacer este ejemplo, tomamos los datos de 2021, que tiene disponibles todos los meses.<\/p>\n
Lo primero que deberemos hacer es un peque\u00f1o cambio en el archivo. Por defecto, en Espa\u00f1a los archivos .csv vienen delimitados por puntos y coma, pero el est\u00e1ndar es que sea una coma. Esto es as\u00ed porque en Espa\u00f1a el separador de decimales es una coma, mientras que en los pa\u00edses anglosajones es un punto. Para poder diferenciar la coma decimal de la coma separadora de campos de datos, en Espa\u00f1a se usa el ; como separador de datos.<\/p>\n
As\u00ed que lo primero que haremos ser\u00e1 abrir el archivo descargado con un editor de hojas de c\u00e1lculo y volverlo a guardar como texto separado por tabuladores.<\/p>\n Podemos aprovechar que abrimos el archivo para hacernos una idea de c\u00f3mo est\u00e1n distribuidos los datos y de sus principales caracter\u00edsticas.<\/p>\n Ahora ya podemos subir el archivo a la Mediateca de CodeLab.<\/p>\n Para poderlo usar en nuestro programa, deberemos abrirlo con la instrucci\u00f3n loadTable<\/span>. Haremos como con las im\u00e1genes, crear una variable y, dentro de la funci\u00f3n preload()<\/span>, cargar los datos.<\/p>\n A loadTable<\/span> le pasamos tres par\u00e1metros: URL, que es la direcci\u00f3n de nuestro archivo en el servidor (nos lo indica la Mediateca de CodeLab); \u00abtsv\u00bb le dice a loadTable<\/span> que el archivo est\u00e1 delimitado por tabuladores, y \u00abheader\u00bb le dice que la primera fila de datos es de cabecera.<\/p>\n Ya tenemos el archivo y ahora vamos a trabajar con \u00e9l. Vamos a representar el n\u00famero de accidentes por meses, as\u00ed que lo que haremos es recorrer todos los datos contando el n\u00famero de accidentes de cada mes.<\/p>\n Para guardar el n\u00famero de accidentes de cada mes, crearemos un array<\/em> de doce posiciones:<\/p>\n Para obtener estos datos, recorreremos toda la tabla de datos mirando la fecha, y nos quedaremos con el mes. Aqu\u00ed nos servir\u00e1 saber c\u00f3mo est\u00e1n guardados los datos. Cuando hemos abierto el archivo, hemos visto que todas las fechas tienen el formato dd\/mm\/aaaa a\u00f1adiendo un cero a la izquierda cuando es necesario. Por lo tanto, de la fecha nos quedaremos con los valores de mm, situados en las posiciones cuarta y quinta de la fecha.<\/p>\n Veamos c\u00f3mo queda ahora nuestro programa.<\/p>\n En la funci\u00f3n setup()<\/span> creamos el canvas<\/em> y llamamos a la funci\u00f3n preparaci\u00f3n que guardar\u00e1 en la tabla meses cu\u00e1ntos accidentes hay cada mes. Cuatro apuntes:<\/p>\n Si a\u00f1adimos la instrucci\u00f3n console.log(meses);<\/span> despu\u00e9s de llamar a la funci\u00f3n preparacion()<\/span>, veremos en la consola la tabla con los datos obtenidos:<\/p>\n El siguiente paso es visualizar los datos. Para ello, vamos a usar un simple gr\u00e1fico de barras.<\/p>\n El primer paso consistir\u00e1 en saber cu\u00e1l es el valor m\u00e1ximo de los obtenidos. \u00bfPor qu\u00e9? Porque as\u00ed podemos ajustar bien la altura de las barras. Si no sabemos cu\u00e1l es la altura m\u00e1xima que debemos representar, el gr\u00e1fico podr\u00eda quedar muy peque\u00f1o o demasiado grande.<\/p>\n Vamos a crear una funci\u00f3n que nos calcule el valor m\u00e1ximo de todos los elementos de un array<\/em>:<\/p>\n Ahora ya tenemos los datos que queremos representar y un valor m\u00e1ximo para determinar el valor de las barras. Solo queda representar los datos. 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 nos sirve para pintar los siete 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 rect()<\/span>:<\/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<\/em>:<\/p>\n Lo que estamos haciendo es que la primera barra la pondremos a 30 p\u00edxeles de la izquierda del canvas<\/em>. La segunda, 46 p\u00edxeles m\u00e1s all\u00e1, y as\u00ed sucesivamente. Como las barras las haremos de 30 p\u00edxeles, tendremos una separaci\u00f3n de 16 p\u00edxeles entre barra y barra. De esta manera, los doce meses quedan bien presentados.<\/p>\n Ahora la y<\/em>.<\/p>\n Esto es m\u00e1s complicado. Las barras empezar\u00e1n (visualmente) en los 380 p\u00edxeles. Y tendr\u00e1n una altura m\u00e1xima de 100 p\u00edxeles. Primero, lo que tenemos que hacer es convertir el n\u00famero de accidentes, que estar\u00e1 entre 0 y max<\/span> (\u00bfrecord\u00e1is de d\u00f3nde viene este valor?), en un valor entre 0 y 100. Esto lo hacemos con la funci\u00f3n map()<\/span>. Con la funci\u00f3n map()<\/span> obtenemos la altura que tendr\u00e1 la barra. Para decidir en qu\u00e9 posici\u00f3n y<\/em> hay que empezar, restamos a la posici\u00f3n final (380) 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 Hasta aqu\u00ed hemos visto c\u00f3mo recuperar los datos y trabajar despu\u00e9s con estos.<\/p>\n Sin embargo, es verdad que falta informaci\u00f3n. Ser\u00eda recomendable al menos indicar a qu\u00e9 mes representa cada barra y el n\u00famero total de accidentes.<\/p>\n Para ello, haremos que cuando el cursor pase por encima de una barra, se pinte de color rojo y se escriba el d\u00eda de la semana y el n\u00famero de accidentes encima, como se puede ver en esta captura:<\/p>\n Los cambios que tenemos que hacer afectan a las funciones setup()<\/span> y draw()<\/span>. Adem\u00e1s, en el inicio hemos a\u00f1adido una nueva variable:<\/p>\n Esta variable es una tabla en la que guardamos los nombres de los meses, para usarlos despu\u00e9s en la creaci\u00f3n del texto.<\/p>\n En la funci\u00f3n setup()<\/span> hemos a\u00f1adido las dos instrucciones que determinan el tipo de letra y el tama\u00f1o.<\/p>\n En la funci\u00f3n draw()<\/span> hemos a\u00f1adido un if<\/span> para que cuando el rat\u00f3n est\u00e9 encima de una barra se escriba el nombre del mes y el n\u00famero de accidentes que ha habido.<\/p>\n Con este c\u00f3digo, podemos bajarnos otro a\u00f1o de datos (siempre y cuando mantenga la misma estructura) y representarlo.<\/p>\n Los datos provenientes de fuentes espa\u00f1olas suelen encontrarse en archivos .csv que no est\u00e1n delimitados por comas, sino por puntos y comas. Vamos a ver un ejemplo que trata muchas de las instrucciones que hemos ido viendo a lo largo del curso y que trabaja con datos de una fuente espa\u00f1ola. Para realizar este ejemplo, […]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":[],"acf":[],"_links":{"self":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/458"}],"collection":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/comments?post=458"}],"version-history":[{"count":4,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/458\/revisions"}],"predecessor-version":[{"id":1009,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/458\/revisions\/1009"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}![\"\"](\"\/wp-content\/uploads\/2022\/10\/PID_00290094_132.jpg\")
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\nlet bicis;\r\nfunction preload() {\r\n bicis = loadTable(\"URL\", \"tsv\", \"header\");\r\n}<\/pre>\nlet meses = [0,0,0,0,0,0,0,0,0,0,0,0];<\/pre>\n
let bicis;\r\nlet meses = [0,0,0,0,0,0,0,0,0,0,0,0];\r\n\r\nfunction preload() {\r\n bicis = loadTable(\"https:\/\/codelab.uoc.edu\/filemanager\/source_repo\/ccasadom\/AccidentesBicicletas_2021-TAB.txt\", \"tsv\", \"header\");\r\n}<\/pre>\n\n
![\"\"](\"\/wp-content\/uploads\/2022\/10\/PID_00290094_133.jpg\")
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\nfunction maxArray(tabla){\r\n let max = tabla[0];\r\n for (let i = 1; i < tabla.lenght; i++) { if (tabla[i]>max) {\r\n max = tabla[i];\r\n }\r\n }\r\n return max; \r\n}<\/pre>\nfunction draw() {\r\n background(100);\r\n fill(255);\r\n for (var i = 0; i < 12; i++) {\r\n rect(30+(i*46), 380-map(meses[i],0,max,0,100), 30, map(meses[i],0,max,0,100));\r\n }\r\n}<\/pre>\nrect(x, y, w, h)\r\nx N\u00famero: coordenada x del rect\u00e1ngulo.\r\ny N\u00famero: coordenada y del rect\u00e1ngulo.\r\nw N\u00famero: ancho del rect\u00e1ngulo.\r\nh N\u00famero: altura del rect\u00e1ngulo.<\/pre>\n
30+(i*46)<\/pre>\n
380-map(meses[i],0,max,0,100)<\/pre>\n
30<\/pre>\n
map(meses[i],0,max,0,100)<\/pre>\n
let bicis;\r\nlet meses = [0,0,0,0,0,0,0,0,0,0,0,0];\r\nlet max;\r\n\r\nfunction preload() {\r\n bicis = loadTable(\"https:\/\/codelab.uoc.edu\/filemanager\/source_repo\/ccasadom\/AccidentesBicicletas_2021-TAB.txt\", \"tsv\", \"header\");\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(600, 400);\r\n noStroke();\r\n preparacion();\r\n max = maxArray(meses);\r\n}\r\n\r\nfunction draw() {\r\n background(100);\r\n fill(255);\r\n for (var i = 0; i < 12; i++) {\r\n rect(30+(i*46), 380-map(meses[i],0,max,0,100), 30, map(meses[i],0,max,0,100));\r\n }\r\n}\r\n\r\nfunction preparacion(){\r\n for (let i = 0; i < bicis.getRowCount(); i++) {\r\n let fecha = bicis.get(i,1);\r\n let mes = fecha.slice(3,5);\r\n meses[parseInt(mes)-1]++; \r\n } \r\n}\r\n\r\nfunction maxArray(tabla){\r\n let max = tabla[0];\r\n for (let i = 1; i < tabla.lenght; i++) { if (tabla[i]>max) {\r\n max = tabla[i];\r\n }\r\n }\r\n return max; \r\n}<\/pre>\n![\"\"](\"\/wp-content\/uploads\/2022\/10\/PID_00290094_134.jpg\")
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\nlet nomMes =[\"Enero\",\"Febrero\",\"Marzo\",\"Abril\",\"Mayo\",\"Junio\",\"Julio\",\"Agosto\",\"Sepiembre\",\"Octubre\",\"Noviembre\",\"Diciembre\"];<\/pre>\n
function setup() {\r\n createCanvas(600, 400);\r\n noStroke();\r\n preparacion();\r\n max = maxArray(meses);\r\n textFont(\"Arial\");\r\n textSize(24);\r\n}<\/pre>\nfunction draw() {\r\n background(100);\r\n for (var i = 0; i < 12; i++) { fill(255); rect(30+(i*46), 380-map(meses[i],0,max,0,100), 30, map(meses[i],0,max,0,100)); if ((mouseX > 30+(i*46)) && (mouseX < 30+(i*46)+30)) {\r\n fill(255,0,0);\r\n rect(30+(i*46), 380-map(meses[i],0,max,0,100), 30, map(meses[i],0,max,0,100));\r\n fill(\"#CECEF6\");\r\n text(nomMes[i] + \": \"+meses[i]+\" accidentes.\", 40, 70);\r\n }\r\n }\r\n}<\/pre>\n","protected":false},"excerpt":{"rendered":"