@serverdensity
@byrichardpowell
Monitor your infrastructure
Monitor your services
30 TB of data per month!
2 billion documents a day
http://bit.ly/30TB-pm
A Story
Pedro
Our Ops Engineer
!
☀
Time Series Graphs!
Solve Problems
1. D3!
2. Rickshaw!
3. Rickshaw ++!
4. The BIG Lesson!
D3
Getting Started
javascript
javascript
javascript
Data Visualisation !
is in D3’s DNA
bl.ocks.org/mbostock/4060606
color.method.ac/
bl.ocks.org/mbostock/4063318
http://bl.ocks.org/mbostock/4063582
http://hughsk.io/colony/
javascript
javascript
jsbin.com/golafiye/1/edit?
html,js,output
https://github.com/mbostock/d3/wiki/Layouts
Layouts
alignedleft.com/tutorials/d3/!
!
github.com/mbostock/d3/wiki/Gallery!
!
github.com/mbostock/d3/wiki/Tutorials!
!
@mbostock
Rickshaw
code.shutterstock.com/rickshaw/examples
javascript
svg
“Above all else !
show the data”
Edward Rolf Tufte, 1983
bit.ly/183R6sT
javascript
javascript
javascript
++
Rickshaw
javascript
javascript
A tick every 2 hours
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 ...
javascript
javascript
☺!
THE LESSON
“A state of joy, creativity !
and total involvement !
in which problems !
seem to disappear”
Mihaly Csikszentmihalyi
1. Intuitive interfaces!
2. Forgiving workflows!
3. Attractive designs!
4. Personality!
5. And avoiding…
Flexible Data. Sigh.
javascript
javascript
javascript
coffeescript
coffeescript
Jaggedy Data
coffeescript
1. Missing X & Y Data!
2. Badly ordered dates!
3. Duplicate X Values!
4. X Values too close!
5. Missing Series Names
Unpredictable Data?
@serverdensity
@byrichardpowell
Monitor servers & websites
Configure Alerts
Manage your infrastructure
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Upcoming SlideShare
Loading in...5
×

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

1,839

Published on

How to visualisae data with D3 & Rickshaw.

In this talk I share my experience of building Server Density's time series graphs usng the javascript libraries: D3 & Rickshaw. I Cover:

* Why I think Data Visualisation is important
* How to get started with D3 & Rickshaw
* Why I think D3 and Rickshaw are fantastic libraries
* The mistakes I made and how to avoid them.

Published in: Data & Analytics, Technology
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,839
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
18
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

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

    Clipping is a handy way to collect important slides you want to go back to later.

×