La primera tarea que he realizado en el proyecto de contratos menores ha sido una mejora en la interactividad del gráfico donde se exponen de manera cuantitativa los contratos del ayuntamiento de Valencia.
Existen tres maneras de seleccionar los contratos que el usuario quiere visualizar. Los contratos relacionados con una empresa, con un centro de gasto o con una palabra descriptiva que se podía encontrar en los datos publicados por el ayuntamiento.
De momento se puede seleccionar solo un botón para visualizar los contratos relacionados con ello.
Una posible mejora que he estado trabajando, es poder sumar filtros de la siguiente manera:
empresa + centro : Ver los contratos de una empresa que se han hecho por un solo centro del ayuntamiento.
empresa + centro + descripción : Ver los contratos de una empresa que se han hecho por un solo centro del ayuntamiento y además tienen una palabra descriptiva concreta.
centro + descripción : Ver todos los contratos que realizo el centro y tengan que ver con la descripción elegida.
etc…
Para conseguir eso tenia que crear una variable global donde se van guardando las opciones que el usuario ha elegido mediante los botones.
En seguida, cambiar los selectores que se ocupan de filtrar los datos para mostrar solo los que corresponden a la selección.
svg.selectAll('svg .bar.'+ dni).style("opacity",activeopacity).style("visibility","visible");
svg.selectAll('svg .bar'+ filtersText).style("opacity",activeopacity).style("visibility","visible");
Se puede ver, en el código arriba que en vez de utilizar el dni de la empresa para seleccionar los contratos se utiliza una variable que puede contener o no dos cosas mas, la descripción y/o el centro.
Lo que merece la pena mencionar desde un punto de vista de programación es que tuve que tener cuidado con el foco (scope) de las variables. El array que lleva los filtros ha sido declarado en el principio del código javascript, para que no pierda el foco y guarde en la memoria las anteriores selecciones:
var filters = [];
mientras la variable filtersText que lleva los filtros en forma de cadena (string) listos para utilizar en la selectALL es una variable local que cada ves que el usuario elige un botón se vuelve a declarar para crear el texto, borrando a la ves su anterior contenido.
¿Porque?
Los filtros pueden resultar útiles para hacer visualizaciones mas detalladas. Por ejemplo, una vez seleccionada la empresa EL CORTE INGLÉS S.L y navegando por los distintos centros de gasto, se podrá verificar que tiene contratos que llegan desde 5 centros de gastos distintos.
¿Luego que?
Si el usuario dedica un poco de tiempo eligiendo entre empresas y centros vera que muchas combinaciones (quizás la mayoría) están vacías.
Los gráficos interactivos tienen la ventaja de ofrecer nuevas informaciones a medida que interactuamos con ellos. Una idea que puede resultar interesante, sería ofrecer al usuario la información de los posibles filtros que si tienen al menos un contrato.
En el ejemplo de CORTE INGLES eso significa que después de clicar a la empresa, los botones de los centros que si contienen un contrato cambien a un color distinto, avisando así al usuario que si los selecciona no vera un gráfico vacío sino algún/os contratos.