Визуализация данных в браузере с помощью D3.js / Михаил...
-
Upload
ontico -
Category
Engineering
-
view
906 -
download
2
Transcript of Визуализация данных в браузере с помощью D3.js / Михаил...
Михаил Дунаев программист спецпроектов http://lenta.ru
!http://mdunaev.github.io/
Визуализация данных в браузере с помощью d3.js
https://github.com/mbostock/d3/wiki/Gallery &
http://bl.ocks.org/mbostock
!50
Chaining
d3.selectAll("a")!! .style("color", "red")!! .attr("href", "http://lenta.ru")!! .on("click", function(d, i){!! ! alert("click on a");!! });
!64
!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){!!
var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!
});
!73
d3.json('data.json', function(error, json){!!
var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!
});
!75
d3.json('data.json', function(error, json){!!
var svg = d3.select('body').append('svg')!! ! .attr('width', 300).attr('height', 300);!!svg.selectAll('rect'); // []!
});
!76
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);!});
!77
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);!});
!81
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');!});
!82
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');!});
!84
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);!});
!85
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);!});
!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
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
!<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
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