Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)

Михаил Дунаев программист спецпроектов http://lenta.ru

!http://mdunaev.github.io/

Визуализация данных в браузере с помощью d3.js

http://mdunaev.github.io/

!2

!3

!4

!5

!618 век

!7

!8

!9Charting culture

!10

нам нужно больше диаграмм

!11

!12barchart

!13

!14circular area map

!15stacked area

!16

!17

!18

!19

!20

!21

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

!22

Одна из лучших библиотек для визуализации данных

!23

!24

!25

!26

!27

!28

!29

!30

!31

!32

!33

!34

!35

!36

!37

!38

!39

!40

!41

!42

!43

!44

!45

!46

!47

!48

!49

https://github.com/mbostock/d3/wiki/Gallery &

http://bl.ocks.org/mbostock

!50

https://github.com/mbostock/d3/wiki/Gallery

http://bl.ocks.org/mbostock

!51

!52

!53

!54

!55

!56

!57

!58

!59

!60

!61

!62

d3.select("div");

d3.selectAll("div");

W3C Selectors API или Sizzle

!63

Chaining

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

!64

!65

!66

scatter chart

!68

{!! "deputates":[!! ! {!

! ! ! "name": "Абалаков Александр Николаевич",!! ! ! "income": 6641507,!! ! ! "speeches": 57,!! ! ! "party": "kprf"!! ! },!! ! {!

! ! ! "name": "Абасов Мамед Магарамович",!! ! ! "income": 3888593,!! ! ! "speeches": 10,!! ! ! "party": "er"!! ! },!! ! {!

! ! ! "name": "Абрамов Иван Николаевич",!! ! ! "income": 3877450,!! ! ! "speeches": 38,!! ! ! "party": "ldpr"!! ! }!

....!! ]!}

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">!</script>!!<script type="text/javascript">!!</script>

!69

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8">!</script>!!<script type="text/javascript">!!d3.json('data.json', function(error, json){!!});!!</script>

!70

d3.json('data.json', function(error, json){!!});

!71

d3.json('data.json', function(error, json){!!

var svg = d3.select('body').append('svg');!!

});

!72


var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!

});

!73

!74


var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!

});

!75


var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!svg.selectAll('rect'); // []!

});

!76


var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!svg.selectAll('rect')!

.data(json.deputates);!});

!77

!78

Data DOM

Data-driven

!79

Data DOM

!80

Data DOM



.data(json.deputates);!});

!81



.data(json.deputates)!

.enter()!

.append('rect');!});

!82

!83




.enter()!

.append('rect');!});

!84




.enter()!

.append('rect')!

.attr('width', 10)!

.attr('height', 10);!});

!85




.enter()!

.append('rect')!

.attr('width', 10)!

.attr('height', 10);!});

!86

svg.selectAll('rect')!.data(json.deputates)!.enter()!.append('rect')!.attr('width', 10)!.attr('height', 10);!

!87

svg.selectAll('rect')!.data(json.deputates)!.enter()!.append('rect')!.attr('width', 10)!.attr('height', 10)!.attr('x', function(d,i){!! ! ! return d.speeches!! ! });!

!88

{!

! "name": "Абалаков Александр Николаевич",!! "income": 6641507,!! "speeches": 57,!! "party": "kprf"!}

svg.selectAll('rect')!.data(json.deputates)!.enter()!.append('rect')!.attr('width', 10)!.attr('height', 10)!.attr('x', function(d,i){!! ! ! return d.speeches!

! ! })!.attr('y', function(d,i){!! ! ! return d.income/100000!! ! });!

!89

!90

svg.selectAll('rect')!.data(json.deputates)!.enter()!.append('rect')!.attr('width', 10)!.attr('height', 10)!.attr('x', function(d,i){!! ! ! return d.speeches!

! ! })!.attr('y', function(d,i){!! ! ! return d.income/100000!! ! })!.attr('fill', function(d,i){!

var colors = { kprf:'#FF0000', ! er: '#0000FF',! ldpr:'#00FF00' };!

! ! ! return colors[d.party]!! ! });!

!91

!92

!<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>!<script type="text/javascript">!!!d3.json('data.json', function(error, json){!! var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!! svg.selectAll('rect')!! ! .data(json.deputates)!! ! .enter()!! ! .append('rect')!! ! .attr('width', 10)!! ! .attr('height', 10)!! ! .attr('x', function(d,i){!! ! ! return d.speeches!! ! }).attr('y', function(d,i){!! ! ! return d.income/100000!! ! }).attr('fill', function(d,i){!! ! ! var colors = {kprf:'#FF0000', er:'#0000FF', ldpr:'#00FF00'};!! ! ! return colors[d.party]!! ! })!});!!</script>

!93

!94

!95

Анимация!

!96

d3.select("body") !.style("color", "green")!.transition()!.style("color", "red");

http://easings.net

!97

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.

!98

Streamgraph

!99

Hierarchical Edge Bundling

!100

Treemap

!101

Итого: !

просто быстро красиво

!102

https://yadi.sk/d/Jte89fIegnhyR

Engineering

Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)