graph layout — 3 Technical Articles

Aug 25, 2022 · Frontend Development

How to Build a Force-Directed Graph with D3.js: From Theory to Code

This article explains the fundamentals of D3.js force-directed graph layouts, covering the underlying physics-inspired algorithms, node initialization, quad-tree collision detection, Barnes-Hut optimization, link forces, and simulation steps, and provides practical code examples and tips for handling common rendering issues.

Barnes-HutD3.jsJavaScript

0 likes · 16 min read

How to Build a Force-Directed Graph with D3.js: From Theory to Code

TikTok Frontend Technology Team

Oct 22, 2021 · Fundamentals

Understanding DAG Basics and the Dagre Layout Algorithm with Perfect-Process

This article introduces the fundamentals of directed acyclic graphs (DAGs), explains adjacency representations, details the Dagre layout algorithm’s concepts, computation steps, and constraints, and presents the Perfect‑Process front‑end library that implements these techniques for interactive pipeline diagram rendering and editing.

DAGFrontendVisualization

0 likes · 13 min read

Understanding DAG Basics and the Dagre Layout Algorithm with Perfect-Process

ELab Team

Jul 22, 2021 · Fundamentals

Mastering Hierarchical Graph Layout: A Deep Dive into Sugiyama’s Algorithm

This article explains the principles, steps, and various algorithms behind hierarchical (Sugiyama) graph layout, covering node layering, crossing reduction, coordinate computation, drawing, and practical implementation details with JavaScript libraries such as dagre and d3‑dag.

DAGSugiyama algorithmVisualization

0 likes · 16 min read

Mastering Hierarchical Graph Layout: A Deep Dive into Sugiyama’s Algorithm