Covariant derivative is a key notion in the study and understanding of tensor calculus. This mathematical operation is often difficult to handle because it breaks the intuitive perception of classical euclidean space, especially by the concept of parallel transport on a geodesic. On this page is presented a WebGL simulation that reproduces the parallel transport of a vector into curved space (here a spherical surface). The goal is to better grasp the main idea of this process and how it is translated from a mathematical point of view, thanks to the definition of covariant derivative.
Firstly, we are going to calculate the expression of Christoffel's symbols on considered space. Then, we will able to find equations of geodesics, i.e the shortest paths between 2 points on spherical surface : these paths are also called "Great Circles".
When matrix of metric tensor is diagonal, we can easily calculate the Christoffel's symbols involved into the formulas of geodesics equations and covariant derivative. Here are the 2 expressions :
\begin{equation}
\left.\begin{align}
\Gamma^{i}_{ij}&=\Gamma^{i}_{ji}=\dfrac{1}{2}\,\partial_{j}\,\lng_{ii}\\
\Gamma^{i}_{jj}&=\dfrac{1}{2\,g_{ii}}\,\partial_{i}\,g_{jj}\,\,\, \text{with}\,\, i \ne j
\end{align}\right.
\end{equation}
All other symbols $\Gamma^{i}_{jk}$ are null. In our case, by taking below the matrix of metric tensor :
\begin{pmatrix}
1 & 0 \\
0 & \sin\theta
\end{pmatrix}
We get the following nonnull symbols :
\begin{equation}
\Gamma^{\theta}_{\varphi\varphi} = \sin\theta\cos\theta
\end{equation}
\begin{equation}
\Gamma^{\varphi}_{\theta\varphi} =\Gamma^{\varphi}_{\varphi\theta}=\cot\theta
\end{equation}
General expression for geodesics is written as (with $(y^{i})$ the system of curvilinear coordinates) :
\begin{equation}
\dfrac{\text{d}^2 y^{i}}{\text{d}s^2}+\Gamma^{i}_{jk}\,\dfrac{\text{d}y^{j}}{\text{d}s}\,\dfrac{\text{d}y^{k}}{\text{d}s}=0
\end{equation}
where $s$ is an affine parameter, that may be assimilated to the proper time of observer moving along the great circle.
For spherical surface, we get the equations (respectively for $\theta$ and $\varphi$ coordinates) :
\begin{equation}
\left.\begin{align}
\dfrac{\text{d}^2 \theta}{\text{d}s^2}&  \sin\theta\cos\theta \left(\dfrac{\text{d}\varphi}{\text{d}s}\right)^2 =0\\
& \notag \\
\dfrac{\text{d}^2 \varphi}{\text{d}s^2}& + 2\cot\theta\ \dfrac{\text{d}\theta}{\text{d}s}\dfrac{\text{d}\varphi}{ds}=0
\end{align}\right.
\end{equation}
Covariant derivative of a vector (and more generally of a vector field) allows to compute the modifications of its components during the transport, i.e along the chosen geodesic. Indeed, for comparing 2 vectors into euclidean space, we classicaly transport one of these two vectors along a straight line, in order to share for them the same origin. This notion of "parallel transport" can be extended to noneuclidean spaces. Our simulation highlights the modification, during parallel transport, of curvilinear coordinates as it is moving on geodesics chosen; Indeed, curvilinear basis is itself also altered : the covariant derivative translates the variations of these components.
Here is the definition of the "jth" component for covariant derivative of a vector field $\vec{V}=v^{j}\vec{e_{j}}=v_{j}\vec{e^{j}}$, noticed $(\nabla_{i}\vec{V})_{j}$ (or more rarely $\nabla_{i}v^{j}$ but this one may make a confusion since the covariant derivative of a scalar function is assimilated to the gradient), with the curvilinear coordinates $(y^{i})$ :
\begin{equation}
\left.\begin{align}
(\nabla_{i}\vec{V})_{j}&=\partial_{i}v_{j}v_{k}\,\Gamma^{k}_{ij}\\
&=\dfrac{\partial v_{j}}{\partial y^{i}}v_{k}\,\Gamma^{k}_{ij} \notag
\end{align}\right.
\end{equation}
with $v_{j}$ and $v_{k}$ covariant components. For contravariant components ($v^{j}$ and $v^{k}$), expression of "jth" contravariant component $(\nabla_{i}\vec{V})^{j}$ (alos noticed $\nabla_{i}v^{j}$) is expressed as :
\begin{equation}
\left.\begin{align}
(\nabla_{i}\vec{V})^{j}&=\partial_{i}v^{j}+v^{k}\,\Gamma^{j}_{ik}\\
&=\dfrac{\partial v^{j}}{\partial y^{i}}+v^{k}\,\Gamma^{j}_{ik} \notag
\end{align}\right.
\end{equation}
We can also define what is called "Absolute Differential" of transported vector. The "jth" contravariant component of this differential, noticed $(\text{D}\vec{V})^{j}$ (or also $\text{D}v^{j}$), is equal to :
\begin{equation}
(\text{D}\vec{V})^{j}=\text{D}v^{j}=(\nabla_{i}\vec{V})^{j}\text{d}y^{i}=\nabla_{i}v^{j}\text{d}y^{i}=\text{d}v^{j}+v^{k}\,\Gamma_{ik}^{j}\text{d}y^{i}
\end{equation}
Let's apply this definition to $\theta$ and $\varphi$ coordinates :
\begin{equation}
\left.\begin{align}
\text{D}v^{\theta} &= \text{d}v^{\theta} + v^{\varphi}\,\Gamma^{\theta}_{\varphi\varphi}\,\text{d}\varphi\\
&= \text{d}v^{\theta}  v^{\varphi}\,\sin\theta \cos\theta\,\text{d}\varphi \notag\\
&\notag \\
\text{D}v^{\varphi} &= \text{d}v^{\varphi} + v^{\varphi}\,\Gamma^{\varphi}_{\varphi\theta}\,\text{d}\theta + v^{\theta}\,\Gamma^{\varphi}_{\theta\varphi}\,\text{d}\varphi\\
&= \text{d}v^{\varphi} + \cot\theta\,(v^{\varphi}\text{d}\theta+v^{\theta}\text{d}\varphi)\notag
\end{align}\right.
\end{equation}
If Covariant Derivative $(\nabla_{i}\vec{V})^{j}=\nabla_{i}v^{j}$ is null, then Absolute Differential $(\text{D}\vec{V})^{j}=\text{D}v^{j}$ is also equal to zero for each "$j$" component. In this case, one says that vector is parallely transported along the geodesic and we generalize the notion of uniform vector field : regardless of where observer is located, he will always see a constant direction (and so constant angle) between the transported vector and the direction of path on which he's moving. This implies a modification of $v^{j}$ vector component as :
\begin{equation}
( (\text{D}\vec{V})^{j} = \text{D}v^{j}=0 ) \Rightarrow ( \text{d}v^{j} = v^{k}\,\Gamma^{j}_{ik}\,\text{d}y^{i} )
\end{equation}
WebGL simulation below reproduces in a geometrical way the parallel transport of a vector whose initial components are defined with an interactive menu (on the right). One can also choose the directions, along radial rotation (orthogonal to tangent plane) and (longitude,latitude) coordinates, of "great circle" (in yellow) on which one moves.
Tangent plane at the current point of geodesic is showed as a shadow plane, that forms the curvilinear basis too, itself illustrated by vectors of pink color $\vec{e_\theta}$ (vertical) and $\vec{e_\varphi}$ (horizontal). As soon as the animation starts, initial vector in cyan color remains static in curvilinear basis. The vector in green color represents the transported vector : angle between yellow geodesic and this green vector is constant (that's the very definition of parallel transport). Finally, the difference between initial vector and transported vector is displayed as vector of maroon color.
 Tested on Firefox 60.0, Chrome 66.0 and Opera 53.0
 Possible overlapping bug or no first view loaded for sphere on Safari 11.0.3
\begin{equation}
\begin{aligned}
\definecolor{White}{RGB}{255,255,255}\color{White} \text{Absolute Differential} &\definecolor{White}{RGB}{255,255,255}\color{White}\,:\,(\text{D}\vec{V})^{i}= \text{d}v^{i}+v^{k}\Gamma_{jk}^{i}\text{d}y^{j}
\end{aligned}
\end{equation}
\begin{equation}
\left.\begin{aligned}
\definecolor{White}{RGB}{255,255,255}\color{White} \Gamma^{\theta}_{\varphi\varphi} &\definecolor{White}{RGB}{255,255,255}\color{White}= \sin\theta\cos\theta\\
\definecolor{White}{RGB}{255,255,255}\color{White} \Gamma^{\varphi}_{\theta\varphi} &\definecolor{White}{RGB}{255,255,255}\color{White}= \Gamma^{\varphi}_{\varphi\theta}=\cot\theta\\
\definecolor{White}{RGB}{255,255,255}\color{White} (\text{D}\vec{V})^{\theta} &\definecolor{White}{RGB}{255,255,255}\color{White}= \text{d}v^{\theta} + v^{\varphi}\Gamma^{\theta}_{\varphi\varphi}\,\text{d}\varphi\\
\definecolor{White}{RGB}{255,255,255}\color{White} &\definecolor{White}{RGB}{255,255,255}\color{White}= \text{d}v^{\theta}  v^{\varphi}\sin\theta\,\cos\theta\,\text{d}\varphi\\
\definecolor{White}{RGB}{255,255,255}\color{White} (\text{D}\vec{V})^{\varphi} &\definecolor{White}{RGB}{255,255,255}\color{White}= \text{d}v^{\varphi} + v^{\theta}\Gamma^{\varphi}_{\varphi\theta}\,\text{d}\varphi +
v^{\varphi}\Gamma^{\varphi}_{\theta\varphi}\,\text{d}\theta\\
\definecolor{White}{RGB}{255,255,255}\color{White} &\definecolor{White}{RGB}{255,255,255}\color{White}= \text{d}v^{\varphi} + \cot\theta\,(v^{\theta}\text{d}\varphi + v^{\varphi}\text{d}\theta)
\end{aligned}\right.
\end{equation}
