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]
, whereT
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.
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 stylesdisplay:flex
,flex-direction:column
, andalign-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 yourqctrlvisualizer
class.- qctrlvisualizer-wrapper
CSS class for the
<div>
that contains the Bloch sphere visualization. The div has inline stylesmargin:0.5rem 0
,width
, andheight
(based on the width you pass).- qctrlvisualizer-progress-bar
CSS class for the range
<input>
representing the progress bar. The input has inline stylemargin:0.5rem 0
.- qctrlvisualizer-button
CSS class for the
<button>
representing the play/pause/replay button. The button has inline stylemargin: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”.