# Scatter Chart

A scatter chart for the relationship between two variables.

Ships in the separate, optional poetry-charts gem.

## Default

```erb
<% data = [
     { height: 161, weight: 51 },
     { height: 167, weight: 59 },
     { height: 170, weight: 68 },
     { height: 174, weight: 66 },
     { height: 178, weight: 79 },
     { height: 183, weight: 84 },
     { height: 189, weight: 95 }
   ]
   config = { sample: { label: "Sample", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:scatter, data: data, config: config, id: "scatter-default",
                   margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :height, name: "Height") %>
    <% chart.with_y_axis(data_key: :weight, name: "Weight") %>
    <% chart.with_scatter(key: :sample) %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Bubbles

```erb
<%# with_z_axis sizes each point by a third dimension - the range is
    marker AREA in px2 (recharts ZAxis semantics; r = sqrt(area/pi)). %>
<% data = [
     { height: 161, weight: 51, bmi: 19.7 },
     { height: 167, weight: 59, bmi: 21.2 },
     { height: 170, weight: 68, bmi: 23.5 },
     { height: 174, weight: 66, bmi: 21.8 },
     { height: 178, weight: 79, bmi: 24.9 },
     { height: 183, weight: 84, bmi: 25.1 },
     { height: 189, weight: 95, bmi: 26.6 }
   ]
   config = { sample: { label: "Sample", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:scatter, data: data, config: config, id: "scatter-bubbles",
                   margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :height, name: "Height") %>
    <% chart.with_y_axis(data_key: :weight, name: "Weight") %>
    <% chart.with_z_axis(data_key: :bmi, range: [64, 400]) %>
    <% chart.with_scatter(key: :sample) %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Multiple

```erb
<%# Each with_scatter series can bring its own rows via data: - the
    control group plots alongside the chart-level sample rows. %>
<% sample = [
     { height: 161, weight: 51 },
     { height: 167, weight: 59 },
     { height: 170, weight: 68 },
     { height: 174, weight: 66 },
     { height: 178, weight: 79 },
     { height: 183, weight: 84 },
     { height: 189, weight: 95 }
   ]
   control = [
     { height: 158, weight: 62 },
     { height: 165, weight: 71 },
     { height: 172, weight: 60 },
     { height: 180, weight: 88 },
     { height: 186, weight: 77 }
   ]
   config = { sample: { label: "Sample", color: "var(--chart-1)" },
              control: { label: "Control", color: "var(--chart-2)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:scatter, data: sample, config: config, id: "scatter-multiple",
                   margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :height, name: "Height") %>
    <% chart.with_y_axis(data_key: :weight, name: "Weight") %>
    <% chart.with_scatter(key: :sample) %>
    <% chart.with_scatter(key: :control, data: control) %>
    <% chart.with_legend %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```

## Reference zones

```erb
<%# Reference marks annotate the plot area; error_key: names a row key
    holding a symmetric offset (or [low, high]) drawn as a whisker. %>
<% data = [
     { height: 161, weight: 51, werr: 3 },
     { height: 167, weight: 59, werr: 4 },
     { height: 170, weight: 68, werr: 5 },
     { height: 174, weight: 66, werr: 4 },
     { height: 178, weight: 79, werr: 6 },
     { height: 183, weight: 84, werr: 5 },
     { height: 189, weight: 95, werr: 7 }
   ]
   config = { sample: { label: "Sample", color: "var(--chart-1)" } } %>
<div class="w-full max-w-xl">
  <%= poetry_chart(:scatter, data: data, config: config, id: "scatter-refs",
                   margin: { left: 12, right: 12 }) do |chart| %>
    <% chart.with_grid %>
    <% chart.with_x_axis(data_key: :height, name: "Height") %>
    <% chart.with_y_axis(data_key: :weight, name: "Weight") %>
    <% chart.with_scatter(key: :sample, error_key: :werr) %>
    <% chart.with_reference_area(y1: 60, y2: 80, label: "target band") %>
    <% chart.with_reference_line(x: 175) %>
    <% chart.with_reference_dot(x: 172, y: 70, r: 10, label: "median") %>
    <% chart.with_tooltip %>
  <% end %>
</div>
```