{"id":452,"date":"2022-10-06T14:28:00","date_gmt":"2022-10-06T12:28:00","guid":{"rendered":"http:\/\/quadern-programacio.recursos.uoc.edu\/?page_id=452"},"modified":"2022-11-18T15:18:29","modified_gmt":"2022-11-18T13:18:29","slug":"10-3-tablas","status":"publish","type":"page","link":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/10-3-tablas\/","title":{"rendered":"10.3. Tablas"},"content":{"rendered":"

Muchos de los datos a los que podemos tener acceso los podemos encontrar en forma de tablas con filas y columnas. En P5 disponemos de un m\u00e9todo para leer los datos de tablas accediendo a sus celdas mediante coordenadas.<\/p>\n

\"\"
Figura 125. Coordenadas de las celdas de una tabla
Fuente: adaptaci\u00f3n de L. McCarthy; A. P. C. Reas; B. Fry (2015). Getting Started with P5.Js: Making Interactive Graphics in JavaScript and Processing. Make Community, LLC.<\/figcaption><\/figure>\n

Para cargar una tabla, normalmente lo haremos en un formato de texto plano conocido como .csv (comma-separated values<\/em>), en el que los valores de cada fila est\u00e1n separados mediante comas. Desde cualquier editor de hojas de c\u00e1lculo podemos exportar los datos de una tabla en formato .csv.<\/p>\n

Tomemos como ejemplo los siguientes datos sobre los diez lagos m\u00e1s grandes del mundo:<\/p>\n

\"\"
Figura 126. Datos en formato tabla
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Vemos que los datos que contiene la tabla son el nombre del lago, su superficie, su latitud y su longitud. Su equivalente en formato .csv, que podemos abrir en cualquier editor de texto, es el siguiente:<\/p>\n

\"\"
Figura 127. Datos en formato .csv
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n

Leyendo una tabla<\/h3>\n

Este archivo .csv es el que podemos cargar en nuestro sketch<\/em> de p5.js para acceder a sus datos y visualizarlos. Lo primero que debemos hacer, al igual que con cualquier archivo externo, es subirlo a la mediateca de CodeLab. Una vez hecho esto, usaremos el m\u00e9todo loadTable()<\/span> para cargar la tabla.<\/p>\n

let tableData;\r\n\r\nfunction preload() {\r\n  tableData = loadTable(\"lakes.csv\", \"header\");\r\n}<\/pre>\n
Notemos que cargamos la tabla en preload()<\/span>, para evitar que tratemos de acceder a sus datos sin haberla descargado a\u00fan. Como primer par\u00e1metro de loadTable()<\/span> tenemos que pasarle el nombre del archivo que contiene la tabla y como segundo par\u00e1metro vamos a pasarle \u201cheader\u201d para indicarle que, en nuestro caso, la primera fila no son datos en s\u00ed sino que son los nombres de cada columna.<\/p>\n
Ahora ya podemos acceder a los datos de la tabla haciendo uso de sus coordenadas. Lo haremos mediante el m\u00e9todo get()<\/span>, al que le pasaremos las coordenadas de la celda que queramos consultar. Si queremos por ejemplo acceder al dato de la celda situada en la primera fila (recordemos que no tenemos en cuenta la primera fila con los nombres) y en la primera columna, necesitaremos la coordenada (0, 0).<\/p>\n
let lakesData;\r\n\r\nfunction preload() {\r\n  lakesData = loadTable(\"lakes.csv\", \"header\");\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(800, 300);\r\n  \/\/ Primera fila, primera columna\r\n  console.log(lakesData.get(0, 0));\r\n  \/\/ Segunda fila, tercera columna\r\n  console.log(lakesData.getNum(1, 2));\r\n}<\/pre>\n
Cuando busquemos extraer datos num\u00e9ricos podemos usar getNum()<\/span> en lugar de get()<\/span> para asegurarnos de que el dato se almacene como n\u00famero y no como texto, lo que nos puede llevar a errores m\u00e1s adelante.<\/p>\n
Para leer toda la tabla de una vez y almacenar sus datos, podemos utilizar bucles y arrays<\/em> con el fin de automatizar el proceso y tener los datos ordenados de manera m\u00e1s conveniente:<\/p>\n
let lakesData;\r\nlet areas = [];\r\n\r\nfunction preload() {\r\n  lakesData = loadTable(\"lakes.csv\", \"header\");\r\n}\r\n\r\nfunction setup() {\r\n  createCanvas(800, 300);\r\n  for(let i = 0; i < lakesData.getRowCount(); i++) {\r\n    areas[i] = lakesData.getNum(i, 2);\r\n  }\r\n}<\/pre>\n
En este caso, hemos almacenado en el array <\/em>areas<\/span> los datos de la superficie de cada lago, que est\u00e1n en la tercera columna. Podemos hacer lo mismo para el resto de los datos.<\/p>\n
Visualizando la tabla<\/h3>\n
Ahora que ya hemos extra\u00eddo los datos, podemos usarlos para dibujar en nuestro sketch<\/em>. Podr\u00edamos por ejemplo crear una clase Lake()<\/span> que se encargue de dibujarlos.<\/p>\n
class Lake {\r\n\tconstructor(name, lat, lon, area) {\r\n\t\tthis.name = name;\r\n\t\tthis.posX = map(lon, -180, 180, 0, width);\r\n\t\tthis.posY = map(lat, -90, 90, height, 0);\r\n\t\tthis.area = area;\r\n\t\tthis.diameter = 2 * sqrt(area \/ PI);\r\n\t\tthis.alpha = 50;\r\n\t}\r\n\t\r\n\tdisplay(){\r\n\t\tfill(0, 0, 255, this.alpha);\r\n\t\tnoStroke();\r\n\t\tcircle(this.posX, this.posY, this.diameter);\r\n\t}\r\n}<\/pre>\n
En el constructor le damos como par\u00e1metros los datos que podemos extraer de la tabla: nombre, latitud, longitud y superficie, y los asignamos a las propiedades que m\u00e1s tarde utilizaremos en el m\u00e9todo display()<\/span> para dibujarlos. Para calcular posX<\/span> y posY<\/span> hemos tenido en cuenta que la latitud puede ir de \u2013180 a 180 grados y que la longitud puede ir de \u201390 a 90 grados.<\/p>\n
Ahora podemos colocar el c\u00f3digo de la clase en otra pesta\u00f1a y escribir el c\u00f3digo principal de nuestro sketch<\/em>:<\/p>\n
let lakesData;\r\nlet areas = [];\r\nlet names = [];\r\nlet lats = [];\r\nlet lons = [];\r\n\r\nlet lakes = [];\r\n\r\nfunction preload() {\r\n\tlakesData = loadTable(\"lakes.csv\", \"header\");\t\r\n}\r\n\r\nfunction setup() {\r\n\tcreateCanvas(400, 250);\r\n\tfor(let i = 0; i < lakesData.getRowCount(); i ++){\r\n\t\tareas[i] = lakesData.getNum(i, 2);\r\n\t\tnames[i] = lakesData.get(i, 1);\r\n\t\tlats[i] = lakesData.get(i, 3);\r\n\t\tlons[i] = lakesData.get(i, 4);\t\r\n\t}\r\n\t\r\n\tfor(let i = 0; i < lakesData.getRowCount(); i++) {\r\n\t\tlet newLake = new Lake(names[i], \r\n                                 lats[i], \r\n                                 lons[i],\r\n                                 areas[i] * 0.025);\r\n\t\tlakes[i] = newLake;\r\n\t}\r\n}\r\n\r\nfunction draw() {\r\n\tbackground(250);\r\n\tfor(let i = 0; i < lakes.length; i ++) {\r\n\t\tlakes[i].display();\r\n\t}\t\r\n}<\/pre>\n
Primero creamos una serie de arrays<\/em> para almacenar los datos que extraeremos de la tabla, que rellenamos en el setup()<\/span> mediante bucles. A continuaci\u00f3n, creamos los objetos Lake pas\u00e1ndoles como par\u00e1metros los datos anteriormente extra\u00eddos y, por \u00faltimo, en el draw()<\/span> iteramos por el array<\/em> de objetos Lake<\/span> para dibujarlos mediante su m\u00e9todo display()<\/span>.<\/p>\n
Como resultado obtendremos una visualizaci\u00f3n de la superficie de los lagos asociada a su posici\u00f3n geogr\u00e1fica:<\/p>\n
\"\"
Figura 128. Visualizaci\u00f3n de los lagos
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n
Con los datos que tenemos, podr\u00edamos hacer m\u00e1s interesante la visualizaci\u00f3n y hacerla interactiva con el fin de que al pasar por encima de los c\u00edrculos nos mostrase el nombre del lago. Es tan sencillo como a\u00f1adir un nuevo m\u00e9todo a nuestra clase Lake<\/span>:<\/p>\n
checkMouse() {\r\n  let d = dist(mouseX, mouseY, this.posX, this.posY);\r\n  if(d < this.diameter * 0.5){\r\n    this.alpha = 150;\r\n    textAlign(CENTER);\r\n    textSize(20);\r\n    text(this.name, width * 0.5, height - 25);\r\n  } else {\r\n    this.alpha = 50;\r\n  }\r\n}<\/pre>\n
Y a\u00f1adir la comprobaci\u00f3n de la distancia para cada objeto Lake<\/span> en el draw()<\/span> del sketch<\/em> principal:<\/p>\n
function draw() {\r\n\tbackground(250);\r\n\tfor(let i = 0; i < lakes.length; i ++) {\r\n\t\tlakes[i].display();\r\n\t\tlakes[i].checkMouse();\r\n\t}\t\r\n}<\/pre>\n
\"\"
Figura 129. Visualizaci\u00f3n interactiva de los lagos
Fuente: elaboraci\u00f3n propia.<\/figcaption><\/figure>\n","protected":false},"excerpt":{"rendered":"
Muchos de los datos a los que podemos tener acceso los podemos encontrar en forma de tablas con filas y columnas. En P5 disponemos de un m\u00e9todo para leer los datos de tablas accediendo a sus celdas mediante coordenadas. Para cargar una tabla, normalmente lo haremos en un formato de texto plano conocido como .csv […]<\/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\/452"}],"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=452"}],"version-history":[{"count":2,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/452\/revisions"}],"predecessor-version":[{"id":997,"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/pages\/452\/revisions\/997"}],"wp:attachment":[{"href":"http:\/\/quadern-programacio.recursos.uoc.edu\/es\/wp-json\/wp\/v2\/media?parent=452"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}