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

A scatter plot: one mark for each point, at the place of its x value and its
y value

`Expresso.Element.Chart` sends each function of a chart of the family
`:points` to this module: the check, the assigns, the layout, the marks and
the table. `docs/scatter-plots.md` gives the design.

The check puts the points into groups. Each group is an
`Expresso.Element.Series` with its points in `elements`, and it is a child
of the chart, so a group takes the steps of the overlay contract.

Each mark has its place in the channels of `Expresso.Element.Chart.Motion`:
`--x<n>` and `--y<n>` for point `n`, and `--r<n>` for its radius. The style
attribute of the mark reads the channels with the value of the first frame
as the fallback, so a chart of one frame needs no rule.

`Expresso.Element.Chart.Encoding` gives the symbol, the color and the size
of each mark, and `Expresso.Element.Chart.Scatter.Legend` draws the legends
at the right of the plot.

# `assigns`

```elixir
@spec assigns(Expresso.Element.Chart.t()) :: map()
```

Make the assigns of the render function from the struct

The key `groups` holds each group with its overlay attributes and its
points. Each point has its number `index`, from 1 in the order of the data.
The key `frames` holds the values of each point in each frame.

# `build`

```elixir
@spec build(Expresso.Element.Chart.t(), String.t(), String.t()) ::
  {:ok, Expresso.Element.Chart.t()} | {:error, String.t()}
```

Read the points of a scatter plot from the text of its CSV file, and check
them

`Expresso.Element.Chart.build/1` reads the file and calls this function.
`Expresso.Element.Chart.Scatter.Data` gives the rules of the columns. The
check of the points runs without the options of the file, and the chart
keeps them.

# `check`

```elixir
@spec check(Expresso.Element.Chart.t()) ::
  {:ok, Expresso.Element.Chart.t()} | {:error, String.t()}
```

Check the options and the points of a scatter plot, and put the points into
groups

`Expresso.Element.Chart.check/1` calls this function. Each category of the
color is one group, in the order of its first point. A point without a
category of the color goes into a group of such points.

# `grow?`

```elixir
@spec grow?(Expresso.Element.Chart.t()) :: boolean()
```

Tell whether a scatter plot has the effect `:grow` on the chart, on a group
or on a point

# `inner_block`
*macro* 

# `layout`

```elixir
@spec layout(map()) :: map()
```

Add the layout of a scatter plot to its assigns: the axes, the box of the
plot, and the functions `x` and `y` from a value to a coordinate

The axes hold the values of each frame, so a mark keeps its scale from one
frame to the next.

# `point_keys`

```elixir
@spec point_keys([Expresso.Element.Series.t()]) :: [
  {Expresso.Element.Point.t(), [String.t()]}
]
```

Return each point of the groups with its keys, in the order of the numbers
of the points

The keys are `p<n>` for point `n`, `c<n>` for category `n` of the color,
`s<n>` for category `n` of the symbol, and `g<n>` for series `n`. A group
of the `highlight` option names keys, and a mark with a `data-keys`
attribute that holds none of them dims.

# `render`

```elixir
@spec render(map()) :: Phoenix.HTML.safe()
```

Draw the content of the SVG of a scatter plot: the axes, the legends and
the marks

Inside a group, the larger marks come first, so a large mark does not hide
a small mark. The item of the legend of a category of the color goes into
the group of that category, so it shows and dims with its marks.

# `render_slot`
*macro* 

# `same?`

```elixir
@spec same?(map()) :: boolean()
```

Tell whether the symbol and the color of each point take the same category

Such a chart has one legend, with the symbol and the color of each
category.

# `scene`

```elixir
@spec scene(map()) :: %{
  marks: %{required(pos_integer()) =&gt; map()},
  channels: [{String.t(), [number()]}],
  labels: %{required(pos_integer()) =&gt; map()},
  trends: [map()]
}
```

Return the places of the marks of each frame, and the channels that hold them

# `table`

```elixir
@spec table(map()) :: %{headers: [String.t() | nil], rows: [[String.t()]]}
```

Return the headers and the rows of the table of a scatter plot

The table has one row for each point, with its name, its x value and its y
value, and its size in a chart with sizes. A chart with frames has these
columns for each frame, with the label of the frame. A chart with series,
or with a category of the symbol or of the color, has a column for each of
them. A symbol or a color that is not a category has no text.

---

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