# Connect points in for loop

**URL:** <https://discourse.julialang.org/t/connect-points-in-for-loop/113429>\
**Category:** Visualization\
**Tags:** question, plotting, plotlyjs\
**Created:** [April 24, 2024, 9:21am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429 "2024-04-24T09:21:20Z")\
**Posts on this page:** 16\
**Page:** 1

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 24, 2024, 9:21am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/1 "2024-04-24T09:21:20Z")

</div>

Dear all

I am using PlotlyJS (I need its interactivity)

it is my code:

```julia
k1 = equ1
k2 = equ2
k3 = equ3
k4 = equ4

push!(k1_x, real(k1))
push!(k1_y, imag(k1))
push!(k2_x, real(k2))
push!(k2_y, imag(k2))
push!(k3_x, real(k3))
push!(k3_y, imag(k3))
push!(k4_x, real(k4))
push!(k4_y, imag(k4))
end

# Connect the four points to form a rectangle
push!(k1_x, k3_x[end])
push!(k1_y, k3_y[end])
push!(k2_x, k4_x[end])
push!(k2_y, k4_y[end])

trace1 = scatter(; x = k1_x, y = k1_y,
mode = "markers", name = "", line_color = "blue", line_width = 1.5)
trace2 = scatter(; x = k3_x, y = k3_y,
mode = "markers", name = "", line_color = "red", line_width = 1.5)
trace3 = scatter(; x = k2_x, y = k2_y,
mode = "markers", name = "", line_color = "green", line_width = 1.5)
trace4 = scatter(; x = k4_x, y = k4_y,
mode = "markers", name = "", line_color = "magenta", line_width = 1.5)

layout = Layout(; title = "Kharitonov Rectangles",
xaxis_title = "Real",
yaxis_title = "Imaginary",
showlegend = false)

plot([trace1, trace2, trace3, trace4], layout)
end

rectangles()

```

 ![Screenshot 0006-04-24 at 18.21.03](https://global.discourse-cdn.com/julialang/original/3X/b/0/b0666c3f4b9feb8fcd705606e7ead44121cdeafd.png)

I want to connect red point to green with a line, green to pink, pink to blue and blue to red (create a square), but I tried several method which was not worked, I do not want to connect all reds point to gather in different frequencies and same for other points, I want to make an individual square in each frequency,

your help will be appreciated.

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 24, 2024, 10:25am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/2 "2024-04-24T10:25:32Z")

</div>

Are all of these lines of the same style and color?

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 24, 2024, 10:26am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/3 "2024-04-24T10:26:42Z")

</div>

yes, in fact size and color is not important to be different, could be same

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 24, 2024, 11:39am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/4 "2024-04-24T11:39:01Z")

</div>

Would something like this work for you?

```julia
# ...
Lx = [k1_x k3_x k4_x k2_x k1_x fill!(similar(k1_x), NaN)] |> transpose |> vec
Ly = [k1_y k3_y k4_y k2_y k1_x fill!(similar(k1_x), NaN)] |> transpose |> vec
squares = scatter(; x = Lx, y = Ly, mode="lines")
#...
plot([trace1, trace2, trace3, trace4, squares], layout)
# ...

```

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 24, 2024, 11:47am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/5 "2024-04-24T11:47:31Z")

</div>

thank you for your comment, I implement it as:

```julia
trace1 = scatter(; x = k1_x, y = k1_y,
mode = "markers", name = "", line_color = "blue", line_width = 1.5)
trace2 = scatter(; x = k3_x, y = k3_y,
mode = "markers", name = "", line_color = "red", line_width = 1.5)
trace3 = scatter(; x = k2_x, y = k2_y,
mode = "markers", name = "", line_color = "green", line_width = 1.5)
trace4 = scatter(; x = k4_x, y = k4_y,
mode = "markers", name = "", line_color = "magenta", line_width = 1.5)

Lx = [k1_x k3_x k2_x k4_x fill!(similar(k1_x), NaN)] |> transpose |> vec
Ly = [k1_y k3_y k2_y k4_y fill!(similar(k1_x), NaN)] |> transpose |> vec
squares = scatter(; x = Lx, y = Ly, mode="lines") 

layout = Layout(; title = "Kharitonov Rectangles",
xaxis_title = "Real",
yaxis_title = "Imaginary",
showlegend = false)

plot([trace1, trace2, trace3, trace4, squares], layout)
end

rectangles()

```

is it okay?

I recived following err:

```julia
ERROR: DimensionMismatch: vectors must have same lengths
Stacktrace:
 [1] hcat
   @ ./array.jl:2024 [inlined]
 [2] rectangles()
   @ Main ~/my_project_02/parameters_05:74
 [3] top-level scope
   @ ~/my_project_02/parameters_05:86

```

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 24, 2024, 11:48am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/6 "2024-04-24T11:48:42Z")

