visualización de datos

opendata + opensource

Consultor tecnológico

experto en casi nada

ingeniero científico emprendedor

#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

William Playfair

The Commercial and Political Atlas. 1786

William Playfair

The Commercial and Political Atlas. 1786

William Playfair

The Commercial and Political Atlas. 1786

Charles Joseph Minard

Multiple series. 1861

Charles Joseph Minard

Stacked area. 1866

Charles Joseph Minard

Map with bubbles. 1859

Charles Joseph Minard

The best statistical graphic ever drawn. 1869

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

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'
			}
		}
         ]
      });
          
	 

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



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



 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

	
	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();

periodismo de datos

un poco de historia

The Guardian. 1821

Periodismo de datos

The Guardian. 1821

The data store: facts are sacred

The data store: facts are sacred

There are three kinds of lies: lies, damned lies, and statistics.
Mark Twain

Se puede mentir con un gráfico?

Se puede mentir con un gráfico?

Se puede mentir con un gráfico?

1854 Broad Street cholera outbreak

John Snow

Brote de colera en broad Street

CartoDB

Visualización de datos geográficos con CartoDB

CartoDB

Visualización de datos geográficos con CartoDB

CartoDB

Visualización de datos geográficos con CartoDB

Hay que leer ...

¡Gracias!

Gracias a

@the_melee por invitarme

@soyjavi por kinout

A vosotros por escucharme

#apptivismo

información => acción

Estructura HTML5

#iw_navarra

¡Gracias!

@the_melee por invitarme

@soyjavi por kinout

A vosotros por escucharme

Fotografías

http://www.flickr.com/photos/victoriano/392397535/

http://www.flickr.com/photos/garryknight/4659576761/

http://www.flickr.com/photos/victoriano/7210535378/

http://www.flickr.com/photos/hendralely/5682984653/

¡Apuntaos!

#apptivismo

información => acción

Estructura HTML5

#iw_navarra

Tareas

Equipo

Concepto

Modelo de negocio

Nombre

Logo

Diseño

Desarrollo

Difusión

...

Tecnologías

Django

CouchDB

HTML5

CSS3

Javascript

node.js

leaflet.js

d3.js

jQuery

...

Referencias

Google Currents

Storify

SocialMention

Fixmedia

Change.org

Tu derecho a saber

OpenCalais

Readability

Polychart

...