Data Visualisation with D3 & Rickshaw - Berlin Expert Days

  • 1,212 views
Uploaded on

How to visualisae data with D3 & Rickshaw. …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
1,212
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
4

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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