Codemotion 2016 - d3.js un taller divertido y difícil

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

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 datos
2. elegir el tipo de visualización apropiado
3. buscar un ejemplo (p.ej. en bl.ocks.org) parecido
4. cambiar los datos
5. cambiar la apariencia
6. adaptar la interacción
7. integrarlo en mi app
contar una historia
con los datos

Un poco de teoría
d3.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

¿qué tiene de especial?
DATOS
JSONCSV
TSV …

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(); // legal
aceptaDos(‘pA’); // legal
aceptaDos(‘pA’,’pB’); // legal
aceptaDos(‘pA’,’pB’,’pC’); // legal

e.attr('x', function(d) { return x(d); })
e.attr('x', x)
e.attr('x', function(d) { return this.x(d); })=>=>

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

<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 = dato
i = índice del dato
data = array de todos los datos
this = nodo DOM

Más teoría
Visualización de datos, codificación visual

valores
codificación
visual
https://www.safaribooksonline.com/library/view/designing-data-visualizations/9781449314774/

var x = d3.scaleLinear()
.domain([10, 130])
.range([0, 960]);
x(20); // 80
x(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)); // 200
x(new Date(2000, 0, 1, 16)); // 640
x.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 no
os libráis de las barras

Datos dinámicos y movimiento
Animació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
UPDATE
UPDATE
ENTER

going out of the box
layouts, 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 juntos
var 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 mitad
WTF?

tu propio layout
var resultados = [
{sCandidatura: ’pp', iEscanos: 23 },
{sCandidatura: ’psoe', iEscanos: 20 },
{sCandidatura: ’podemos', iEscanos: 11 },
{sCandidatura: ’ciudadanos', iEscanos: 7 },
];

nos preparamos los datos
var 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 layout
var 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-telling
elegir 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 ▶v4
no toques… ¿por que tocas?

librería modular
v3
<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
v3
d3.scale.linear
d3.layout.treemap
d3.scale.ordinal
d3.time.format
v4
d3.scaleLinear
d3.treemap
d3.scaleOrdinal
d3.scaleBands
d3.scalePoints
d3.timeFormat

cambian los joins
v3 v4
var 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

la convención de márgenes
var 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 + ")");
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>

module.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);
});
},
};
});

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

Codemotion 2016 - d3.js un taller divertido y difícil

Más contenido relacionado

La actualidad más candente (20)

Similar a Codemotion 2016 - d3.js un taller divertido y difícil (16)

Más de Javier Abadía (12)

Último (20)

Codemotion 2016 - d3.js un taller divertido y difícil

Notas del editor