Starter · Animated flow
처리량 — · 병목 — · 최장 경로 —
선이 정지해 있으면 어디로 얼마나 흐르는지 보이지 않는다. 경로를 따라 흐르는 빛줄기가 방향을, 굵기가 양을, 색이 병목을 말한다. 라이브러리 없이 SVG 경로와 stroke-dashoffset 하나로 만든다.
간선의 굵기는 그 구간을 지나는 건수에 비례한다. 색이 아니라 굵기가 양을 말하므로 흑백 인쇄에서도 읽힌다.
들어온 양보다 나간 양이 뚜렷이 적은 구간 하나만 다른 색을 쓴다. 여러 곳을 칠하면 어디가 문제인지 다시 사라진다.
수치는 이 스타터를 실행 가능하게 만들기 위한 결정론적 예시다. 빛줄기의 속도는 일정하며 처리 속도를 뜻하지 않는다.