• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Data Visualisation with D3 & Rickshaw - Berlin Expert Days
 

Data Visualisation with D3 & Rickshaw - Berlin Expert Days

on

  • 849 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
849
Views on SlideShare
829
Embed Views
20

Actions

Likes
2
Downloads
6
Comments
0

2 Embeds 20

https://twitter.com 12
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