MySQL and UTF-8

It seems that in the era of smart and conected devices we would have figured out how to do simple tasks such as rendering correctly human readable characters in a computer screen.

I have to admit that today in 2018 I still face problems of character enconding in various programs, programming interfaces and such. Just as I did 20 years ago when I first bought a PC.

Being a non-native english speaker with a different alphabet believe me I struggle every time I see broken characters.

I know it is probably because of my ignorance of what ASCII and UTF8 actually means or how to configure these things but anyway I decided long ago that I am not interested in learning them.

So I just wanted to share a MySQL hint for all those who have touble printing a unicode character from a MySQL database.


CONVERT (`column or data` USING utf8)

Link side scroll of two elements with jQuery()

This is a nice jQuery trick when you need to scroll the same way on one or several elements at the same time.

$('#divId1').on('scroll', function () {
$('#divId2').scrollLeft($(this).scrollLeft());
});

 

I find it especially usefull for large responsive tables where I make use of some sticky header feature.

I wanted to scroll left and right the same way in the body of the table and the sticky header div.

 

Pivot Tables con Awk (bash)

Pivot tables es una funcionalidad que suelen ofrecer los programas de hojas de calculo (MS Excel, LibreOffice Calc, etc.)

Es una herramienta para resumir datos (data summarization) desde una base de datos. Resulta muy cómodo para contar lineas en una hoja de calculo donde hay un patrón similar o para sumar números que pertenecen en una categoría.

Un ejemplo se puede ver en la entrada de wikipedia sobre los pivot tables.

AWK

Awk es un programa que permitir procesar texto. Nos permite acceder linea por linea cualquier archivo de texto y hacer operaciones sobre ellas. Es una herramienta algo mas complicada, ya que se utiliza a través de la linea de comandos. Entiende un lenguaje basado en bash y C++. Para entender la posibilidades que nos ofrece a la hora de procesar archivos de textos, podemos mirar la documentacion completa del programa awk

Los datos que estoy trabajando actualmente son gastos que hacen distintos departamentos de ayuntamientos españoles.

Se trata de un archivo TSV que tiene la siguiente forma

Actividad | centro | dni | quien | importe | date

Actividad : el concepto de contratos que hizo el ayuntamiento con una entidad

centro : El departamiento del ayuntamiento que realizo la actividad

dni : El DNI de la empresa o professional que realizo el contrato

quien : nombre de la empresa o professional o entidad que realizo el contrato

importe : importe en miles de euros

date : La fecha del contrato

Para el proyecto de visualización de datos en que estoy colaborando necesitamos resumir unos datos, como por ejemplo:

  1. El total de contratos realizados por la misma empresa
  2. El total del importe por cada empresa
  3. Los distintos centros de gasto
  4. resumen del tipo de actividad

Estos datos se guardan en tres archivos complementarios : thinglist.tsv, centroslist.tsv, viplist.tsv.

Estamos utilizando los pivot tables para generar estos resúmenes que luego integramos a nuestro gráfico que se puede ver aqui.

Ahora existe la intención de utilizar esa manera de visualizar los datos como una herramienta mas versatil que podria servir para visualizar cualquier cantidad en el tiempo. Faltan muchas cosas para definir si queremos darle forma de un programa de visualizacion de datos.

En esa direccion he pensado que tenemos que quitar la dependencia de programas externos (como Libreoffice Calc) que actualmente utilizamos para “preparar los datos” antes de lanzar la visualización. Utilizar awk en vez de Calc podria evitar hacer el trabajo manual que se esta haciendo cuando necesitamos visualizar unos datos.

He seguido un tutorial que explica como hacer pivot tables con awk y lo he adaptado para los datos de contratos menores.

Vamos a ver paso a paso como podemos generar los pivot tables.

Empezamos solo imprimiendo linea por linea el documento que contiene los datos

awk -F $'\t' ' {print}' data_val2015.tsv

 

aquí con el flag -F estamos diciendo a awk que las columnas de nuestro archivo esta separadas con tabulaciones $’\t’

En seguida podemos elegir imprimir solo unas columnas y no todas.

awk -F $'\t' ' {print $3, $5}' data_val2015.tsv

despues del print hemos precizado que queremos que devuelva solo la columna 3 y 5.

Luego para que podamos hacer operaciones matematicas necesitamos saltar la primera linea que contiene la descripcion de las columnas.

awk -F $'\t' ' NR>1 {print $3, $5}' data_val2015.tsv

Eso se hace con  NR>1 (Number of Rows)

ahora las cosas empezaran a ser un poco mas complicadas.

awk -F $'\t' ' NR>1 {a[$4]++;} END {for (i in a) {printf ("%s\t%i\n"),i, a[i]}}' data_val2015.tsv

Primero nos fijamos que nuestro programa tiene dos mas pequeños, cada uno entre corchetes{} y separados con la palabra END.

