How to do linear transformation, T, which maps the standard basis?

2D coordinate grid with standard basis are i=[1,0], j=[0,1]

After changing the basis with example: i=[3,-2], j=[2,1], 2D coordinate grid must look like,

Hi @lalit,

Welcome to plotly forum! Plotly is a graphics library, but you addressed a matematical question which should be posted on https://math.stackexchange.com/.
It seems to be a homework, and what you want to know is not “how to change basis vector of 2d coordinate”, but how the linear transformation, T, which maps the standard basis
vectors (i, j), respectively to the vectors v1, v2, given above, acts on the grid lines from your upper plot.
The linear transformation T is represented by its matrix, denoted also T, which has as columns the vectors v1 and v2.
Then T transforms each vector, v, of coordinates [x, y] (with respect to the standard basis), to the vector whose coordinates are the elements of the product T*V:

T*[x]
  [y]

In the following code each vertical line is drawn given the coordinates of its ends and similarly for the horizontal lines.
Then applying the transformation T to the vectors having as coordinates these line ends, you can plot the transformed grid:

import plotly.graph_objects as go
import numpy as np
from plotly.subplots import make_subplots

n=m=5
fig=make_subplots(rows=1, cols=2, horizontal_spacing=0.035)
#set up  the lists  of  vertical line x and y-end coordinates
xv = []
yv = []
for k in range(-n, n+1):
    xv.extend([k, k, np.nan])
    yv.extend([-m, m, np.nan])
lw=1.5 #line_width
fig.add_trace(go.Scatter(x=xv, y=yv, mode="lines", line_width=lw), 1, 1)
#set up  the lists  of  horizontal line x and y-end coordinates
xh=[]
yh=[]
for k in range(-m, m+1):
    xh.extend([-m, m, np.nan])
    yh.extend([k, k, np.nan])
    fig.add_trace(go.Scatter(x=xh, y=yh, mode="lines", line_width=lw), 1, 1)
#define the linear transformation T, such that T(i)=[3, -2]^T, T[j]=[2, 1]^T
T = np.array([[3., 2], [-2, 1.]], dtype=float)

#get only the coordinates from -3 to 3
X = np.array(xv[6:-6])
Y = np.array(yv[6:-6])

# transform by T the vector of coordinates [x, y]^T where the vector runs over the columns of np.stack((X, Y))
Txvyv = T@np.stack((X, Y)) #transform by T the vertical lines

X = np.array(xh[6:-6])
Y = np.array(yh[6:-6])

Txhyh = T@np.stack((X, Y))# #transform by T the horizontal lines


fig.add_trace(go.Scatter(x=Txvyv[0], y=Txvyv[1], mode="lines", line_width=lw), 1, 2)
fig.add_trace(go.Scatter(x=Txhyh[0], y=Txhyh[1], mode="lines", line_width=lw), 1, 2)
fig.update_xaxes(range=[-n, n])
fig.update_yaxes(range=[-m, m])
fig.update_layout(width=800, height=500, showlegend=False, template="none",
                   plot_bgcolor="black", yaxis2_showgrid=False, xaxis2_showgrid=False)
fig.show()

1 Like

Thanks a lot broo :v:

I was right: this was your homework :grinning: :grinning: :grinning:

import plotly.graph_objects as go
import numpy as np
from plotly.subplots import make_subplots

n=m=5
#set up  the lists  of  vertical line x and y-end coordinates

xv = []
yv = []
for k in range(-n, n+1):
    xv.extend([k, k, np.nan])
    yv.extend([-m, m, np.nan])

#set up  the lists  of  horizontal line x and y-end coordinates

xh=[]
yh=[]
for k in range(-m, m+1):
    xh.extend([-m, m, np.nan])
    yh.extend([k, k, np.nan])

x=np.array(xv+xh)
y=np.array(yv+yh)

# Linear transformation 
T = np.array([[3, -2], [2, 1]], dtype=float)
xy=np.stack((x,y))
xy_T=T.T@xy

fig=go.Figure(
    data=[
        go.Scatter(x=x, y=y, line_width=1), 
        go.Scatter(x=[0,0.01], y=[0,0],line_width=3), 
        go.Scatter(x=[0,0], y=[0,0.01],line_width=3) 
        
    ],
    layout=go.Layout(
        showlegend=False,
        xaxis=dict(range=[-n, n], autorange=False),
        yaxis=dict(range=[-m, m], autorange=False),
        width=500,
        height=500,
        updatemenus=[
                dict(
                    type="buttons",
                    buttons=[dict(label="Play",method="animate",args=[None])]
                )
        ]
    ),
    frames=[
        go.Frame(data=[
                go.Scatter(x=x, y=y, line_width=1), 
                go.Scatter(x=[0,0.01], y=[0,0],line_width=3), 
                go.Scatter(x=[0,0], y=[0,0.01],line_width=3) 
            ]
        ),
        go.Frame(data=[
                go.Scatter(x=x, y=y, line_width=1),

                go.Scatter(x=[0,1], y=[0,0], line_width=3), # i=[1,0]
                go.Scatter(x=[0,0], y=[0,1], line_width=3) # j=[0,1]
            ]
        ),
        go.Frame(data=[

                go.Scatter(x=xy_T[0], y=xy_T[1],line_width=1),

                go.Scatter(x=[0,T[0][0]], y=[0,T[0][1]], line_width=3), # i=[3,-2]
                go.Scatter(x=[0,T[1][0]], y=[0,T[1][1]], line_width=3), # j=[2,1]
            ]
        ),
    ]
    
)

fig.show()

ezgif.com-gif-maker

yepp bro!!