En esta demo vamos a ver como podríamos visualizar en nuestra web o blog, mediante las herramientas Google Fusion Tables y Google Charts unos datos del catálogo de datos de Open Data Euskadi.
Para esta demo de ejemplo, hemos tomado como fuente de datos las lecturas recogidas en una estación metereológica en un intervalo de tiempo. La información viene estructurada de la siguiente manera:
Dentro de cada fichero .zip podemos ver las lecturas recogidas de cada estación, y dentro de cada una de ellas, los valores recogidos mensualmente en un fichero XML. El fichero XML tiene la siguiente estructura:
<mes xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="C040_2008_10.xsd">
<dia Dia="2008-10-01">
<hora Hora="00:00">
<Meteoros>
<Dir.Med._a_1100cm>265.1</Dir.Med._a_1100cm>
<Humedad._a_620cm>90.0</Humedad._a_620cm>
<Irradia.._a_400cm>6.22</Irradia.._a_400cm>
<Precip.._a_420cm>0.0</Precip.._a_420cm>
<Presion._a_160cm>957.1</Presion._a_160cm>
<Rad.UV._a_380cm>20.48</Rad.UV._a_380cm>
<Sig.Dir._a_1100cm>36.68</Sig.Dir._a_1100cm>
<Sig.Vel._a_1100cm>0.42</Sig.Vel._a_1100cm>
<Tem.Aire._a_620cm>9.65</Tem.Aire._a_620cm>
<Vel.Max._a_1100cm>1.76</Vel.Max._a_1100cm>
<Vel.Med._a_1100cm>0.38</Vel.Med._a_1100cm>
</Meteoros>
</hora>
[...]
</dia>
</mes>
El parámetro que vamos a analizar es <Tem.Aire._a_620cm>...
Mediante un sencillo script en python, parseamos los ficheros XML y generamos un fichero CSV, para tratar la información. El fichero tendrá la siguiente estructura:
Horas,2008-2-01,2008-2-02,2008-2-03,2008-2-04,...,2008-2-29
00:00,6.52,5.07,0.52,6.4,...,10.86
00:10,6.68,5.03,0.49,6.36,...,10.75
00:20,6.63,4.86,0.52,6.13,...,10.67
Una vez que tenemos la información parseada y en formato Csv vamos a ver como podríamos visualizarla mediante Fusion Tables. Para ello basta con tener una cuenta en Google.
Google Fusion tables nos permite entre otras cosas:
- Importar datos: en este caso los csv que hemos generado
- Visualizar los datos de manera instantánea: Gráficamente
- Poder compartirlos utilizando esos datos en una web o un post.
Para importar los datos basta con clickar en “Import table” y seleccionar el fichero que queramos subir. Nos permite varios formatos, nosotros seleccionamos los ficheros csv que hemos generado. (Hacer clic en esta imagen y las siguientes para verlas a tamaño completo).
Una vez importados los datos podemos visualizarlos de una manera instantánea gráficamente, y no sólo eso sino que podemos sacar históricos, cruzar tablas, ver tendencias, etc… Por ejemplo, vamos a ver como ha variado la temperatura del aire entre el 2009 y 2010, en un mes en concreto, en este caso Octubre.
Para ello tenemos la opción “merge”. Seleccionamos las tablas que queremos fusionar de la siguiente manera.
Ahora tenemos los datos de octubre de 2009 y octubre de 2010 fusionados en una misma tabla, y podemos seleccionar por ejemplo dos días para ver como ha variado la temperatura en dos días diferentes.
Fusion Tables, aún estando todavía en fase beta, nos da muchas más posiblidades de visualización y manejo de los datos. Otra forma que tenemos de visualizar estos datos en nuestra web es gracias a Google Charts, que nos deja generar gráficos de una serie de datos para visualizarlos en nuestra web. Tanto los ejemplos hechos con una herramienta como con la otra, los podéis ver en la demo.
Para este ejemplo vamos a coger la temperatura del aire y vamos a calcular la media de cada día, para posteriormente visualizarla en este gráfico. Cogemos como ejemplo los datos de Septiembre de 2010 y calculamos la media diaria.
En este caso los datos que sacamos son la temperatura media para cada día:
2010-9-01 2010-9-02 ... 2010-9-30
20.808 20.242 ... 13.805
Una vez tenemos esos datos, vamos a google charts y podemos hacer un gráfico de manera sencilla. Utilizando el asistente o programando nosotros mediante su API.
En el campo Data Values, introducimos los datos que hemos generado arriba y podemos ir cambiando los aspectos que nostros queramos en cuanto al diseño. Color, tipo de gráfico, leyenda… etc etc..
En cuanto tengamos el grafico terminado podemos coger la url y adjuntarlo en nuestra pagina o post como si fuera una imagen.
En este caso: una larga URL…
O tambien podemos introducirlo mediante código javascript, por si queremos, por ejemplo, hacer un tratamiento de esos datos antes de su visualización o los tenemos en una fuente de datos externa que se actualizan cada cierto tiempo.
<script type="text/javascript">// <![CDATA[
var queryString = '';
var dataUrl = '';
function onLoadCallback() {
if (dataUrl.length > 0) {
var query = new google.visualization.Query(dataUrl);
query.setQuery(queryString);
query.send(handleQueryResponse);
} else {
var dataTable = new google.visualization.DataTable();
dataTable.addRows(30);
dataTable.addColumn('number');
dataTable.setValue(0, 0, 20.808);
dataTable.setValue(1, 0, 20.242);
dataTable.setValue(2, 0, 19.804);
dataTable.setValue(3, 0, 19.318);
dataTable.setValue(4, 0, 21.614);
dataTable.setValue(5, 0, 20.481);
dataTable.setValue(6, 0, 16.682);
dataTable.setValue(7, 0, 16.151);
dataTable.setValue(8, 0, 16.197);
dataTable.setValue(9, 0, 17.219);
dataTable.setValue(10, 0, 19.444);
dataTable.setValue(11, 0, 16.951);
dataTable.setValue(12, 0, 16.146);
dataTable.setValue(13, 0, 18.303);
dataTable.setValue(14, 0, 19.973);
dataTable.setValue(15, 0, 16.994);
dataTable.setValue(16, 0, 13.884);
dataTable.setValue(17, 0, 13.652);
dataTable.setValue(18, 0, 14.039);
dataTable.setValue(19, 0, 18.035);
dataTable.setValue(20, 0, 19.768);
dataTable.setValue(21, 0, 20.346);
dataTable.setValue(22, 0, 18.619);
dataTable.setValue(23, 0, 14.473);
dataTable.setValue(24, 0, 12.209);
dataTable.setValue(25, 0, 11.104);
dataTable.setValue(26, 0, 11.65);
dataTable.setValue(27, 0, 12.776);
dataTable.setValue(28, 0, 14.757);
dataTable.setValue(29, 0, 13.805);
draw(dataTable);
}
}
function draw(dataTable) {
var vis = new google.visualization.ImageChart(document.getElementById('chart'));
var options = {
chf: 'a,s,000000D7',
chxl: '',
chxp: '',
chxr: '0,5,30',
chxs: '',
chxtc: '',
chxt: 'y',
chbh: 'a',
chs: '500x225',
cht: 'bvg',
chco: '3072F3',
chds: '5,35',
chd: 't:20.808,20.242,19.804,19.318,21.614,20.481,16.682,16.151,16.197,17.219,19.444,16.951,16.146,18.303,19.973,16.994,13.884,13.652,14.039,18.035,19.768,20.346,18.619,14.473,12.209,11.104,11.65,12.776,14.757,13.805',
chdl: 'Temperatura+diaria',
chtt: 'Temperatura+media+del+aire+Septiembre+2010'
};
vis.draw(dataTable, options);
}
function handleQueryResponse(response) {
if (response.isError()) {
alert('Error in query: ' + response.getMessage() + ' ' + response.getDetailedMessage());
return;
}
draw(response.getDataTable());
}
google.load("visualization", "1", {packages:["imagechart"]});
google.setOnLoadCallback(onLoadCallback);
// ]]></script>
El efecto de insertar este javascriopt, visible en la demo. Con esta demo queremos dar a conocer las posibilidades que hay en Internet a la hora de visualizar los datos, que puede ser extrapolable a otro catálogo de datos de Open Data Euskadi o a otro parámetro. Viendo como de una manera rapida podemos hacer una visualización de unos datos.
Suscríbete por RSS
Suscríbete por e-mail
Síguenos en twitter
