Data Visualisation with D3 & Rickshaw - Berlin Expert Days
-
Upload
richard-powell -
Category
Data & Analytics
-
view
934 -
download
1
description
Transcript of Data Visualisation with D3 & Rickshaw - Berlin Expert Days
![Page 1: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/1.jpg)
@serverdensity @byrichardpowell
![Page 2: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/2.jpg)
Monitor your infrastructure
![Page 3: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/3.jpg)
Monitor your services
![Page 4: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/4.jpg)
![Page 5: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/5.jpg)
30 TB of data per month!2 billion documents a day
http://bit.ly/30TB-pm
![Page 6: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/6.jpg)
A Story
![Page 7: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/7.jpg)
PedroOur Ops Engineer
![Page 8: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/8.jpg)
!
![Page 9: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/9.jpg)
![Page 10: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/10.jpg)
![Page 11: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/11.jpg)
![Page 12: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/12.jpg)
☀Time Series Graphs!
Solve Problems
![Page 13: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/13.jpg)
1. D3!2. Rickshaw!3. Rickshaw ++!4. The BIG Lesson!
![Page 14: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/14.jpg)
❣D3
![Page 15: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/15.jpg)
Getting Started
![Page 16: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/16.jpg)
javascript
![Page 17: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/17.jpg)
javascript
![Page 18: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/18.jpg)
javascript
![Page 19: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/19.jpg)
Data Visualisation !is in D3’s DNA
![Page 20: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/20.jpg)
bl.ocks.org/mbostock/4060606
![Page 21: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/21.jpg)
color.method.ac/
![Page 22: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/22.jpg)
bl.ocks.org/mbostock/4063318
![Page 23: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/23.jpg)
http://bl.ocks.org/mbostock/4063582
![Page 24: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/24.jpg)
http://hughsk.io/colony/
![Page 25: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/25.jpg)
![Page 26: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/26.jpg)
javascript
![Page 27: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/27.jpg)
javascript
![Page 29: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/29.jpg)
https://github.com/mbostock/d3/wiki/LayoutsLayouts
![Page 30: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/30.jpg)
alignedleft.com/tutorials/d3/!!github.com/mbostock/d3/wiki/Gallery!!github.com/mbostock/d3/wiki/Tutorials!!@mbostock
![Page 31: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/31.jpg)
❣Rickshaw
![Page 32: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/32.jpg)
![Page 33: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/33.jpg)
code.shutterstock.com/rickshaw/examples
![Page 34: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/34.jpg)
javascript
![Page 35: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/35.jpg)
svg
![Page 36: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/36.jpg)
“Above all else !show the data”
Edward Rolf Tufte, 1983
![Page 37: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/37.jpg)
bit.ly/183R6sT
![Page 38: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/38.jpg)
javascript
![Page 39: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/39.jpg)
![Page 40: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/40.jpg)
javascript
![Page 41: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/41.jpg)
javascript
![Page 42: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/42.jpg)
❣++Rickshaw
![Page 43: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/43.jpg)
![Page 44: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/44.jpg)
javascript
![Page 45: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/45.jpg)
javascript
![Page 46: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/46.jpg)
A tick every 2 hours
![Page 47: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/47.jpg)
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
![Page 48: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/48.jpg)
javascript
![Page 49: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/49.jpg)
javascript
![Page 50: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/50.jpg)
![Page 51: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/51.jpg)
![Page 52: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/52.jpg)
![Page 53: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/53.jpg)
☺!THE LESSON
![Page 54: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/54.jpg)
![Page 55: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/55.jpg)
“A state of joy, creativity !and total involvement !
in which problems !seem to disappear”
Mihaly Csikszentmihalyi
![Page 56: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/56.jpg)
1. Intuitive interfaces!2. Forgiving workflows!3. Attractive designs!4. Personality!5. And avoiding…
![Page 57: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/57.jpg)
![Page 58: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/58.jpg)
Flexible Data. Sigh.
![Page 59: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/59.jpg)
javascript
![Page 60: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/60.jpg)
javascript
![Page 61: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/61.jpg)
javascript
![Page 62: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/62.jpg)
![Page 63: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/63.jpg)
coffeescript
![Page 64: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/64.jpg)
coffeescript
![Page 65: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/65.jpg)
Jaggedy Data
![Page 66: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/66.jpg)
coffeescript
![Page 67: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/67.jpg)
1. Missing X & Y Data!2. Badly ordered dates!3. Duplicate X Values!4. X Values too close!5. Missing Series Names
![Page 68: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/68.jpg)
Unpredictable Data?
![Page 69: Data Visualisation with D3 & Rickshaw - Berlin Expert Days](https://reader033.fdocuments.net/reader033/viewer/2022061102/53eda8198d7f7289708b5de1/html5/thumbnails/69.jpg)
@serverdensity @byrichardpowell
Monitor servers & websites Configure Alerts Manage your infrastructure