🏠 back to Observable

Rationale behind viewBox settings on Chord Diagram

I am looking at the Chord Diagram example here:

and having trouble understanding the rationale behind setting the viewBox as it was set.

Can anyone shed some light on this please (maybe even @mike)?

The viewBox takes the form x y width height where x is the left edge and y is the top edge. Hence setting x = -width/2 and y = -height/2 places 0,0 at the center of the canvas. This is also the center point of circular arcs drawn by d3.arc, and hence this viewBox obviates the need for any additional transforms to center the diagram.

1 Like

Excellent, thank you!