Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Михаил Дунаев
программист спецпроектов http://lenta.ru
http://mdunaev.github.io/
Визуализация данных с помощью D3.js
Excel
Итак, вам нужна диаграмма
Стандартные диаграммы
Лучшая библиотека для визуализации данных
В двадцатке самых популярных js-проектов на GitHub
151KB
От простого к сложному
https://github.com/mbostock/d3/wiki/Gallery
&
http://bl.ocks.org/mbostock
d3.select("div");
d3.selectAll("div");
W3C Selectors API или Sizzle
var allDivs = d3.select("div");
Chaining
d3.selectAll("a")
Chaining
d3.selectAll("a")
.style("color", "red")
.attr("href", "http://lenta.ru")
Chaining
d3.selectAll("a")
.style("color","red")
.attr("href","http://lenta.ru")
.on("click", function(d, i){
alert("click...
•	 d3.csv - request a comma-separated values (CSV) file.

	•	 d3.html - request an HTML document fragment.

	•	 d3.json - r...
Связывание данных
var myData = [1,2,3,4,7,3,2];
d3.selectAll(".column")
.data(myData)
.style("height",function(d, i){
retu...
enter()
var deputys = [
{income:120000, law:20, party:”kprf”},
{income:7000000, law:0, party:”er”},
{income:1000, law:200,...
var deputys = [
{income:120000, law:20, party:”kprf”},
{income:7000000, law:0, party:”er”},
{income:1000, law:200, party:”...
var deputys = [
{income:120000, law:20, party:”kprf”},
{income:7000000, law:0, party:”er”},
{income:1000, law:200, party:”...
var deputys = [
{income:120000, law:20, party:”kprf”},
{income:7000000, law:0, party:”er”},
{income:1000, law:200, party:”...
var deputys = [
{income:120000, law:20, party:”kprf”},
{income:7000000, law:0, party:”er”},
{income:1000, law:200, party:”...
result
d3.select("svg")
.data(newData)
.attr("cx", function(d, i) {
return d.income/1000+"px";
})
.exit()
.remove();
exit()
анимация
var svg = d3.select('body')
.append('svg')
.attr('width', 500)
.attr('height', 500);


var rect = svg.append('rec...
http://easings.net
прочие хелперы
	•	 Behaviors - reusable interaction behaviors

	•	 Core - selections, transitions, data, localization, col...
layouts
Bundle - apply Holten's hierarchical bundling algorithm to edges.
Chord - produce a chord diagram from a matrix of...
Streamgraph
Hierarchical Edge Bundling
Treemap
Итого:
просто
быстро
красиво
http://mdunaev.github.io/mjs.zip
"Визуализация данных с помощью d3.js", Михаил Дунаев, MoscowJS 19
"Визуализация данных с помощью d3.js", Михаил Дунаев, MoscowJS 19
Upcoming SlideShare
Loading in …5
×
Upcoming SlideShare
Визуализация данных в браузере с помощью D3.js / Михаил Дунаев (Rambler&Co)
Next
Download to read offline and view in fullscreen.

3

Share

Download to read offline

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

Download to read offline

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

Related Books

Free with a 30 day trial from Scribd

See all

Related Audiobooks

Free with a 30 day trial from Scribd

See all

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

  1. 1. Михаил Дунаев программист спецпроектов http://lenta.ru http://mdunaev.github.io/ Визуализация данных с помощью D3.js
  2. 2. Excel
  3. 3. Итак, вам нужна диаграмма
  4. 4. Стандартные диаграммы
  5. 5. Лучшая библиотека для визуализации данных В двадцатке самых популярных js-проектов на GitHub 151KB
  6. 6. От простого к сложному
  7. 7. https://github.com/mbostock/d3/wiki/Gallery & http://bl.ocks.org/mbostock
  8. 8. d3.select("div"); d3.selectAll("div"); W3C Selectors API или Sizzle var allDivs = d3.select("div");
  9. 9. Chaining d3.selectAll("a")
  10. 10. Chaining d3.selectAll("a") .style("color", "red") .attr("href", "http://lenta.ru")
  11. 11. Chaining d3.selectAll("a") .style("color","red") .attr("href","http://lenta.ru") .on("click", function(d, i){ alert("click on a"); });
  12. 12. • 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) { });
  13. 13. Связывание данных var myData = [1,2,3,4,7,3,2]; d3.selectAll(".column") .data(myData) .style("height",function(d, i){ return d*10+”px”; });
  14. 14. enter() var deputys = [ {income:120000, law:20, party:”kprf”}, {income:7000000, law:0, party:”er”}, {income:1000, law:200, party:”sr”}, ........ ];
  15. 15. 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")
  16. 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") .selectAll("rect").data(deputys)
  17. 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) .enter() .append("rect")
  18. 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") .attr("cx", function(d, i) { return d.income/100+"px"; }) .attr("cy", function(d, i) { return d.law*2+"px"; }) // …и тд
  19. 19. result
  20. 20. d3.select("svg") .data(newData) .attr("cx", function(d, i) { return d.income/1000+"px"; }) .exit() .remove(); exit()
  21. 21. анимация 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')
  22. 22. http://easings.net
  23. 23. прочие хелперы • 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
  24. 24. 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.
  25. 25. Streamgraph
  26. 26. Hierarchical Edge Bundling
  27. 27. Treemap
  28. 28. Итого: просто быстро красиво
  29. 29. http://mdunaev.github.io/mjs.zip
  • KhramovaNadejda

    Dec. 18, 2015
  • gladkih_m

    Mar. 9, 2015
  • allfayn

    Feb. 26, 2015

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

Views

Total views

2,102

On Slideshare

0

From embeds

0

Number of embeds

29

Actions

Downloads

30

Shares

0

Comments

0

Likes

3

×