Data Visualisation with D3 & Rickshaw - Berlin Expert Days
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

  • 1,385 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,385
On Slideshare
1,356
From Embeds
29
Number of Embeds
3

Actions

Shares
Downloads
10
Comments
0
Likes
3

Embeds 29

https://twitter.com 18
http://www.slideee.com 10
http://www.slidesearchengine.com 1

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