block by nitaku a161bdb59b9dcec9a32e

Node-link polar layout

Full Screen

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).

index.js

index.html

index.coffee

index.css