D3 Rickshaw and Backbone in 50 minutes
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

D3 Rickshaw and Backbone in 50 minutes

on

  • 1,288 views

Using D3, Rickshaw and Backbone to create Server Density's time-series charts. ...

Using D3, Rickshaw and Backbone to create Server Density's time-series charts.

In this talk I cover:

* D3, Rickshaw and Backbone
* Data Visualisation Design
* Backend API Design
* Programming defensively
* Maths in JavaScript

Statistics

Views

Total Views
1,288
Views on SlideShare
1,286
Embed Views
2

Actions

Likes
0
Downloads
8
Comments
0

2 Embeds 2

http://www.steampdf.com 1
http://ngoding.co 1

Accessibility

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

D3 Rickshaw and Backbone in 50 minutes Presentation Transcript

  • 1. @byrichardpowell byrichardpowell.co.uk Thursday, 28 November 13
  • 2. Thursday, 28 November 13
  • 3. Manage your infrastructure Thursday, 28 November 13
  • 4. Monitor your devices Thursday, 28 November 13
  • 5. Monitor your services Thursday, 28 November 13
  • 6. Thursday, 28 November 13
  • 7. 25 TB of data per month Thursday, 28 November 13
  • 8. The backbone logo inside a rickshaw Time Series Graphs with Rickshaw, D3 & Backbone.js Thursday, 28 November 13
  • 9. Why talk about data visulisation? Thursday, 28 November 13
  • 10. Spot Patterns gapminder.org/world/ Thursday, 28 November 13
  • 11. Spot Patterns gapminder.org/world/ Thursday, 28 November 13
  • 12. Diagnose Problems Thursday, 28 November 13
  • 13. Funny picture Data visualization can be beautiful Je Thorp: Word Frequency Thursday, 28 November 13
  • 14. “Data Visualization is awesome” this kid, 2013 Thursday, 28 November 13
  • 15. Overview 1. 2. 3. 4. SVG, D3, Rickshaw Data Visualisation Design API Design Backbone Thursday, 28 November 13
  • 16. 1. SVG, D3 & Rickshaw Thursday, 28 November 13
  • 17. “A modularized language for describing two-dimensional vector and mixed vector/raster graphics in XML” w3.org/TR/SVG/ Thursday, 28 November 13
  • 18. Elements & Attributes Thursday, 28 November 13
  • 19. website snapsvg.io Thursday, 28 November 13
  • 20. pablojs.com/ Thursday, 28 November 13
  • 21. raphaeljs.com/ Thursday, 28 November 13
  • 22. Why D3 & Why Rickshaw? Thursday, 28 November 13
  • 23. Mike Bostock @mbostock Thursday, 28 November 13
  • 24. examples? github.com/mbostock/d3/wiki/Gallery Thursday, 28 November 13
  • 25. Horizon Graphs square.github.io/cubism/ Thursday, 28 November 13
  • 26. Calender Heatmaps bl.ocks.org/mbostock/4063318 Thursday, 28 November 13
  • 27. Rickshaw is feature rich * Line * Stacked * Scaled Series * Custom Axis Formatting * Custom tooltips * Disabling/enabling series Thursday, 28 November 13
  • 28. Rickshaw is feature rich * Scatterplots * Bar charts * Mixed charts * Logarithmic & Absolute Scaling * Annotations Thursday, 28 November 13
  • 29. xkcd.com/418/ Thursday, 28 November 13
  • 30. 2. Design Thursday, 28 November 13
  • 31. “Above all else show the data” Edward Rolf Tufte, 1983 Thursday, 28 November 13
  • 32. bit.ly/183R6sT Thursday, 28 November 13
  • 33. bit.ly/183R6sT Thursday, 28 November 13
  • 34. Data to Ink Ratio: Classes Thursday, 28 November 13
  • 35. Data to Ink Ratio: Classes Thursday, 28 November 13
  • 36. Data to Ink Ratio: Classes Thursday, 28 November 13
  • 37. Data to Ink Ratio: Classes Thursday, 28 November 13
  • 38. Data to Ink Ratio: Legend Classes Thursday, 28 November 13
  • 39. Use only the classes you need to create the design you want Thursday, 28 November 13
  • 40. “Having the data is not enough. I have to show it in ways people both enjoy and understand.” Hans Rosling Thursday, 28 November 13
  • 41. Enjoy Thursday, 28 November 13
  • 42. “A state of joy, creativity and total involvement, in which problems seem to disappear and there is an exhilarating feeling of transcendence” Mihaly Csikszentmihalyi Thursday, 28 November 13
  • 43. This is not enjoyment this is not flow Thursday, 28 November 13
  • 44. To maintain flow Be Defensive Thursday, 28 November 13
  • 45. Defensive: Check for errors Thursday, 28 November 13
  • 46. Defensive: Quarantine Thursday, 28 November 13
  • 47. Defensive: Give Feedback Thursday, 28 November 13
  • 48. Being Forgiving Thursday, 28 November 13
  • 49. Understand Thursday, 28 November 13
  • 50. Numbers or Patterns? Thursday, 28 November 13
  • 51. 19th Nov 2003 Physical Memory Used: 200 Both? Thursday, 28 November 13
  • 52. Comparisons? Thursday, 28 November 13
  • 53. Custom Formatted Tooltips Thursday, 28 November 13
  • 54. Tooltip Events Thursday, 28 November 13
  • 55. Synchronized Tooltips Thursday, 28 November 13
  • 56. Synchronized Tooltips Thursday, 28 November 13
  • 57. “You’ve got a good piece of software when people use it for purposes it was never intended for.” Clay Shirky Thursday, 28 November 13
  • 58. We Never Expected Thursday, 28 November 13
  • 59. Multiple Axis bit.ly/17lKqn5 Thursday, 28 November 13
  • 60. Multiple Axis bit.ly/17lKqn5 Thursday, 28 November 13
  • 61. Generating a scale Thursday, 28 November 13
  • 62. Generating multiple scales Thursday, 28 November 13
  • 63. Using the scales Thursday, 28 November 13
  • 64. Scaling the axis Thursday, 28 November 13
  • 65. xkcd.com/231/ Thursday, 28 November 13
  • 66. 3.Metrics Thursday, 28 November 13
  • 67. “How do we request graph data for metrics ... ?” Thursday, 28 November 13
  • 68. Metrics can be simple, complex or dynamic Thursday, 28 November 13
  • 69. Metrics can be combined Thursday, 28 November 13
  • 70. “How do we request graph data for multiple metrics at once that can nest many levels deep and are dynamic?” Thursday, 28 November 13
  • 71. Structured as JSON Thursday, 28 November 13
  • 72. JSON in a URL Thursday, 28 November 13
  • 73. The graph data Thursday, 28 November 13
  • 74. xkcd.com/518/ Thursday, 28 November 13
  • 75. 4.Backbone Thursday, 28 November 13
  • 76. Thursday, 28 November 13
  • 77. tabs graphs Thursday, 28 November 13 alerting plugins
  • 78. Thursday, 28 November 13
  • 79. graphs date Thursday, 28 November 13 graph graph
  • 80. Thursday, 28 November 13
  • 81. graph options Thursday, 28 November 13 series legend axis
  • 82. Thursday, 28 November 13
  • 83. tabs view graphs view graph views options view dropdown views Thursday, 28 November 13
  • 84. Zombies: Cool for fancy dress Events and not cool for code the mediator pattern Thursday, 28 November 13
  • 85. Using mediator events Thursday, 28 November 13
  • 86. Using Collection Events Thursday, 28 November 13
  • 87. Zombies: Cool for fancy dress not cool for code Thursday, 28 November 13
  • 88. Managing Views Thursday, 28 November 13
  • 89. Be Defensive Thursday, 28 November 13
  • 90. Dealing with time (badly) Thursday, 28 November 13
  • 91. Dealing with time (badly) Thursday, 28 November 13
  • 92. Dealing with time (badly) Thursday, 28 November 13
  • 93. Dealing with time (badly) Thursday, 28 November 13
  • 94. Thursday, 28 November 13
  • 95. Dealing with time Thursday, 28 November 13
  • 96. xkcd.com/290/ Thursday, 28 November 13
  • 97. www.serverdensity.com/ bit.ly/1erNJNz @byrichardpowell Thursday, 28 November 13