Using variables from for loop into tags

Hi,

I’d like to do something like this linreg/lib/linreg_web/live/regression_live.html.leex at master · Tmw/linreg · GitHub but its syntax is deprecated in the latest Phoenix.

This:

<svg width="800" height="800">
    <%= for {x,y} <- @points do %>
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E" />
    <% end %>
</svg>

Simply gets me the following into the page source:

  <svg width="800" height="800">
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E"></circle>
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E"></circle>
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E"></circle>
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E"></circle>
      <circle cx="{x}" cy="{y}" r="15" fill="#24DA5E"></circle>
  </svg>

I’ve tried to use <%= x %> but Phoenix tells me to use {} instead. I’m not really sure how to get the framework to convert my x and y variables (they are floats) to their values.

Can anyone point me in the right direction?

For reference, this is the content of the points list of tuples before being passed to render:

[
  {10986.666666666666, -1606.2400000000002},
  {10213.333333333334, -1609.2800000000002},
  {18666.666666666664, -3199.44},
  {36533.33333333333, -7131.12},
  {56293.33333333333, -11265.36}
]