display_bloch_sphere_from_density_matrices

qctrlvisualizer.display_bloch_sphere_from_density_matrices(density_matrices, color=None, width=300, visualizer_js=None)

Display a trajectory in the Bloch sphere from input density matrices.

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 Bloch sphere visualizer, but you can also use it offline by making a backup copy of the JavaScript file in your local filesystem.

Parameters:

  • density_matrices (np.ndarray) – A trajectory of single-qubit states represented by density matrices. This array must have shape [T,2,2], where T is the number of density matrices 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 Bloch sphere, in pixels. Its height has the same value as the width. Defaults to 300 pixels.

  • visualizer_js (str, optional) – A string with the location of the JavaScript library for the Bloch sphere 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.

See also

display_bloch_sphere, display_bloch_sphere_from_bloch_vectors

Notes

This function represents the trajectory of single-qubit states as points inside or on the Bloch sphere. These points correspond to each input density matrix \(\rho\), according to the following equation:

\[\rho = \frac{1}{2} I + \frac{1}{2} \left( b_x \sigma_x + b_y \sigma_y + b_z \sigma_z \right),\]

where \(I\) is the \(2 \times 2\) identity matrix, and \(b_x\), \(b_y\), and \(b_z\) are Cartesian coordinates on the Bloch sphere.

As the Pauli matrices \(\sigma_k\) have zero trace and their square is the identity matrix, the value of each Cartesian coordinate \(b_k\) is:

\[b_k = \mathrm{Tr} \left\{ \sigma_k \rho \right\},\]

which is just the expectation value of \(\sigma_k\).

Styling

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:

qctrlvisualizer

CSS class for the outer <div> that contains the Bloch sphere 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.

qctrlvisualizer-wrapper

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

qctrlvisualizer-progress-bar

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

qctrlvisualizer-button

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

qctrlvisualizer-button-play

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

qctrlvisualizer-button-pause

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

qctrlvisualizer-button-replay

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