display_bloch_spheres_and_correlations¶

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 twoqubit 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 twoqubit visualizer, but you can also use it offline by making a backup copy of the JavaScript file in your local filesystem.
 Parameters
states (np.ndarray) – A trajectory of twoqubit states represented by state vectors. This array must have shape
[T,4]
, whereT
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 twoqubit 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 QCTRL Visualizer JavaScript package.
Notes
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 singlequbit 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 twoqubit 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 twoqubit 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.\]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 spheres visualization, progress bar, and button. The div has inline stylesdisplay:flex
,flexdirection:column
, andalignitems: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. qctrlvisualizerwrapper
CSS class for the
<div>
that contains the Bloch spheres visualization. The div has inline stylesmargin:0.5rem 0
,width
, andheight
(based on the width you pass). qctrlvisualizerprogressbar
CSS class for the range
<input>
representing the progress bar. The input has inline stylemargin:0.5rem 0
. qctrlvisualizerbutton
CSS class for the
<button>
representing the play/pause/replay button. The button has inline stylemargin:0.5rem 0
. qctrlvisualizerbuttonplay
CSS class for the
<button>
when the button text is “Play”. qctrlvisualizerbuttonpause
CSS class for the
<button>
when the button text is “Pause”. qctrlvisualizerbuttonreplay
CSS class for the
<button>
when the button text is “Replay”.