Visualizing cloud architectures in real time with d3.js
summary
Shows a working microservice-architecture frontend built with d3.js visualization code on GitHub tied to standardized health checks, with live animation and a demo that dies midstream — candid lessons on keys, enter/update/exit, and when web Cola and other force engines force full re-renders. Gives concrete failure impact (99% availability → days down, 5 nines → minutes; one real company costed €6.5M/day). Worth watching for the build details and integration gotchas, not high‑level slides.
AI-written summary · about
chapters (23)
- 0:00Intro
- 1:13Decouple Frontends!
- 1:25Backends for Frontends (BFF)
- 1:57Microservices from 10,000 feet
- 2:42Microservices from the ground
- 2:59Challenges of Microservices
- 3:52Availability: even the Cloud goes down
- 4:34From Microservices to Spaghetti?
- 5:16Traditional Architecture Diagrams
- 5:55Diagramming with Code
- 7:10Monitoring Microservices in real-time?
- 8:02Reality - many chaotic teams, but diverse
- 9:47Aproach
- 10:44IETF: Standardized Health Check Format
- 11:42illustrating Dependencies - Visually
- 12:42D3 - Data Driven Documents
- 12:59Example Data
- 13:35Pattern Example - Nodes
- 13:53General Update Pattern - newer Syntax
- 14:20Links, Key Functions
- 15:00Layout Engine - D3 Force
- 15:12Layout Engine - Webcola
- 15:29Our Diagram
related talks
47mDeprecating Simplicity 3.0
15mThe Future of Data Visualization on the Web
43mThe Future of Data Visualization on the Web
21mData Visualizations with React + D3
50mEverything That Could Go Wrong, Has Gone Wrong with D3 and Graphs
01h 07mVisualizing Connections
28mBuilding apps with D3.js
30mVisualization Driven Development