際際滷

際際滷Share a Scribd company logo
A Story
Pedro
Our Ops Engineer
!
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time Series Graphs!
Solve Problems
1.
2.
3.
4.

D3!
Rickshaw!
Rickshaw ++!
The BIG Lesson!
D3
bl.ocks.org/mbostock/4060606
color.method.ac/
http://hughsk.io/colony/
bl.ocks.org/mbostock/4063318
http://bl.ocks.org/mbostock/4063582
Data Visualisation !
is in D3s DNA
http://bost.ocks.org/mike/nations/
alignedleft.com/tutorials/d3/making-a-bar-chart
Time-Series Monitoring Graphs with D3 & Rickshaw
Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
code.shutterstock.com/rickshaw/examples
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Above all else show the data
Edward Rolf Tufte, 1983
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Rickshaw
++
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
A tick every 2 minutes
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
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
THE LESSON

!
Time-Series Monitoring Graphs with D3 & Rickshaw
A state of joy, creativity !
and total involvement !
in which problems !
seem to disappear
Mihaly Csikszentmihalyi
1.
2.
3.
4.
5.

Intuitive interfaces!
Forgiving work鍖ows!
Attractive designs!
Personality!
And avoiding
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
Time-Series Monitoring Graphs with D3 & Rickshaw
1.
2.
3.
4.

Missing X & Y Data!
Missing Series Names!
Badly ordered dates!
Data Smoothing
Design for failure
Data is unpredictable
it shouldnt happen will happen
Monitor servers & websites
Con鍖gure Alerts
Manage your infrastructure
blog.serverdensity.com
@serverdensity
@byrichardpowell

More Related Content

More from Richard Powell (6)

D3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutesD3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutes
Richard Powell
Real-time collaborative drawing
Real-time collaborative drawingReal-time collaborative drawing
Real-time collaborative drawing
Richard Powell
Front end-performance
Front end-performanceFront end-performance
Front end-performance
Richard Powell
Angular.js, Yeomon & Grunt
Angular.js, Yeomon & GruntAngular.js, Yeomon & Grunt
Angular.js, Yeomon & Grunt
Richard Powell
Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
Richard Powell
HTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, NewcastleHTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, Newcastle
Richard Powell
D3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutesD3 Rickshaw and Backbone in 50 minutes
D3 Rickshaw and Backbone in 50 minutes
Richard Powell
Real-time collaborative drawing
Real-time collaborative drawingReal-time collaborative drawing
Real-time collaborative drawing
Richard Powell
Front end-performance
Front end-performanceFront end-performance
Front end-performance
Richard Powell
Angular.js, Yeomon & Grunt
Angular.js, Yeomon & GruntAngular.js, Yeomon & Grunt
Angular.js, Yeomon & Grunt
Richard Powell
Draw stuff at @jsnortheast
Draw stuff at @jsnortheastDraw stuff at @jsnortheast
Draw stuff at @jsnortheast
Richard Powell
HTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, NewcastleHTML5 Canvas @SuperMondays, Newcastle
HTML5 Canvas @SuperMondays, Newcastle
Richard Powell

