D3 – Data Driven Documents
d3js.org
Charakteristika
● Knihovna pro (komplexní, interaktivní)
vizualizace
● HTML, SVG, JS, CSS
● Založena na data bindingu
● Množství funkcí pro manipulaci s daty
● Manipulace s DOM
● Neobsahuje grafické funkce (využívá HTML a
SVG)
Selekce
d3.selectAll("circle")
.attr("cx", 20)
.attr("cy", 12)
.attr("r", 24)
.style("fill", "red");
Data Binding
var data = [4, 8, 15, 16, 23, 42];
d3.select(".chart")
.selectAll("div")
.data(data)
.enter().append("div")
.style("width",
function(d) { return d * 10 +"px"; })
.text(function(d) { return d; });
Výhody a nevýhody
Výhody
● Mocný nástroj
● Standardy
● Množství funkcí pro
manipulaci s daty
● Rozsáhlý seznam
ukázek
Nevýhody
● Neintuitivní
koncept
● Nutnost napsat
hodně kódu I pro
jednoduché
vizualizace
Ukázky
https://github.com/mbostock/d3/wiki/Gallery
http://bl.ocks.org/mbostock
http://christopheviau.com/d3list/gallery.html