Descripció
D3, acrònim de Data-Driven Documents, és una llibreria d’alt nivell Javascript per a la creació de gràfics i visualitzacions de dades interactives que s’executen com una pàgina web. Per a fer-ho utilitza HTML, CSS, DOM i SVG com a tecnologies web base. Va ser creada per Mike Bostock i Jeffrey Heer el 2011.
La principal característica de D3 és que permet un control total sobre tots els elements que componen la visualització, així com la interacció amb cadascun d’ells. D3 permet crear gràfics interactius combinant elements de les diferents capes que componen una pàgina web: llenguatge HTML, manipulació dels objectes que constitueixen el document mitjançant nodes DOM (Document Object Model), aplicació d’estils mitjançant CSS (Cascading Style Sheets) i, òbviament, Javascript, amb el qual s’obtenen gràfics en format SVG (Scalable Vector Graphics), que poden ser visualitzats directament per qualsevol navegador web. Així, l’acrònim D3 fa referència al fet d’enllaçar directament dades amb elements del DOM, que permet la seva actualització immediata segons els canvis que es produeixin en les dades i genera d’aquesta manera visualitzacions interactives i dinàmiques. Les dades poden provenir de diferents fonts i formats, com CSV o JSON, per exemple.
Un dels aspectes més interessants de D3 és l’existència de diferents layouts per crear visualitzacions, com si fossin plantilles, incloent-hi la majoria dels més habituals, entre altres, diagrames de Sankey, treemaps, grafs de força dirigits i mapes, per exemple.
Enllaç al recurs
Exemple d’ús
El codi següent, que fa servir la versió v3 de D3.js, mostra un gràfic de barres horitzontal i inclou una mínima interactivitat quan l’usuari situa el cursor per sobre d’una de les barres. Bàsicament, aquest codi defineix dos estils per a les barres, un de color blau acer i un altre de color taronja quan la barra està sota el cursor (operació hover). Després de definir les dades d’exemple en l’array data, es crea un element anomenat svg, que és el canvas on es dibuixa la visualització, i és llavors on s’aprofiten algunes de les característiques més potents de D3, com ara carregar les dades (les línies .data(data) i .enter() que les «introdueixen» en el document), o crear els elements gràfics i determinar-ne la posició i el valor utilitzant les dades carregades.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Minimal D3 Example</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<style>
.bar {
fill: steelblue;
}
.bar:hover {
fill: orange;
}
</style>
</head>
<body>
<script type="text/javascript">
var data = [150, 230, 180, 90];
var svg = d3.select("bodi")
.append("svg")
.attr("width", 300)
.attr("height", 200);
svg.selectAll(".bar")
.data(data)
.enter()
.append("rect")
.attr({
class : "bar",
width : function(d) {return d;},
height: "40",
i : function(d, i) {return i*50 + 10;},
x : "10"
});
</script>
</body>
</html>
Enllaços relacionats
Exemple mínim: http://bl.ocks.org/alexsb/8565055
Galeria d’exemples: https://github.com/d3/d3/wiki/gallery
Anàlisi visual amb D3: http://oer.uoc.edu/vis/d3/es/