"Визуализация данных с помощью d3.js", Михаил Дунаев, MoscowJS 19

Слайды доклада Михаила "Визуализация данных с помощью d3.js", MoscowJS 19

1. Михаил Дунаев
программист спецпроектов http://lenta.ru
http://mdunaev.github.io/
Визуализация данных с помощью D3.js

2. Excel

3. Итак, вам нужна диаграмма

4. Стандартные диаграммы

5. Лучшая библиотека для визуализации данных
В двадцатке самых популярных js-проектов на GitHub
151KB

6. От простого к сложному

8. https://github.com/mbostock/d3/wiki/Gallery
&
http://bl.ocks.org/mbostock

9. d3.select("div");
d3.selectAll("div");
W3C Selectors API или Sizzle
var allDivs = d3.select( "div");

10. Chaining
d3.selectAll("a")

11. Chaining
d3.selectAll("a")
.style("color", "red")
.attr("href", "http://lenta.ru")

12. Chaining
d3.selectAll("a")
.style("color","red")
.attr("href","http://lenta.ru")
.on("click", function(d, i){
alert("click on a");
});

13. • d3.csv - request a comma-separated values (CSV) file.
• d3.html - request an HTML document fragment.
• d3.json - request a JSON blob.
• d3.text - request a text file.
• d3.tsv - request a tab-separated values (TSV) file.
• d3.xhr - request a resource using XMLHttpRequest.
• d3.xml - request an XML document fragment.
загрузка данных
d3.json("file.json", function(error, json) {
});

14. Связывание данных
var myData = [1,2,3,4,7,3,2];
d3.selectAll(".column")
.data(myData)
.style("height",function(d, i){
return d*10+”px”;
});

15. enter()
var deputys = [
{income:120000, law:20, party: ”kprf”},
{income:7000000, law:0, party: ”er”},
{income:1000, law:200, party: ”sr”},
........
];

16. var deputys = [
{income:120000, law:20, party: ”kprf”},
{income:7000000, law:0, party: ”er”},
{income:1000, law:200, party: ”sr”},
........
];
d3.select("body").append("svg")

17. var deputys = [
{income:120000, law:20, party: ”kprf”},
{income:7000000, law:0, party: ”er”},
{income:1000, law:200, party: ”sr”},
........
];
d3.select("body").append("svg")
.selectAll("rect").data(deputys)

18. var deputys = [
{income:120000, law:20, party: ”kprf”},
{income:7000000, law:0, party: ”er”},
{income:1000, law:200, party: ”sr”},
........
];
d3.select("body").append("svg")
.selectAll("rect").data(deputys)
.enter()
.append("rect")

19. var deputys = [
{income:120000, law:20, party: ”kprf”},
{income:7000000, law:0, party: ”er”},
{income:1000, law:200, party: ”sr”},
........
];
d3.select("body").append("svg")
.selectAll("rect").data(deputys)
.enter()
.append("rect")
.attr("cx", function(d, i) {
return d.income/100+"px";
})
.attr("cy", function(d, i) {
return d.law*2+"px";
}) // …и тд

20. result

22. d3.select("svg")
.data(newData)
.attr(" cx", function(d, i) {
return d.income /1000+"px";
})
.exit()
.remove();
exit()

23. анимация
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);


var rect = svg.append('rect')
.attr('width', 20)
.attr('height', 20)
.attr('fill', '#ff0000');


rect.attr('x', 0)
.transition()

.ease('bounce-out')
.duration(3000)

.attr('x', 100)
.attr('height', 100)

.attr('fill', 'green')

24. http://easings.net

25. прочие хелперы
• Behaviors - reusable interaction behaviors
• Core - selections, transitions, data, localization, colors,
etc.
• Geography - project spherical coordinates, latitude &
longitude math
• Geometry - utilities for 2D geometry, such as Voronoi
diagrams and quadtrees
• Layouts - derive secondary data for positioning elements
• Scales - convert between data and visual encodings
• SVG - utilities for creating Scalable Vector Graphics
• Time - parse or format times, compute calendar intervals,
etc.
https://github.com/mbostock/d3/wiki/API-Reference

26. layouts
Bundle - apply Holten's hierarchical bundling algorithm to edges.
Chord - produce a chord diagram from a matrix of relationships.
Cluster - cluster entities into a dendrogram.
Force - position linked nodes using physical simulation.
Hierarchy - derive a custom hierarchical layout implementation.
Histogram - compute the distribution of data using quantized bins.
Pack - produce a hierarchical layout using recursive circle-packing.
Partition - recursively partition a node tree into a sunburst or icicle.
Pie - compute the start and end angles for arcs in a pie or donut chart.
Stack - compute the baseline for each series in a stacked bar or area chart.
Tree - position a tree of nodes tidily.
Treemap - use recursive spatial subdivision to display a tree of nodes.

27. Streamgraph

28. Hierarchical Edge Bundling

29. Treemap

30. Итого:
просто
быстро
красиво

31. http://mdunaev.github.io/mjs.zip