All examples By author By category About

nitaku

Node-link polar layout

This example shows a simple circular layout for representing graphs using a node-link diagram. Link thickness is determined by a weight attribute.

This specific layout is an instance of a more generic polar layout, implemented in a way that's similar to other d3 layouts, using the approach introduced by Mike Bostock for reusable charts (you can read about it in this page).

To define a new polar layout function, just call polar_layout, then optionally provide more parametrs by method chaining:

circular = polar_layout()
    .rho(200)

By passing data into the layout (by calling circular(data_array)), each datum is assigned a position on the plane. x and y properties will be set for each datum, as well as rho and theta (same as x and y, but in polar coordinates). If no other configuration is provided, each datum will be displaced along a circumference at constant angle distance from each other (as in this very example).

This standard behavior of the layout can be customized by overriding its defaults, either by providing constant values or functions of data to the methods in the chain:

The use of this layout is of course not limited to the visualization of node-link diagrams. For example, it can be used to create regular polygons (or randomly irregular, roundish polygons like these ones), or to simply displace elements on a regular polygon's vertices (like in this example).