Rendering Graphs Your Way: The Case for Going Custom

on YouTube ↗29m

" summary

A custom graph renderer is engineered from scratch using WebGL rendering (optionally WebAssembly), an event-driven core, web workers and Graphology for the graph model, with GPU-friendly buffers, SDF text glyphs, and quadtree spatial index (or KD-tree) for 10k+ node hit testing. Layouts run on the GPU or workers as GPU-accelerated force layout or multilevel approaches, and the team achieves ~13,000 nodes laid out in under 5 seconds while keeping interactive animations and camera updates.

AI-written summary · about

" chapters (11)

1. 0:00Introduction to custom graph visualization
2. 1:14Business case for custom rendering
3. 8:18Hiring the right developers
4. 11:33Architecture and event-based design
5. 13:21Graph and rendering modules
6. 16:18WebGL rendering pipeline
7. 18:49Text rendering challenges
8. 20:57Interaction and collision detection
9. 22:18Layout algorithms and challenges
10. 27:16Animation and grouping modules
11. 28:40Summary and Q&A

" related talks

• 37mOriginal graphics libraries powering web datavizAlexis Jacomy · DevFest Nantes 2017
• 40mVisualizing Large Datasets with JavaScript Using Deck.glMarko Letic · code.talks 2019
• 58mRendering performance from the ground upMartin Splitt · HolyJS 2017 Piter
• 35mVisualizations using SVG, Canvas, and WebGL in VueChris Fritz · Framework Summit 2018
• 34mNext-Generation 3D Graphics on the WebRicardo Cabello, Corentin Wallez · Google I/O 2019
• 42mRendering performance from the ground upMartin Splitt · Full Stack Fest 2017
• 01h 08mThe quest for the graphical webVincent Hardy · Meta Refresh 2013
• 28mTurbo charging 2D on the webMat Groves · JSNation 2019