Data Visualisation with D3 & Rickshaw

Why you shoudl care about Data Visualisation and lesson's we've learnt building Server Density's monitoring graphs.

Transcript

1. @serverdensity @byrichardpowell
2. Monitor your infrastructure
3. Monitor your services
5. 30 TB of data per month! 2 billion documents a day http://bit.ly/30TB-pm
6. A Story
7. Pedro Our Ops Engineer
8. !
12. ‗ Time Series Graphs! Solve Problems
13. 1. D3! 2. Rickshaw! 3. Rickshaw ++! 4. The BIG Lesson!
14. D3
15. Getting Started
16. javascript
17. javascript
18. javascript
19. Data Visualisation ! is in D3’s DNA
20. bl.ocks.org/mbostock/4060606
21. color.method.ac/
22. bl.ocks.org/mbostock/4063318
23. http://bl.ocks.org/mbostock/4063582
24. http://hughsk.io/colony/
26. javascript
27. javascript
28. jsbin.com/golafiye/1/edit? html,js,output
29. https://github.com/mbostock/d3/wiki/Layouts Layouts
30. alignedleft.com/tutorials/d3/! ! github.com/mbostock/d3/wiki/Gallery! ! github.com/mbostock/d3/wiki/Tutorials! ! @mbostock
31. Rickshaw
33. code.shutterstock.com/rickshaw/examples
34. javascript
35. svg
36. “Above all else ! show the data” Edward Rolf Tufte, 1983
37. bit.ly/183R6sT
38. javascript
40. javascript
41. javascript
42. ++ Rickshaw
44. javascript
45. javascript
46. A tick every 2 hours
47. Tick Every No of Ticks Date Format 30 minutes 2 minutes 15 HH:mm 1 hour 5 minutes 12 HH:mm 24 hours 2 Hours 12 HH:mm > 24 hours Dynamic 15 D MMM YYY
48. javascript
49. javascript
53. ☺! THE LESSON
55. “A state of joy, creativity ! and total involvement ! in which problems ! seem to disappear” Mihaly Csikszentmihalyi
56. 1. Intuitive interfaces! 2. Forgiving workflows! 3. Attractive designs! 4. Personality! 5. And avoiding…
58. Flexible Data. Sigh.
59. javascript
60. javascript
61. javascript
63. coffeescript
64. coffeescript
65. Jaggedy Data
66. coffeescript
67. 1. Missing X & Y Data! 2. Badly ordered dates! 3. Duplicate X Values! 4. X Values too close! 5. Missing Series Names
68. Unpredictable Data?
69. @serverdensity @byrichardpowell Monitor servers & websites Configure Alerts Manage your infrastructure