codemotion 2016 - d3.js un taller divertido y difícil
TRANSCRIPT
Un taller de d3.js difícil y divertido*
¿qué necesitas para hacer visualizaciones de datos impresionantes?
*http://www.macwright.org/presentations/dcjq/
Javier Abadía@javierabadia
¿por qué es difícil?
¿y por qué es divertido?
un gráfico de barras
nop!
de cabeza!
http://bl.ocks.org/mbostock/4062006
logística• ¿os funciona todo?• https://github.com/jabadia/d3-workshop
¿qué queremos conseguir?1. preparar los datos2. elegir el tipo de visualización apropiado3. buscar un ejemplo (p.ej. en bl.ocks.org) parecido4. cambiar los datos5. cambiar la apariencia6. adaptar la interacción7. integrarlo en mi app
contar una historiacon los datos
al lío…
Un poco de teoríad3.js, Javascript Nivel Demonio+
d3.js• no es una herramienta de visualización– Tableau, Excel, R-studio
• no es una librería de gráficas– highcharts.js, google charts, dimple, nvd3
• no es una librería de mapas– leaflet.js
• no es una librería de dibujo– SVG, Canvas
entonces, que es?
DataDrivenDocumentsDDD
3
¿qué tiene de especial?
DATOSJSONCSVTSV …
d3 necesita JS nivel Demonio+
funciones
http://www.smashingmagazine.com/2014/07/dont-be-scared-of-functional-programming/
function aceptaDos(a, b){ a = a || ‘default A’; 🌶 b = b || ‘default B’; return a + b + arguments[2];}
aceptaDos(); // legalaceptaDos(‘pA’); // legalaceptaDos(‘pA’,’pB’); // legalaceptaDos(‘pA’,’pB’,’pC’); // legal
function modifica1(s){ return 'un ' + s + ' precioso';}
function modifica2(s){ return 'el mejor ' + s + ' de todos';}
function generaDia(m){ return m('dia');}
generaDia(modifica1); // ‘un dia precioso’generaDia(modifica2); // ‘el mejor dia de todos’
function modifyString(){ var prefix='|'; var postfix='|';
var output = function(s) { return prefix + s + postfix; }
output.prefix = function(p) { prefix = p; return output; } output.postfix = function(p) { postfix = p; return output; }
return output;}
m = modifyString().prefix(‘un’).postfix(‘precioso’);m(‘dia’) // ‘un dia precioso’
❶
❷
❸
❹
❶ ❷ ❹
e.attr('x', function(d) { return x(d); })
e.attr('x', x)
e.attr('x', function(d) { return this.x(d); })
=>=>
¿lo tenéis?
¿quien sabe jQuery?
selecciones
lis = $(‘li’)lis.length
lis.each( function() { console.log(this); } )lis.each( function() {$(this).fadeOut(); } ) 🌶lis.each( function() {$(this).fadeIn(); } ) 🌶
lis.fadeOut()lis.fadeIn()lis.css({color: ‘red’})
<ul><li>a</li><li>b</li><li>c</li><li>d</li><li>e</li></ul>
más selecciones• jQuery– $(‘li’).css(‘background-color’,’red’);
• D3– d3.selectAll(‘.bar’).attr(‘fill’,’red’);
• pero…– d3.selectAll(‘.bar’).data(meses);
los joins
<ul><li>Java</li><li>C</li><li>C++</li><li>C#</li><li>Python</li><li>JavaScript</li><li>Visual Basic .NET</li><li>Perl</li><li>Objective-C</li><li>Assembly language</li><li>Swift</li><li>Ruby</li><li>Visual Basic</li><li>Delphi/Object Pascal</li><li>Go</li><li>Groovy</li><li>R</li><li>MATLAB</li><li>PL/SQL</li></ul>
var progLang = [ 'Java', 'C', 'C++', 'C#', 'Python', 'JavaScript', 'PHP', 'Visual Basic .NET', 'Perl', 'Objective-C', 'Assembly language', 'Swift', 'Ruby', 'Visual Basic', 'Delphi/Object Pascal', 'Go', 'Groovy', 'R', 'MATLAB', 'PL/SQL',];
var progLang = [ 'Java', …, 'PL/SQL'];
var list = d3.select('ul');var items = list.selectAll('li.lang').data(progLang);
items.enter().append('li') .attr('class', 'lang') .text(String);… .text(function(d) { return String(d); });
❶❸❷
❹
❺❻
selection.attr(‘x’, function(d, i) { … }).text(function(d, i) { … }).property(‘selected’, function(d, i) { … }).style(‘opacity’, function(d, i) { … })
this.__data__
function(d,i,data) { … }
d = datoi = índice del datodata = array de todos los datosthis = nodo DOM
al lío
Más teoríaVisualización de datos, codificación visual
valores
codificaciónvisual
https://www.safaribooksonline.com/library/view/designing-data-visualizations/9781449314774/
var x = d3.scaleLinear() .domain([10, 130]) .range([0, 960]);
x(20); // 80x(50); // 320
var color = d3.scaleLinear() .domain([10, 100]) .range(["brown", "steelblue"]);
color(20); // "#9a3439"color(50); // "#7b5167"
var x = d3.scaleTime() .domain([new Date(2000, 0, 1), new Date(2000, 0, 2)]) .range([0, 960]);
x(new Date(2000, 0, 1, 5)); // 200x(new Date(2000, 0, 1, 16)); // 640x.invert(200); // Sat Jan 01 2000 05:00:00 GMT-0800 (PST)x.invert(640); // Sat Jan 01 2000 16:00:00 GMT-0800 (PST)
var x = d3.scalePoint() .domain(["a", "b", "c"]) .range([0, width]);
var x = d3.scaleBand() .domain(["a", "b", "c"]) .range([0, width]) .padding(0.05);
var c = d3.scaleOrdinal() .domain(["apple", "orange", "banana", "grapefruit"]) .range(["green”, ”orange”, ”yellow”, ”red"]);
ahora si que noos libráis de las barras
Datos dinámicos y movimientoAnimación, actualización de datos, story-telling
['Python', 'JavaScript', 'PHP', 'Visual Basic .NET', 'Perl', 'Objective-C', 'Assembly language', 'Swift', 'Ruby', 'Visual Basic', 'Delphi/Object Pascal','Go', 'Groovy', 'R', 'MATLAB', 'PL/SQL', ]
<ul><li>Java</li><li>C</li><li>C++</li><li>C#</li><li>Python</li><li>JavaScript</li><li>Visual Basic .NET</li><li>Perl</li><li>Objective-C</li><li>Assembly language</li><li>Swift</li><li>Ruby</li><li>Visual Basic</li><li>Delphi/Object Pascal</li><li>Go</li></ul>
EXIT
UPDATEUPDATE
ENTER
var bars = svg.selectAll('rect.bar').data(visibleWeather, day);
console.log(bars.enter().size(), bars.size(), bars.exit().size());
bars.enter() // ENTER .append('rect') .attr('class','bar') .attr('x', function(d,i) { return x(i) + x.bandwidth(); }) .attr('width', x.bandwidth()) .attr('y', function(d) { return y(tempMin(d)); }) .attr('height', function(d) { return y(tempMax(d)-tempMin(d)); }) .style('fill', function(d) { return color(tempMin(d));}).transition() .attr('x', function(d,i) { return x(i); })
bars // UPDATE .transition() .attr('x', function(d,i) { return x(i); }) .attr('width', x.bandwidth()) .attr('y', function(d) { return y(tempMin(d)); }) .attr('height', function(d) { return y(tempMax(d)-tempMin(d)); })
bars.exit() // EXIT .remove()
going out of the boxlayouts, arcs, paths
layouts• Bundle• Chord• Cluster• Force• Histogram• Pack• Partition• Pie• Stack• Tree• Treemap• …
datos
datos más fáciles de pintar
{ region: ‘Norte’, ventas: 11245}
{ startAngle: 0, endAngle: 0.124, data: { region: ‘Norte’, ventas: 11245 }}
data
pie(data)
arc• d3.arc() es una función que devuelve un generador de arcos– un arco es un path de SVG
• se puede/suele configurar con parámetros fijos
var arc = d3.arc();
arc({ innerRadius: 0, outerRadius: 100, startAngle: 0, endAngle: Math.PI / 2}); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
var arc = d3.arc() .innerRadius(0) .outerRadius(100) .startAngle(0) .endAngle(Math.PI / 2);
arc(); // "M0,-100A100,100,0,0,1,100,0L0,0Z"
pie y arc trabajan juntosvar arc = d3.svg.arc() .outerRadius(radius - 10) .innerRadius(0);
var pie = d3.layout.pie() .sort(null) .value(function(d) { return d.population; });
var g = svg.selectAll(".arc").data(pie(countries)) .enter().append("path") .attr("class", "arc") .attr("d", arc) .style("fill", function(d) { return color(d.data.age); });
la mitad de los parámetros
la otra mitadWTF?
http://bl.ocks.org/mbostock/3887235
¡dale manolo!
tu propio layout
var resultados = [{sCandidatura: ’pp', iEscanos: 23 },{sCandidatura: ’psoe', iEscanos: 20 },{sCandidatura: ’podemos', iEscanos: 11 },{sCandidatura: ’ciudadanos', iEscanos: 7 },];
nos preparamos los datosvar resultados = [{sCandidatura: ’pp', iEscanos: 23 },{sCandidatura: ’psoe', iEscanos: 20 },{sCandidatura: ’podemos', iEscanos: 11 },{sCandidatura: ’ciudadanos', iEscanos: 7 },];
var diputados = [ ’pp0’, ‘pp1’, ’pp2’, …, ’pp22’, ‘psoe0’, ’psoe1’, …,’psoe19’, ’podemos0’, …, …, ’ciudadanos6’];
mi layoutvar squaresLayout = function(squaresPerRow, width, gapRatio){ var squareSize = width / (squaresPerRow + (squaresPerRow-1) * gapRatio); var gapSize = squareSize * gapRatio;
var layout = function(data) { return _.map(data, function(d, i) { var row = Math.floor(i / squaresPerRow); var col = i - (row*squaresPerRow); return { row: row, col: col, x: col * squareSize + col * gapSize, y: row * squareSize + row * gapSize, data: d, }; }); } layout.squareSize = squareSize; layout.gapSize = gapSize; layout.squaresPerRow = squaresPerRow;
return layout;};
layout = squaresLayout(escanosPorFila, width, gapRatio);
var squares = svg.select('.squares').datum(diputados) .selectAll('rect.square').data(layout, function(d) { return d.data.idDiputado; });
WTF?
story-tellingelegir el layout, animaciones
http://www.datamake.io/project/film-money
crossfilter - dc.js
http://square.github.io/crossfilter/https://dc-js.github.io/dc.js/
d3.js v3 ▶v4no toques… ¿por que tocas?
librería modularv3<script src="https://d3js.org/d3.v3.js"></script>
v4<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://d3js.org/d3-array.v1.min.js"></script><script src="https://d3js.org/d3-collection.v1.min.js"></script><script src="https://d3js.org/d3-color.v1.min.js"></script><script src="https://d3js.org/d3-format.v1.min.js"></script><script src="https://d3js.org/d3-interpolate.v1.min.js"></script><script src="https://d3js.org/d3-time.v1.min.js"></script><script src="https://d3js.org/d3-time-format.v2.min.js"></script><script src="https://d3js.org/d3-scale.v1.min.js"></script>
cambios de nombres
v3d3.scale.linear
d3.layout.treemap
d3.scale.ordinal
d3.time.format
v4d3.scaleLinear
d3.treemap
d3.scaleOrdinal d3.scaleBands d3.scalePoints
d3.timeFormat
cambian los joins
v3 v4var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue");
// ENTER; modifies UPDATE! 🌶circle.enter().append("circle") .style("fill", "green");
circle // ENTER + UPDATE .style("stroke", "black");
circle.exit().remove(); // EXIT
var circle = svg.selectAll("circle").data(data) // UPDATE .style("fill", "blue");
circle.enter().append("circle") // ENTER .style("fill", "green") .merge(circle) // ENTER + UPDATE .style("stroke", "black");
circle.exit().remove(); // EXIT
otros cambios• mejor soporte para Canvas (d3-shape)• transiciones coordinadas• muchos otros cambios menores– https://iros.github.io/d3-v4-whats-new
integraciónen mis apps
la convención de márgenesvar margin = {top: 20, right: 10, bottom: 20, left: 10};
var width = 960 - margin.left - margin.right, height = 500 - margin.top - margin.bottom;
var svg = d3.select("body").append("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .append("g") .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
http://bl.ocks.org/mbostock/3019563
var x = d3.scale.linear() .range([0, width]); // area útil
var y = d3.scale.linear() .range([height, 0]); // area útil
angular.js - directivas
<div class="participacion" an-chart-participacion data-current='dataCurrent' data-prev='dataPrev'></div>
angular.js - directivasmodule.directive('anChartParticipacion', function(){ var _drawChart = function(elem, dataCurrent, dataPrev, options) { … // codigo d3 aquí … };
return { restrict: 'A', scope: { dataCurrent: '=current', dataPrev: '=prev', }, link: function(scope, elem) { elem.addClass('an-chart-participacion'); scope.$watchGroup(['dataCurrent','dataPrev'], function() { if( !scope.dataCurrent || !scope.dataPrev ) return;
_drawChart(elem, scope.dataCurrent, scope.dataPrev); }); }, };});
angular.js - directivasvar _drawChart = function(elem, dataCurrent, dataPrev, options) { elem = d3.select(elem[0]); options = _.defaults(options, { width: 50, height: 60 });
var margin = {top: 0, right: 0, bottom: 20, left: 0};
var width = options.width - margin.left - margin.right, height = options.height - margin.top - margin.bottom;
elem.select("svg").remove(); var svg = elem.append("svg") .attr("width", options.width) .attr("height", options.height) .attr("viewBox", [0, 0, options.width, options.height].join(' ')) .append('g') .attr('transform', 'translate(0, ' + margin.top + height + ') scale(1,-1)'); …}
Un taller de d3.js difícil y divertido*
¿qué necesitas para hacer visualizaciones de datos impresionantes?
*http://www.macwright.org/presentations/dcjq/
Javier Abadía@javierabadia
FIN
conceptos y ejemplos
• teoría• selecciones• data joins• svg• escalas• animación• layouts• datos anidados• adornos, tooltips, eventos• otras libs: dc.js / crossfilter• dimple
• bullets (html)– selecciones, data joins
• barras horizontales (otro más interesante?)– svg, escalas, animación
• evolución temporal– data joins (enter, exit), animación
• sectores– pie, arc
• escaños• [datos anidados]• cajamar
Nested data – Nested selections• selectAll().data()– selectAll().data(function(l1) { return l1.l2_items; })
• great example: http://code.hazzens.com/d3tut/lesson_3.html