Draws a chord chart: the flows between the nodes of a graph, with the nodes on a ring
A chord chart takes the flows of a sankey, as flow entities, categories
and one series, or a CSV file. Use it for flows in the two directions
between the same nodes, such as the trade between countries. A sankey can
show these flows only with loops.
The layout has these rules:
- Each node is an arc of a ring, from the top and clockwise, in the order
of the data or the
orderof its node entity. The length of the arc is the sum of the flow out of the node and the flow into it. - One scale sets the angles in all the frames. Thus a smaller total in a later frame leaves an empty part at the end of the ring.
- A flow is a chord between the arcs of its two nodes. It has the width of its value at each end. Two quadratic Bézier curves join the two ends, with their control point at the center of the ring. At its source, a chord is in the part of the arc for the flows out. At its target, it is in the part for the flows in.
- A chord has the color of its source.
render/1 draws each series as a group with its chords. The arcs and their
labels show with the chart, so reveal true adds the chords of one source
at each step. Expresso.Element.Chart.Sankey.table/1 writes the table.
Summary
Functions
Return the shape of a chord between two spans of the inner edge of the ring
Place the arcs and the chords of each frame of a chord chart
Return the point at an angle and a radius from a center
Draw the arcs, the chords and the labels of a chord chart in its SVG
Functions
Return the shape of a chord between two spans of the inner edge of the ring
Each span is a pair of angles. The shape follows the first span, goes to the second span on a quadratic Bézier curve with its control point at the center, follows the second span, and goes back on a second curve.
Place the arcs and the chords of each frame of a chord chart
frames holds the links of each frame, with the value and the series of
each link. top is the top of the box, and settings holds the node
entities. The frames share the order and the colors of the nodes, and one
scale.
Return the point at an angle and a radius from a center
The angle 0 is at the top, and the angles go clockwise.
iex> Expresso.Element.Chart.Chord.point({100, 100}, 0, 50)
{100.0, 50.0}
iex> Expresso.Element.Chart.Chord.point({100, 100}, :math.pi() / 2, 50)
{150.0, 100.0}@spec render(map()) :: Phoenix.HTML.safe()
Draw the arcs, the chords and the labels of a chord chart in its SVG
The assigns are the assigns of Expresso.Element.Chart. A chart with
frames has one layer for each frame, as a sankey has.