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

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

on

  • 1,004 views

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.

Statistics

Views

Total Views
1,004
Views on SlideShare
982
Embed Views
22

Actions

Likes
2
Downloads
10
Comments
0

2 Embeds 22

https://twitter.com 14
http://www.slideee.com 8

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

Data Visualisation with D3 & Rickshaw - Berlin Expert Days Data Visualisation with D3 & Rickshaw - Berlin Expert Days Presentation Transcript

  • @serverdensity @byrichardpowell
  • Monitor your infrastructure
  • Monitor your services
  • 30 TB of data per month! 2 billion documents a day http://bit.ly/30TB-pm
  • A Story
  • Pedro Our Ops Engineer
  • !
  • ☀ Time Series Graphs! Solve Problems
  • 1. D3! 2. Rickshaw! 3. Rickshaw ++! 4. The BIG Lesson!
  • D3
  • Getting Started
  • javascript
  • javascript
  • javascript
  • Data Visualisation ! is in D3’s DNA
  • bl.ocks.org/mbostock/4060606
  • color.method.ac/
  • bl.ocks.org/mbostock/4063318
  • http://bl.ocks.org/mbostock/4063582
  • http://hughsk.io/colony/
  • javascript
  • javascript
  • jsbin.com/golafiye/1/edit? html,js,output
  • https://github.com/mbostock/d3/wiki/Layouts Layouts
  • alignedleft.com/tutorials/d3/! ! github.com/mbostock/d3/wiki/Gallery! ! github.com/mbostock/d3/wiki/Tutorials! ! @mbostock
  • Rickshaw
  • code.shutterstock.com/rickshaw/examples
  • javascript
  • svg
  • “Above all else ! show the data” Edward Rolf Tufte, 1983
  • bit.ly/183R6sT
  • javascript
  • javascript
  • javascript
  • ++ Rickshaw
  • javascript
  • javascript
  • A tick every 2 hours
  • 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
  • javascript
  • javascript
  • ☺! THE LESSON
  • “A state of joy, creativity ! and total involvement ! in which problems ! seem to disappear” Mihaly Csikszentmihalyi
  • 1. Intuitive interfaces! 2. Forgiving workflows! 3. Attractive designs! 4. Personality! 5. And avoiding…
  • Flexible Data. Sigh.
  • javascript
  • javascript
  • javascript
  • coffeescript
  • coffeescript
  • Jaggedy Data
  • coffeescript
  • 1. Missing X & Y Data! 2. Badly ordered dates! 3. Duplicate X Values! 4. X Values too close! 5. Missing Series Names
  • Unpredictable Data?
  • @serverdensity @byrichardpowell Monitor servers & websites Configure Alerts Manage your infrastructure