두 개 이상의 점이 있을때 각각의 점마다 서로 다른 각각의 점에 대해서 2등분한 거리(델러네이 포인트)를 변으로 삼아 도형으로 그려낸 것. 따라서 항상 균일하게 점과 점 사이의 거리를 구할 수 있다.
설명 https://slides.com/ourlanguagevideo/voronoi-explain
보로노이 예제: https://codepen.io/rabelais88/pen/XQqmqX
https://github.com/d3/d3-delaunay ‑ Connect your account to preview links
최근 사용되는 차트 다이어그램에서의 마우스 오버는 오브젝트에 직접 호버효과를 걸지 않고 대부분 보로노이로 구현하고 있다. 자료가 특정 좌표에 몰려있을 경우 사용자 역시 필요한 자료를 찾아보려면 정확하게 픽셀 단위로 자료를 선택해야 하는데, 보로노이를 사용할 경우 대략 제일 가까운 도형에 닿기만 하면 되기 때문이다. 또한 자료가 몰려있는 좌표에서 호버 지점을 넓게 잡아서 인터랙션 지점이 다른 포인트와 겹치더라도 문제가 없다.
보로노이를 사용하지 않은 일반 차트 https://codepen.io/rabelais88/pen/vMRBxK
보로노이 차트 https://observablehq.com/@rabelais/plain-2d-line-chart-with-delaunay-voronoi-hover
현재 인터넷 상에는 d3 v4기준 예제만 있기 때문에 최신 버전인 v5사양에 맞추고, 곧 deprecate될 d3.voronoi 대신 d3.delaunay.voronoi를 사용했다.