Esto resulta que la ejecución linea por linea sera todo lo que encontramos entre los primeros corchetes y una vez finalizado el documento (es decir END) ejecute el otro programa que se encuentra entre corchetes.

En la primera parte un array a[] con índice el campo $4 (nombre de la empresa) estará contando las veces que se encuentra cada empresa. Una vez hecho, la repetitiva for() se encargara de imprimir una por una las empresas que están en los índices i, y al lado la cantidad guardada en el array a[].

Finalmente vamos a hacer una tabla con las siguientes columnas

empresa | num_contratos | total_importe | DNI

awk -F $'\t' ' NR>1 {a[$4]++; b[$4]+=$5; c[$4]=$3} END {for (i in a) {printf ("%s\t%i\t%i\t%s\n"),i, a[i], b[i], c[i]}}' data_val2015.tsv

Igual que en el ejemplo anterior tres arrays a[], b[] y c[] estaran guardan respectivamente la suma de contratos con ++, la suma de importe con +=$5 y el DNI de la empresa que esta siempre en la columna 3.

La repetitiva for va a recorer todas las empresas y la printf se encarga de dar forma a los datos que vamos a imprimir. El sintaxis del printf es al estilo de C++.

 

Mejora de interactividad y rendimiento para un proyecto de visualización de datos

Llevo desde principios de Junio 2017 colaborando en un proyecto de visualizaciones de datos llevado por numeroteca.org

Contratos menores es un manera de visualizar los contratos de varios ayuntamientos españoles de forma interactiva. El proyecto esta ya en punto avanzado y en el momento que me he incorporado al proyecto se pueden ver en un gráfico de barras los contratos de varias empresas. Como se puede ver en la imagen, la persona que esta visualizando los datos puede ver los contratos que van a una sola empresa ó los que se hacen desde un centro del ayuntamiento ó que tengan una descripción concreta p.ej. limpieza.

Mi colaboración con el proyecto tiene ya marcados unos objetivos.

  1. Solapar los filtros ya existentes (empresa, centro de gasto, descripción)
  2. Mejorar el tiempo de carga sobre todo para ayuntamientos con muchos datos
  3. Añadir maneras de interactuar con los datos.

Propuesta 1

Crear filtros compuestos de tipo empresa+centro+descripción daría una funcionalidad añadida a la hora de ver a donde y como se gasta el dinero en un ayuntamiento.

Propuesta 2

La carga de las paginas puede ser muy lenta, en algunos casos como las facturas de Zaragoza, puede tardar hasta 10 o 15 segundos. Eso e principalmente debido a que los archivos de los datos en algunos casos son muy grandes y su descarga e importación puede durar mucho.

Propuesta3

Ofrecer nuevas formas de visualizar los datos. Hasta ahora, el gráfico proporciona la mayor parte de información relacionada con los contratos. Presentar totales y medias por empresa o centro o por algunas combinaciones de ellas seria un manera de aumentar la información.

En ese blog se podrá seguir el trabajo técnico y conceptual de esa colaboración.

Filtrar selecciones en d3.js II

En el anterior articulo vimos como construir el selector para poder ver los contratos que cumplan mas de un filtro.

En ese post vamos a ver como utilizando el metodo d3.filter() de d3.js y como podemos saber los centros de gasto que tienen al menos un contrato con una empresa, una vez que ella haya sido seleccionada.

Si hemos realizado una seleccion con d3.selectAll() que la llamemos select:

var select = d3.selectAll(‘selector’);

Luego podemos filtrar todavia mas :

select.filter(‘nuevo_selector’);

Esa funcionalidad me ha ayudado repasar con un .each() todos los centros de gasto del ayuntamiento cuando se elige una empresa. En cada iteración, se verifica si el .filter(‘centro_de_gasto’) da un array vacio o no. Si no esta vacio entonces con .style(‘background-color’,’yellow’) se cambia el fondo del boton avisando asi que tiene contenido.

Tambien el fondo se pone gris cuando se de-selecciona la empresa.

Visualización de datos

Empiezo hoy a colaborar en un proyecto colaborativo promovido por montera34.com. Contratos menores es un proyecto que surge tras la publicación de datos en unos ayuntamientos españoles sobre contratos que el ayuntamiento asigna a terceros sin concurso.

Mi estancia tiene como objetivo inicial realizar unas practicas no laborales para finalizar la formación profesional que he hecho este año.

Aparte de la formalidad de obtener el titulo de CP, he fijado unos objetivos personales, que espero cumplir en esa estancia de dos meses.

  • Aprender la librería d3.js
  • Tener una fuerte introducción en el mundo de visualización de datos e gráficos interactivos.
  • Trabajar de forma colaborativa.
  • Conocer de primera mano un proyecto de co-working como en el que estare realizando mis practicas.