# `Expresso.Element.Chart.Chord`
[🔗](https://github.com/rellen/expresso/blob/main/lib/expresso/element/chart/chord.ex#L1)

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:

1. Each node is an arc of a ring, from the top and clockwise, in the order
   of the data or the `order` of its node entity. The length of the arc is
   the sum of the flow out of the node and the flow into it.
2. 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.
3. 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.
4. 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.

# `chord`

```elixir
@spec chord({number(), number()}, {number(), number()}, map()) :: String.t()
```

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.

# `inner_block`
*macro* 

# `layout`

```elixir
@spec layout([[map()]], number(), map()) :: [%{arcs: [map()], chords: [map()]}]
```

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.

# `point`

```elixir
@spec point({number(), number()}, number(), number()) :: {float(), float()}
```

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}

# `render`

```elixir
@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.

# `render_slot`
*macro* 

---

*Consult [api-reference.md](api-reference.md) for complete listing*