</div>

The lengths of `k1_x` through`k4_x` must be the same. If some of them are longer you should truncate them to be the same.

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 24, 2024, 11:49am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/7 "2024-04-24T11:49:20Z")

</div>

Here’s a self-contained demonstration.

```julia
julia> using PlotlyJS

julia> begin
           x = 0:0.025:1
           f(x) = x/(1+x)
           k1_x = x
           k1_y = f.(x)
           k2_x = x .+ 0.05
           k2_y = f.(x)
           k3_x = x
           k3_y = f.(x) .- 0.05
           k4_x = x .+ 0.05
           k4_y = f.(x) .- 0.05
           trace1 = scatter(; x = k1_x, y = k1_y, mode="markers")
           trace2 = scatter(; x = k2_x, y = k2_y, mode="markers")
           trace3 = scatter(; x = k3_x, y = k3_y, mode="markers")
           trace4 = scatter(; x = k4_x, y = k4_y, mode="markers")
           
           L1_x = [k1_x k3_x k4_x k2_x k1_x fill!(similar(k1_x),NaN)] |> transpose |> vec
           L1_y = [k1_y k3_y k4_y k2_y k1_y fill!(similar(k1_y),NaN)] |> transpose |> vec
           squares = scatter(; x = L1_x, y = L1_y, mode="lines", line_color="black")
           
           plot([trace1, trace2, trace3, trace4, squares])
       end
[ Info: Listening on: 127.0.0.1:6381, thread id: 1

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/e/6/e64864d960b7ad7f0fa29c958dd7663720dfa373.png)

---

<div class="post-metadata">

**Author:** ![jd-foster](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/jd-foster/32/35824_2.png) [@jd-foster](https://discourse.julialang.org/u/jd-foster)\
**Post date:** [April 24, 2024, 12:12pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/8 "2024-04-24T12:12:13Z")

</div>

Here is another version heavily based on Mark’s:

```julia
using PlotlyJS

t = 0:0.025:1

f(x) = x/(1+x)

k1 = map(x -> x + im*f(x), t) # equ1
k2 = map(x -> x + 0.05 + im*f(x), t) # equ2
k3 = map(x -> x + im*(f(x) - 0.05), t) # equ3
k4 = map(x -> x + 0.05 + im*(f(x) - 0.05), t) # equ4
k = [k1 k2 k3 k4]

X = real.(k)
Y = imag.(k)

traces = GenericTrace[]

# Plot the points:
colours = ["blue", "red", "green", "magenta"]
for i=1:size(k,2)
    push!(traces,
        scatter(; x = X[:,i], y = Y[:,i],
            mode = "markers", name = "$i", line_color = colours[i]))
end

# Plot the squares:
squares = GenericTrace[]

V = [1, 2, 4, 3, 1] # vertex ordering of squares
for j in 1:size(k,1)
    push!(squares,
            scatter(; x = X[j,V], y = Y[j,V], mode="lines", line_color="black", showlegend=false))
end
append!(traces, squares)

# Create the plot:
plot(traces)

```

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 26, 2024, 5:14pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/9 "2024-04-26T17:14:50Z")

</div>

Dear [jd-foster](https://discourse.julialang.org/u/jd-foster) and [mkitti](https://discourse.julialang.org/u/mkitti)

Thank you for your replies, I tried both of them but not working for me,

I was focused on the form of the code, and the orders, and completely forgot about

One of the important points,

while I could not apply your suggestions and all possible methods, failed,

I back to the functions and checked the mathematical model.

These points must shape a rectangle, not a square which I did not note before,

so none of the suggested methods could help me.

sorry about that and if possible, help me by this point

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 26, 2024, 6:10pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/10 "2024-04-26T18:10:09Z")

</div>

The square part should not matter. Please provide sample data for us to proceed further.

Specifically, we need the values of `kn_x` and `kn_y` for n in `1, 2, 3, 4`.

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 26, 2024, 6:44pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/11 "2024-04-26T18:44:09Z")

</div>

k1, k2, k3 and k4 are characteristic equations. in order 3 as follows:

a3_s^3+a2_s^2+a1\*s+a0

(just a3-a0 are different)

then we extract Im and Re parts to shape the 4 vertex of a rectangle:

```julia
push!(k1_x, real(k1))
push!(k1_y, imag(k1))
push!(k2_x, real(k2))
push!(k2_y, imag(k2))
push!(k3_x, real(k3))
push!(k3_y, imag(k3))
push!(k4_x, real(k4))
push!(k4_y, imag(k4))

```

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 26, 2024, 7:10pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/12 "2024-04-26T19:10:39Z")

</div>

Provide numbers or code to define them please.

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 26, 2024, 7:47pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/13 "2024-04-26T19:47:17Z")

</div>

Here:

```julia
for w = 0:5:100
s = 1im * w # Use 1im for complex numbers in Julia

