visualización de datos

opendata + opensource

Consultor tecnológico

experto en casi nada

ingeniero científico emprendedor

Alberto Labarga

@alabarga

#imagina

#biotek

#serendipity

#linkatu

#openaccess

#opensource

#opendata

#ddj

As intelligence goes up, happiness goes down. See, I made a graph. I make lots of graphs.

Lisa Simpson

visualización de datos

un poco de historia

Enlaces

http://en.wikipedia.org/wiki/William_Playfair
http://en.wikipedia.org/wiki/John_Snow_(physician)
http://en.wikipedia.org/wiki/Charles_Joseph_Minard
http://apandre.wordpress.com/library/oldcharts/

visualización de datos con Javascript

algunas opciones

Gráfico 1 (highcharts)

highcharts.com


chart1 = new Highcharts.Chart({
         chart: {
            renderTo: 'chart1',
            type: 'line'
         },
         // un monton de opciones
         series: [{
            name: 'Oppose',
            data: [57,58, 60, 53, 55,54,51,54,48,45,43],
            color:'#F89838',
			marker:{
				symbol:'circle'
         	}
         }, {
            name: 'Favor',
            data: [35,33, 31, 36, 35,37,39,37,42,46,47],				  
			color:'#949D49',
			marker:{
				symbol:'circle'
			}
		}
         ]
      });

Gráfico 2 (highcharts)

Gráfico 3 (highcharts)

Gráfico 4 (highcharts)

Polychart.js

a grammar of graphics

Polychart.js

a grammar of graphics


var grupos_parlamentarios = {
  term: ['PP', 'PSOE', 'CiU', 'IU','UPyD', 'PNV', 'Otros'],
  count: [185, 110, 16, 11, 5, 6, 18],
};
var g = gg.graph(grupos_parlamentarios)
  .layer(gg.layer.bar()
          .map({'x':'term','y':'count','color':'term'})
          .opts('opacity', 0.8))
  .opts({'title':'Composición del Congreso de los Diputados',
         'width': 600,
         'height': 400,
         'padding-right':90})
  .render('#gg1');

Polychart.js

a grammar of graphics

Polychart.js

a grammar of graphics



gg.data.fetch("/d/pop.csv", function(data) {
  gg.graph(data)
    .layer(gg.layer.line()
            .map({'x':'year','y':'population'}))
    .scale('y', gg.scale.continuous('log').min(600000000))
    .opts('width', 350).opts('height', 280)
    .opts('title', 'Población mundial')
    .opts('label-x', 'Year').opts('label-y', '')
    .render('#gg2')
});

Polychart.js

a grammar of graphics

Polychart.js

a grammar of graphics



 gg.data.fetch("/d/iris.js", function(data) {
  gg.graph(data)
    .layer(gg.layer.point()
            .map('x', 'sepalLength')
            .map('y', 'petalLength')
            .opts('opacity',0.6))
    .opts('width', 750).opts('height', 270)
    .opts('title', 'Iris Flower Dataset')
    .facet(gg.facet.wrap('category').ncol(3))
    .render('#gg3')
});

Series temporales

ver también Envision.js

Series temporales

ver también Envision.js

	
	window.chart = new Highcharts.StockChart({
            chart : {
                renderTo : 'chart4'
            },

            rangeSelector : {
                selected : 6
            },

            title : {
                text : 'Prima de riesgo'
            },
            
            series : [{
                name : 'Prima',
                data : prima,
                tooltip: {
                    valueDecimals: 2
                }
            }]
        });

Hans Rosling

Mapas (leaflet.js)


var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/BC9A493B41014CAABB98F0471D759707/997/256/{z}/{x}/{y}.png',
cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18});

var map = new L.Map('map');
map.setView(new L.LatLng(43.314968,-1.977196), 13).addLayer(cloudmade);

var markerLocation = new L.LatLng(43.314968,-1.977196),
marker = new L.Marker(markerLocation);

map.addLayer(marker);
marker.bindPopup("Kaixo!
The Melee.").openPopup();