Recently uploaded (20)

Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Jonathan Bowen
L01 Introduction to Nanoindentation - What is hardness
L01 Introduction to Nanoindentation - What is hardnessL01 Introduction to Nanoindentation - What is hardness
L01 Introduction to Nanoindentation - What is hardness
RostislavDaniel
DealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures CapitalDealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures Capital
Yevgen Sysoyev
Computational Photography: How Technology is Changing Way We Capture the World
Computational Photography: How Technology is Changing Way We Capture the WorldComputational Photography: How Technology is Changing Way We Capture the World
Computational Photography: How Technology is Changing Way We Capture the World
HusseinMalikMammadli
EaseUS Partition Master Crack 2025 + Serial Key
EaseUS Partition Master Crack 2025 + Serial KeyEaseUS Partition Master Crack 2025 + Serial Key
EaseUS Partition Master Crack 2025 + Serial Key
kherorpacca127
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOTSMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
TanmaiArni
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
ScyllaDB
MIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND CTI
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarterQ4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
MariaBarbaraPaglinaw
UiPath Automation Developer Associate Training Series 2025 - Session 2
UiPath Automation Developer Associate Training Series 2025 - Session 2UiPath Automation Developer Associate Training Series 2025 - Session 2
UiPath Automation Developer Associate Training Series 2025 - Session 2
DianaGray10
Both Feet on the Ground - Generative Artificial Intelligence
Both Feet on the Ground - Generative Artificial IntelligenceBoth Feet on the Ground - Generative Artificial Intelligence
Both Feet on the Ground - Generative Artificial Intelligence
Pete Nieminen
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog GavraReplacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
ScyllaDB
The Future of Repair: Transparent and Incremental by Botond Denes
The Future of Repair: Transparent and Incremental by Botond DenesThe Future of Repair: Transparent and Incremental by Botond Denes
The Future of Repair: Transparent and Incremental by Botond Denes
ScyllaDB
UiPath Agentic Automation Capabilities and Opportunities
UiPath Agentic Automation Capabilities and OpportunitiesUiPath Agentic Automation Capabilities and Opportunities
UiPath Agentic Automation Capabilities and Opportunities
DianaGray10
Unlocking DevOps Secuirty :Vault & Keylock
Unlocking DevOps Secuirty :Vault & KeylockUnlocking DevOps Secuirty :Vault & Keylock
Unlocking DevOps Secuirty :Vault & Keylock
HusseinMalikMammadli
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
Safe Software
UiPath Document Understanding - Generative AI and Active learning capabilities
UiPath Document Understanding - Generative AI and Active learning capabilitiesUiPath Document Understanding - Generative AI and Active learning capabilities
UiPath Document Understanding - Generative AI and Active learning capabilities
DianaGray10
What Makes "Deep Research"? A Dive into AI Agents
What Makes "Deep Research"? A Dive into AI AgentsWhat Makes "Deep Research"? A Dive into AI Agents
What Makes "Deep Research"? A Dive into AI Agents
Zilliz
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajInside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
ScyllaDB
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramentoAIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
Alessandro Bogliolo
Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Formal Methods: Whence and Whither? [Martin Fr辰nzle Festkolloquium, 2025]
Jonathan Bowen
L01 Introduction to Nanoindentation - What is hardness
L01 Introduction to Nanoindentation - What is hardnessL01 Introduction to Nanoindentation - What is hardness
L01 Introduction to Nanoindentation - What is hardness
RostislavDaniel
DealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures CapitalDealBook of Ukraine: 2025 edition | AVentures Capital
DealBook of Ukraine: 2025 edition | AVentures Capital
Yevgen Sysoyev
Computational Photography: How Technology is Changing Way We Capture the World
Computational Photography: How Technology is Changing Way We Capture the WorldComputational Photography: How Technology is Changing Way We Capture the World
Computational Photography: How Technology is Changing Way We Capture the World
HusseinMalikMammadli
EaseUS Partition Master Crack 2025 + Serial Key
EaseUS Partition Master Crack 2025 + Serial KeyEaseUS Partition Master Crack 2025 + Serial Key
EaseUS Partition Master Crack 2025 + Serial Key
kherorpacca127
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOTSMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
SMART SENTRY CYBER THREAT INTELLIGENCE IN IIOT
TanmaiArni
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
30B Images and Counting: Scaling Canva's Content-Understanding Pipelines by K...
ScyllaDB
MIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND Revenue Release Quarter 4 2024 - Finacial PresentationMIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND Revenue Release Quarter 4 2024 - Finacial Presentation
MIND CTI
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarterQ4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
Q4_TLE-7-Lesson-6-Week-6.pptx 4th quarter
MariaBarbaraPaglinaw
UiPath Automation Developer Associate Training Series 2025 - Session 2
UiPath Automation Developer Associate Training Series 2025 - Session 2UiPath Automation Developer Associate Training Series 2025 - Session 2
UiPath Automation Developer Associate Training Series 2025 - Session 2
DianaGray10
Both Feet on the Ground - Generative Artificial Intelligence
Both Feet on the Ground - Generative Artificial IntelligenceBoth Feet on the Ground - Generative Artificial Intelligence
Both Feet on the Ground - Generative Artificial Intelligence
Pete Nieminen
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog GavraReplacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
Replacing RocksDB with ScyllaDB in Kafka Streams by Almog Gavra
ScyllaDB
The Future of Repair: Transparent and Incremental by Botond Denes
The Future of Repair: Transparent and Incremental by Botond DenesThe Future of Repair: Transparent and Incremental by Botond Denes
The Future of Repair: Transparent and Incremental by Botond Denes
ScyllaDB
UiPath Agentic Automation Capabilities and Opportunities
UiPath Agentic Automation Capabilities and OpportunitiesUiPath Agentic Automation Capabilities and Opportunities
UiPath Agentic Automation Capabilities and Opportunities
DianaGray10
Unlocking DevOps Secuirty :Vault & Keylock
Unlocking DevOps Secuirty :Vault & KeylockUnlocking DevOps Secuirty :Vault & Keylock
Unlocking DevOps Secuirty :Vault & Keylock
HusseinMalikMammadli
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
[Webinar] Scaling Made Simple: Getting Started with No-Code Web Apps
Safe Software
UiPath Document Understanding - Generative AI and Active learning capabilities
UiPath Document Understanding - Generative AI and Active learning capabilitiesUiPath Document Understanding - Generative AI and Active learning capabilities
UiPath Document Understanding - Generative AI and Active learning capabilities
DianaGray10
What Makes "Deep Research"? A Dive into AI Agents
What Makes "Deep Research"? A Dive into AI AgentsWhat Makes "Deep Research"? A Dive into AI Agents
What Makes "Deep Research"? A Dive into AI Agents
Zilliz
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar PatturajInside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
Inside Freshworks' Migration from Cassandra to ScyllaDB by Premkumar Patturaj
ScyllaDB
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramentoAIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
AIXMOOC 2.3 - Modelli di reti neurali con esperimenti di addestramento
Alessandro Bogliolo

Time-Series Monitoring Graphs with D3 & Rickshaw