Data Visualisation with D3.

4 reasons why you should care about data visualisation. 5 concepts that are essential to understanding how D3 works. 5 tips for avoiding mistakes and createing compelling data visualisations that solve real problems.

Transcript

1. Data Visualisation with D3 @byrichardpowell
5. 1. Why Visualise Data 2. Introducing D3 3. Rockin’ at data visualisation
6. 1 Why Visualise Data
7. $15 Trillion
8. money in taxhavens financial crisis bit.ly/1kEr3fV source: money in taxhavens
9. charitable donations money in taxhavens financial crisis healthcare ending poverty bit.ly/1kEr3fV source: money in taxhavens money in taxhavens charitable donations
10. infographics
11. infographics bit.ly/1oOHSG8 source:
13. Reason 1 Pictures not numbers
14. Pedro Ops Engineer Developer
15. RabbitMQ Load Memory
16. RabbitMQ Load Memory
17. Reason 2 Simplify complex problems
18. Dom Web Designer
19. Hours Cost Scope
21. Hours Cost Scope Feature Requests 1 2
23. Reason 3 Win arguments
25. Old Visualisation
27. Reason 4 Show your skills
28. Summary
29. 2 Introducing D3
30. !
31. @mbostock
32. jQuery D3 1. DOM selection & manipulation 2. Animations 3. Event Handling 4. AJAX 5. IE6+ 6. Plugins 1. DOM selection & manipulation 2. Animations 3. Event Handling 4. AJAX 5. IE8+ 6. Layouts & examples
33. javascript
34. It may feel familiar Concept 1
35. jQuery D3 1. DOM selection & manipulation 2. Animations 3. Event Handling 4. AJAX 5. IE6+ 6. Plugins 1. DOM selection & manipulation 2. Animations 3. Event Handling 4. AJAX 5. IE8+ 6. Layouts & examples ! 7. Data manipulation & traversal 8. Maths 9. Behaviours
36. javascript
37. html javascript result
38. Data driven documents Concept 2
39. Layouts 1. Bundle 2. Chord 3. Cluster 4. Force 5. Hierarchy 6. Histogram 7. Pack 8. Partition 9. Pie 10.Stack 11.Tree 12.Treemap
40. bl.ocks.org/mbostock/4060606
41. bl.ocks.org/mbostock/4063318
42. http://hughsk.io/colony/
43. color.method.ac/
44. It’s not a slideshow Concept 3
45. hours days
46. javascript
47. Data First Concept 4
48. SVG
49. <a>! <altglyph>! <altglyphdef>! <altglyphitem>! <animate>! <circle>! <clippath>! <color-profile>! <cursor>! <defs>! <desc>! <ellipse>! <feblend>! <fecolormatrix>! <feconvolvematrix>! <fediffuselighting>! <fedisplacementmap>! <fedistantlight>! <feflood>! <fefunca>! <fefuncb>! <fefuncg>! <fefuncr>! <fegaussianblur>! <feimage>! <femorphology>! <fepointlight>! <fespecularlighting>! <fespotlight>! <glyph>! <glyphref>! <line>! <lineargradient>! <marker>! <mask>! <metadata> <mpath>! <path>! <pattern>! <polygon>! <polyline>! <radialgradient>! <rect>! <set>! <stop>! <switch>! <symbol>! <text>! <textpath>! <title>! <tref>! <tspan>! <use>! <view>
50. CSS
51. javascript 3 days = x pixels
52. 5 hours = y pixels javascript
53. javascript 5 hours = y pixels
54. javascript result
55. Data Maths Elements Concept 5
56. jsbin.com/komod/11/edit
57. Summary
58. 3 Rockin’ Data Visualisation
61. Be careful not to be evil Tip 1
62. code.shutterstock.com/rickshaw/examples
63. Write less code Tip 2
64. javascript result
65. “Above all else ! show the data” Edward Rolf Tufte, 1983
66. bit.ly/183R6sT
67. javascript result
68. Show less Tip 3
69. What is the value ! of your data?
70. patterns?
71. patterns can be hidden before after
72. patterns can be hidden
73. numbers?
74. comparisons?
75. Data is your second user.! Understand it.! Bend to its flexibility. Tip 4
76. Avoiding Mistakes
77. javascript console
78. javascript console
79. Fear data you don’t control Tip 4
80. 10:00 10:02 10:04 30 minutes
81. 10:00 10:08 10:10 30 hours 10:02 10:04 10:06 10:00 10:08 10:10 10:02 10:04 10:06 10:00 10:08 10:10 10:02 10:04 10:0610:00 10:08 10:10 10:02 10:04 10:0610:00 10:08 10:10 10:02 10:04 10:06 10:00 10:08 10:10 10:02 10:04 10:06 10:00 10:08 10:10 10:02 10:04 10:06
82. 30 hours 10:00 12:00 14:00
83. javascript
84. Don’t hard code Tip 5
85. Summary
87. @serverdensity @byrichardpowell Monitor servers & websites Configure Alerts Amazon, Rackspace Google Cloud Custom dashboards