# Define the vertices of the Kharitonov rectangles
k1 = 0.27 * s^3 +4.45 * s^2 + 1.21 * s^1 + 114.3
k2 = 0.33 * s^3 + 5.44 * s^2 + 1.21 * s^1 + 114.3
k3 = 0.27 * s^3 + 5.44 * s^2 + 1.21 * s^1 + 114.3
k4 = 0.33 * s^3 + 4.45 * s^2 + 1.21 * s^1 + 114.3

```

 ![Screenshot 0006-04-27 at 04.46.40](https://global.discourse-cdn.com/julialang/original/3X/c/d/cd6724086c403667e20eb9996d8fe4c3c1ed2cdb.png)

in Matlab I could draw successfully but in Julia I cannot…

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 26, 2024, 9:22pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/14 "2024-04-26T21:22:34Z")

</div>

Try this:

```julia
w = 0:5:100
s = w * 1im
k1 = 0.27 .* s.^3 .+ 4.45 .* s.^2 .+ 1.21 .* s.^1 .+ 114.3
k2 = 0.33 .* s.^3 .+ 5.44 .* s.^2 .+ 1.21 .* s.^1 .+ 114.3
k3 = 0.27 .* s.^3 .+ 5.44 .* s.^2 .+ 1.21 .* s.^1 .+ 114.3
k4 = 0.33 .* s.^3 .+ 4.45 .* s.^2 .+ 1.21 .* s.^1 .+ 114.3

mode = "markers"

trace1 = scatter(; x = real(k1), y = imag(k1), mode)
trace2 = scatter(; x = real(k2), y = imag(k2), mode)
trace3 = scatter(; x = real(k3), y = imag(k3), mode)
trace4 = scatter(; x = real(k4), y = imag(k4), mode)

L1 = [k1 k3 k2 k4 k1 fill!(similar(k1),NaN + NaN*1im)] |> transpose |> vec
rects = scatter(; x = real(L1), y = imag(L1), mode="lines", line_color="black")
           
plot([trace1, trace2, trace3, trace4, rects])

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/b/1/b1a036710bdf67aaa0ba3c579b1ebebf66050bea.png)

Here’s another version that resembles your MATLAB version with lines of different colors.

```julia-repl
julia> begin
           w = 0:5:100
           s = w * 1im
           p(a,b,c,d) = s->a*s^3 + b*s^2 + c*s + d 
           k1 = p(0.27, 4.45, 1.21, 114.3).(s)
           k2 = p(0.33, 5.44, 1.21, 114.3).(s)
           k3 = p(0.27, 5.44, 1.21, 114.3).(s)
           k4 = p(0.33, 4.45, 1.21, 114.3).(s)

           function draw_line(kn, km)
               L = [kn km fill!(similar(kn), NaN + 1im *NaN)]
               L = vec(transpose(L))
               x = real(L)
               y = imag(L)
               mode = "lines"
               scatter(; x, y, mode)
           end         
           plot(draw_line.(
               [k1, k3, k2, k4],
               [k3, k2, k4, k1]
           ))
       end

```

 ![image](https://global.discourse-cdn.com/julialang/original/3X/4/c/4caaeb70c015df58c9b16678e7816781604994b5.png)

---

<div class="post-metadata">

**Author:** ![Sharara](https://avatars.discourse-cdn.com/v4/letter/s/6bbea6/32.png) [@Sharara](https://discourse.julialang.org/u/Sharara)\
**Post date:** [April 27, 2024, 11:38am UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/15 "2024-04-27T11:38:22Z")

</div>

Thank you very much,  
I could apply both versions,

- using “.” before +, ^ and \*

was a very important point …

Thank you for your great help.

---

<div class="post-metadata">

**Author:** ![mkitti](https://sea2.discourse-cdn.com/julialang/user_avatar/discourse.julialang.org/mkitti/32/12459_2.png) [@mkitti](https://discourse.julialang.org/u/mkitti)\
**Post date:** [April 27, 2024, 12:00pm UTC](https://discourse.julialang.org/t/connect-points-in-for-loop/113429/16 "2024-04-27T12:00:02Z")

</div>

> [@Sharara](#):
>
> using “.” before +, ^ and \*

Note that there is a shortcut to do this with `@.`

```julia
julia> begin
       k1 = @. 0.27 * s^3 + 4.45 * s^2 + 1.21 * s^1 + 114.3
       k2 = @. 0.33 * s^3 + 5.44 * s^2 + 1.21 * s^1 + 114.3
       k3 = @. 0.27 * s^3 + 5.44 * s^2 + 1.21 * s^1 + 114.3
       k4 = @. 0.33 * s^3 + 4.45 * s^2 + 1.21 * s^1 + 114.3
       end

```