qctrlvisualizer.display_bloch_spheres_and_correlations(states: numpy.ndarray, color: Optional[str] = None, width: int = 900, visualizer_js: Optional[str] = None)

Visualizes a trajectory of two-qubit states.

This function requires IPython, and you must run it from a Jupyter notebook. By default, it requires an Internet connection to fetch the JavaScript library for the two-qubit visualizer, but you can also use it offline by making a backup copy of the JavaScript file in your local filesystem.

  • states (np.ndarray) – A trajectory of two-qubit states represented by state vectors. This array must have shape [T,4], where T is the number of state vectors in the trajectory.

  • color (str, optional) – A string identifying the color of the trajectory. The string must be a color value accepted by CSS, such as a hexadecimal code like "#00FF00" or a color name like "green". The exact types of values accepted might depend on your browser, but you can find an official list of color values as part of the CSS standard. If you don’t pass a string, the default behavior is to use the color value "#EB6467".

  • width (int, optional) – The width of the visualization, in pixels. Its height is half of the value of the width. Defaults to 900 pixels.

  • visualizer_js (str, optional) – A string with the location of the JavaScript library for the two-qubit visualizer. It can be a URL or a path to a local file. If you don’t pass a string, the function uses the default online version of the Q-CTRL Visualizer JavaScript package.


While the pure state of a single qubit can be represented as a point on one Bloch sphere, the pure state of two qubits isn’t fully represented by simply duplicating the number of Bloch spheres. This is due to the fact that the state of two qubits can present correlations that can’t be visualized simply from the individual states of each qubit.

This function displays the state of the two qubits using two Bloch spheres and three additional tetrahedra, which represent the information about the entanglement between the qubits. The points on (or in) the Bloch spheres are analogous to those in the single-qubit visualization. The Cartesian coordinates \((b_{1,x}, b_{1,y}, b_{1,z})\) for the first Bloch sphere are the following expectation values:

\[\begin{split}b_{1,x} = \langle \sigma_x \otimes I \rangle, \\ b_{1,y} = \langle \sigma_y \otimes I \rangle, \\ b_{1,z} = \langle \sigma_z \otimes I \rangle,\end{split}\]

whereas the Cartesian coordinates \((b_{2,x}, b_{2,y}, b_{2,z})\) for the second Bloch sphere are:

\[\begin{split}b_{2,x} = \langle I \otimes \sigma_x \rangle, \\ b_{2,y} = \langle I \otimes \sigma_y \rangle, \\ b_{2,z} = \langle I \otimes \sigma_z \rangle,\end{split}\]

where \(I\) is the \(2 \times 2\) identity matrix.

The points in the three extra tetrahedra represent the correlations between observables in the two qubits. Each tetrahedron has three non orthogonal axes, each representing the covariance of a specific two-qubit observable. The upper left tetrahedron represents the covariances \(V(XY)\), \(V(YZ)\), and \(V(ZX)\):

\[\begin{split}V(XY) = \langle \sigma_x \otimes \sigma_y \rangle - b_{1,x} b_{2,y}, \\ V(YZ) = \langle \sigma_y \otimes \sigma_z \rangle - b_{1,y} b_{2,z}, \\ V(ZX) = \langle \sigma_z \otimes \sigma_x \rangle - b_{1,z} b_{2,x}.\end{split}\]

The tetrahedron on the upper right part of the display represents the covariances \(V(XZ)\), \(V(YX)\), and \(V(ZY)\):

\[\begin{split}V(XZ) = \langle \sigma_x \otimes \sigma_z \rangle - b_{1,x} b_{2,z}, \\ V(YX) = \langle \sigma_y \otimes \sigma_x \rangle - b_{1,y} b_{2,x}, \\ V(ZY) = \langle \sigma_z \otimes \sigma_y \rangle - b_{1,z} b_{2,y}.\end{split}\]

The tetrahedron in the lower part of the visualization has the covariances \(V(XX)\), \(V(YY)\), and \(V(ZZ)\):

\[\begin{split}V(XX) = \langle \sigma_x \otimes \sigma_x \rangle - b_{1,x} b_{2,x}, \\ V(YY) = \langle \sigma_y \otimes \sigma_y \rangle - b_{1,y} b_{2,y}, \\ V(ZZ) = \langle \sigma_z \otimes \sigma_z \rangle - b_{1,z} b_{2,z}.\end{split}\]

The two-qubit visualization also displays a measure of the entanglement between the two qubits in the form of a bar that shows the concurrence \(C\) associated with a given state vector \(| \psi \rangle\):

\[C(| \psi \rangle) = 2 \left| \langle 00 | \psi \rangle \langle 11 | \psi \rangle - \langle 01 | \psi \rangle \langle 10 | \psi \rangle \right|.\]


This function displays HTML and JavaScript in your Jupyter notebook. It creates four HTML elements that you can style by defining the following CSS classes:


CSS class for the outer <div> that contains the Bloch spheres visualization, progress bar, and button. The div has inline styles display:flex, flex-direction:column, and align-items:center, so if you want to use different values for these properties you must either strip them out or use the !important rule when defining your qctrlvisualizer class.


CSS class for the <div> that contains the Bloch spheres visualization. The div has inline styles margin:0.5rem 0, width, and height (based on the width you pass).


CSS class for the range <input> representing the progress bar. The input has inline style margin:0.5rem 0.


CSS class for the <button> representing the play/pause/replay button. The button has inline style margin:0.5rem 0.


CSS class for the <button> when the button text is “Play”.


CSS class for the <button> when the button text is “Pause”.


CSS class for the <button> when the button text is “Replay”.