The D3 Toolbox

3,536 views
3,527 views

Published on

0 Comments
4 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,536
On SlideShare
0
From Embeds
0
Number of Embeds
1,391
Actions
Shares
0
Downloads
0
Comments
0
Likes
4
Embeds 0
No embeds

No notes for slide

The D3 Toolbox

  1. 1. The D3 ToolboxMorphing and projecting visual data Mark Rickerby
  2. 2. DataSet of items from whichinformation and knowledgeare derived
  3. 3. VisualisationCommunicates the internalstructure and relationshipswithin data
  4. 4. VisualisationAmplifies knowledgeand cognition
  5. 5. D3.js d3js.org
  6. 6. Data-Driven DocumentsCreated by Mike BostockStanford Vis Group, New York Times
  7. 7. Data-Driven DocumentsMapping data to elements ina document
  8. 8. Data-Driven Documents§ HTML§ CSS§ DOM§ JavaScript§ SVG
  9. 9. D3 API• Selecting elements• Joining data to selections• Transforming selections• Group selections in layouts
  10. 10. SelectionsTarget an array of elementsin the current documentusing CSS3
  11. 11. Selections// single elementd3.select(node)d3.select(selector)// array of elementsd3.selectAll(nodes)d3.selectAll(selector)
  12. 12. Selectionsviz = d3.select("#viz svg") .attr("width", w) .attr("height", h);viz.selectAll("circle") .attr("x", x) .attr("y", y);
  13. 13. API StyleMethod chaining pattern
  14. 14. DataJoin values in a dataset toelements in a selection
  15. 15. Data// joining dataselection.data(dataset);
  16. 16. Data// datasets must be arraysvar dataset1 = [1, 2, 3];var dataset2 = [ { x: 1, y: 1 }, { x: 2, y: 2 }, { x: 3, y: 4 }];
  17. 17. Data Selectionsselection.data() returns theselection of elements joinedto the give data values
  18. 18. Data SelectionsWhat happens when thereare no existing elements forthe data values to join?
  19. 19. Update Selectionsselection.data() Data Elements
  20. 20. Enter & Exit SelectionsCreate new elements forincoming data and removeoutgoing elements when dataselection changes
  21. 21. Enter Selectionsselection.data().enter()where there are fewerexisting elements thanincoming data values
  22. 22. Enter Selectionsselection.data().enter() Data Elements
  23. 23. Exit Selectionsselection.data().exit()where there are moreexisting elements thancurrent data values
  24. 24. Exit Selectionsselection.data().exit() Data Elements
  25. 25. D3 philosophyEmphasis on transformingdocuments, not visualrepresentations
  26. 26. TransitionsSelections where theoperations apply smoothlyover time
  27. 27. TransitionsApply attribute changesacross elements in aselection
  28. 28. Transitions// animate a style changed3.select("#a").transition() .style("color", value);
  29. 29. InterpolatorsSimplify transformingattributes for various datatypes
  30. 30. Interpolators§ Numbers§ Strings§ Colors§ Arrays and Objects§ Affine transforms
  31. 31. LayoutsOrganise data for specifictypes of visualisation
  32. 32. Layouts§ Bundle § Pack§ Chord § Partition§ Cluster § Pie§ Force § Stack§ Hierarchy § Tree§ Histogram § Treemap
  33. 33. D3 philosophyRepresentational transparency
  34. 34. D3 philosophyNot a charting library
  35. 35. Computing Datavar languages = [ {"key":"PHP","projects":4283}, {"key":"Ruby","projects":9162}, {"key":"Python","projects":3102}];var pie = d3.layout.pie() .value(function(d){ return d.projects; });selection.data(pie(languages));
  36. 36. API StyleConstructors return functions
  37. 37. ScalesMapping from data toattributes (data-space tovisual-space)
  38. 38. ScalesDomain —› Range
  39. 39. Scales§ Linear § Threshold§ Square Root § Quantile§ Exponential § Identity§ Logarithmic § Ordinal§ Quantize
  40. 40. Ordinal ScalesOften used to assign colours
  41. 41. Ordinal Scalesvar colors = ["#98abc5", "#8a89a6", "#7b6888"];// create a color functionvar col = d3.scale.ordinal() .range(colors);
  42. 42. GeographyDisplay geographic shapesand project location valuesto pixel coordinates
  43. 43. Projections§ Mercator§ Albers§ Azimuthal
  44. 44. Choropleth Mapd3.geo.path + d3.scale.quantize:
  45. 45. Sunburst Chartd3.layout.partition + d3.svg.arc:
  46. 46. Streamgraphd3.layout.stack + d3.scale.linear:
  47. 47. CompositionD3 visualisations arecomposed from atomicfunctions and chainedoperations
  48. 48. RepresentationOperating directly on dataand the DOM is morecomplex, but also moreflexible and powerful thantraditional tools
  49. 49. Learn§ Functional programming§ Statistics and algebra§ Information design
  50. 50. Programming as playThe best results with D3come from trial and error,experimentation, andconstant visual tweaking
  51. 51. Documentationhttps://github.com/mbostock/d3/wikiThe D3 API documentation isamazingly detailed
  52. 52. Explorationhttp://bl.ocks.org/Converts GitHub Gists intointeractive demos
  53. 53. Explorationhttp://enjalot.com/An experimentalenvironment for prototypingvisualisations
  54. 54. Thanks@maetlmark.rickerby@bigcommerce.com

×