0
@byrichardpowell
byrichardpowell.co.uk
Thursday, 28 November 13
Thursday, 28 November 13
Manage your infrastructure
Thursday, 28 November 13
Monitor your devices
Thursday, 28 November 13
Monitor your services
Thursday, 28 November 13
Thursday, 28 November 13
25 TB of data per month

Thursday, 28 November 13
The backbone logo inside a rickshaw

Time Series Graphs
with Rickshaw, D3 & Backbone.js
Thursday, 28 November 13
Why talk about
data visulisation?

Thursday, 28 November 13
Spot Patterns

gapminder.org/world/
Thursday, 28 November 13
Spot Patterns

gapminder.org/world/
Thursday, 28 November 13
Diagnose Problems
Thursday, 28 November 13
Funny picture

Data visualization can be beautiful
Je Thorp: Word Frequency
Thursday, 28 November 13
“Data Visualization is awesome”
this kid, 2013

Thursday, 28 November 13
Overview

1.
2.
3.
4.

SVG, D3, Rickshaw
Data Visualisation Design
API Design
Backbone

Thursday, 28 November 13
1. SVG, D3 & Rickshaw

Thursday, 28 November 13
“A modularized language
for describing two-dimensional vector
and mixed vector/raster graphics in XML”
w3.org/TR/SVG/

Thu...
Elements & Attributes
Thursday, 28 November 13
website

snapsvg.io
Thursday, 28 November 13
pablojs.com/
Thursday, 28 November 13
raphaeljs.com/
Thursday, 28 November 13
Why D3 & Why Rickshaw?

Thursday, 28 November 13
Mike Bostock
@mbostock

Thursday, 28 November 13
examples?

github.com/mbostock/d3/wiki/Gallery
Thursday, 28 November 13
Horizon Graphs
square.github.io/cubism/

Thursday, 28 November 13
Calender Heatmaps
bl.ocks.org/mbostock/4063318

Thursday, 28 November 13
Rickshaw is feature rich
* Line
* Stacked
* Scaled Series
* Custom Axis Formatting
* Custom tooltips
* Disabling/enabling ...
Rickshaw is feature rich
* Scatterplots
* Bar charts
* Mixed charts
* Logarithmic & Absolute Scaling
* Annotations

Thursd...
xkcd.com/418/
Thursday, 28 November 13
2. Design

Thursday, 28 November 13
“Above all else show the data”
Edward Rolf Tufte, 1983

Thursday, 28 November 13
bit.ly/183R6sT
Thursday, 28 November 13
bit.ly/183R6sT
Thursday, 28 November 13
Data to Ink Ratio: Classes

Thursday, 28 November 13
Data to Ink Ratio: Classes

Thursday, 28 November 13
Data to Ink Ratio: Classes

Thursday, 28 November 13
Data to Ink Ratio: Classes

Thursday, 28 November 13
Data to Ink Ratio: Legend Classes

Thursday, 28 November 13
Use only the classes you need
to create the design you want

Thursday, 28 November 13
“Having the data is not enough.
I have to show it in ways
people both enjoy and understand.”
Hans Rosling

Thursday, 28 No...
Enjoy

Thursday, 28 November 13
“A state of joy, creativity and total involvement,
in which problems seem to disappear
and there is an exhilarating feelin...
This is not enjoyment
this is not flow
Thursday, 28 November 13
To maintain flow
Be Defensive
Thursday, 28 November 13
Defensive: Check for errors

Thursday, 28 November 13
Defensive: Quarantine

Thursday, 28 November 13
Defensive: Give Feedback

Thursday, 28 November 13
Being Forgiving
Thursday, 28 November 13
Understand

Thursday, 28 November 13
Numbers or Patterns?
Thursday, 28 November 13
19th Nov 2003
Physical Memory Used: 200

Both?
Thursday, 28 November 13
Comparisons?
Thursday, 28 November 13
Custom Formatted Tooltips

Thursday, 28 November 13
Tooltip Events

Thursday, 28 November 13
Synchronized Tooltips

Thursday, 28 November 13
Synchronized Tooltips

Thursday, 28 November 13
“You’ve got a good piece of software
when people use it for purposes
it was never intended for.”
Clay Shirky

Thursday, 28...
We Never Expected
Thursday, 28 November 13
Multiple Axis
bit.ly/17lKqn5

Thursday, 28 November 13
Multiple Axis
bit.ly/17lKqn5

Thursday, 28 November 13
Generating a scale

Thursday, 28 November 13
Generating multiple scales

Thursday, 28 November 13
Using the scales

Thursday, 28 November 13
Scaling the axis

Thursday, 28 November 13
xkcd.com/231/
Thursday, 28 November 13
3.Metrics

Thursday, 28 November 13
“How do we request graph data
for metrics ... ?”

Thursday, 28 November 13
Metrics can be
simple, complex or dynamic
Thursday, 28 November 13
Metrics can be combined
Thursday, 28 November 13
“How do we request graph data for
multiple metrics at once
that can nest many levels deep
and are dynamic?”

Thursday, 28 ...
Structured as JSON

Thursday, 28 November 13
JSON in a URL

Thursday, 28 November 13
The graph data

Thursday, 28 November 13
xkcd.com/518/
Thursday, 28 November 13
4.Backbone

Thursday, 28 November 13
Thursday, 28 November 13
tabs

graphs

Thursday, 28 November 13

alerting

plugins
Thursday, 28 November 13
graphs

date

Thursday, 28 November 13

graph

graph
Thursday, 28 November 13
graph

options

Thursday, 28 November 13

series

legend

axis
Thursday, 28 November 13
tabs view

graphs view

graph views
options view

dropdown views

Thursday, 28 November 13
Zombies: Cool for fancy dress
Events
and not cool for code
the mediator pattern

Thursday, 28 November 13
Using mediator events

Thursday, 28 November 13
Using Collection Events

Thursday, 28 November 13
Zombies: Cool for fancy dress
not cool for code

Thursday, 28 November 13
Managing Views

Thursday, 28 November 13
Be Defensive
Thursday, 28 November 13
Dealing with time (badly)

Thursday, 28 November 13
Dealing with time (badly)

Thursday, 28 November 13
Dealing with time (badly)

Thursday, 28 November 13
Dealing with time (badly)

Thursday, 28 November 13
Thursday, 28 November 13
Dealing with time

Thursday, 28 November 13
xkcd.com/290/
Thursday, 28 November 13
www.serverdensity.com/
bit.ly/1erNJNz

@byrichardpowell

Thursday, 28 November 13
Upcoming SlideShare
Loading in...5
×

D3 Rickshaw and Backbone in 50 minutes

1,291

Published on

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

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,291
On Slideshare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
10
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "D3 Rickshaw and Backbone in 50 minutes"

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

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

×