D3 + Websocket for Live Web Applications
summary
Combines D3 data binding with a Cowboy websocket + MessagePack stream to build a live monitoring UI called shaman fed by an event probe library alien; current demo shows an auto-updating process list and small reduction-per-second graph and requires almost no handwritten JS thanks to HTML data-name bindings. Events arrive as framed lists, client performs delta calculations and keeps 60-s arrays for graphs. Prototype works locally; goal is distributed collection from thousands of nodes, no disk persistence yet. client-side delta calc
AI-written summary · about
chapters (12)
- 0:00Introduction to the project
- 1:02Project goals and design
- 4:04Alien and event handling
- 5:58Shaman UI and data flow
- 9:22Using D3 for visualization
- 14:04Implementing D3 selections
- 20:14Websocket communication
- 24:44Dynamic UI generation
- 30:41Client-side calculations
- 34:42Managing complex displays
- 39:14Visualization and graphs
- 41:28Future work and conclusion
related talks
28mBuilding apps with D3.js
44mAdvanced JavaScript Techniques
51mD3 js: Easy and flexible data visualisation using Web standards
32mD3 and React, Together
47mUsing Julia & D3 to analyse web performance data
55mLiveViewJS is the anti-SPA library for reactive app development in NodeJS and Deno
57m🚨 Live On the Edge 🚨
41mModel-View-Websockets