Your SlideShare is downloading. ×
  • Like
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

  • 1,326 views
Published

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.

Published in Data & Analytics , Technology
  • 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,326
On SlideShare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
12
Comments
0
Likes
3

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