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:
rho(datum, index, data_array)
controls the distance from the origin. The default is a constant value of 100. Providing a function of the datum can be used for example to create a radar chart.theta(datum, index, data_array)
controls the angle (in radians) assigned to each datum. The default is to compute it by multiplying the datum index by a value obtained by calling delta_theta
, then add a fixed value obtained by invoking the theta_0
function.delta_theta(datum, index, data_array)
controls the increment of theta (in radians) for each datum. The default is to evenly subdivide the circumference.theta_0(datum, index, data_array)
controls the initial offset of theta (in radians). The default is to rotate the layout in order to have the first datum facing north.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).
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js