Add tabs back into "Plot quantum states" (#1278)

This is possible with the new `CodeCellPlaceholder` components. [Check
it
out](https://qiskit-docs-preview-pr-1278.1799mxdls7qz.us-south.codeengine.appdomain.cloud/verify/plot-quantum-states).

***

Closes #1219
This commit is contained in:
Frank Harkins 2024-05-02 15:19:46 +01:00 committed by GitHub
parent c95b08814c
commit d3a402ffd2
1 changed files with 168 additions and 151 deletions

View File

@ -59,18 +59,147 @@
"id": "3a89d7cd-7eb2-499e-a9a4-e1921aa57284",
"metadata": {},
"source": [
"## LaTeX state visualization\n",
"\n",
"<Tabs>\n",
"<TabItem value=\"LaTeX\" label=\"LaTeX\">\n",
" While not technically a \"plot\", Qiskit can render LaTeX representations of both `Statevector` and `DensityMatrix` objects that display nicely in Jupyter notebooks. These follow the standard mathematical conventions for writing down quantum states. Read more in [Basics of quantum information: Single systems](https://learning.quantum.ibm.com/course/basics-of-quantum-information/single-systems#quantum-state-vectors).\n",
"\n",
"Statevectors default to \"ket notation\", whereas density matrices are displayed as a 2×2 matrix."
" Statevectors default to \"ket notation\", whereas density matrices are displayed as a 2×2 matrix.\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-latex\" />\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-latex-2\" />\n",
"\n",
" You can also replace `\"latex\"` with `\"latex_source\"` to get the raw LaTeX string.\n",
"\n",
"</TabItem>\n",
"<TabItem value=\"City\" label=\"City\">\n",
"\n",
" This plot displays the real and imaginary parts of each density matrix element in two three-dimensional bar charts. It's called a \"city\" plot because the bars resemble skyscrapers in a city. The state we're plotting has the following density matrix.\n",
"\n",
" $$\n",
" \\begin{bmatrix}\n",
" \\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" =\n",
" \\begin{bmatrix}\n",
" \\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & 0 \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & 0 \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" 0 & 0 & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" + i\n",
" \\begin{bmatrix}\n",
" 0 & 0 & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" 0 & 0 & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & 0 \\\\\n",
" \\end{bmatrix}\n",
" $$\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-city\" />\n",
"\n",
" See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_city) for more information.\n",
"\n",
"\n",
"</TabItem>\n",
"<TabItem value=\"Hinton\" label=\"Hinton\">\n",
"\n",
" This plot is very similar to the \"city\" plot, but the magnitude of each element is represented by the size of a square rather than the height of a bar. White squares represent elements with positive values, and black squares represent elements with negative values. The state we're plotting has the following density matrix.\n",
"\n",
" $$\n",
" \\begin{bmatrix}\n",
" \\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" =\n",
" \\begin{bmatrix}\n",
" \\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & 0 \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & 0 \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" 0 & 0 & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" + i\n",
" \\begin{bmatrix}\n",
" 0 & 0 & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" 0 & 0 & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & 0 \\\\\n",
" \\end{bmatrix}\n",
" $$\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-hinton\" />\n",
"\n",
" See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_hinton) for more information.\n",
"\n",
"\n",
"</TabItem>\n",
"<TabItem value=\"Pauli vector\" label=\"Pauli vector\">\n",
"\n",
" An observable is a way of measuring a quantum state such that the possible measurement outcomes are real numbers. The expected value of the outcome is also known as the expectation value of the observable on that state, and it can be thought of as the average of infinitely many observations of that state.\n",
"\n",
" Tensor products of Pauli matrices are all observables that return +1 or -1. This plot displays the expectation values of the state on different Pauli operators as a bar chart. All density matrices can be written as a sum of these Pauli matrices, weighted by their expectation values.\n",
"\n",
" For example, this state can be written as the sum of terms:\n",
"\n",
" $$\n",
" |\\psi\\rangle\\langle\\psi|\n",
" =\n",
" \\tfrac{1}{4}II\n",
" + \\tfrac{\\sqrt{2}}{8}IX\n",
" - \\tfrac{\\sqrt{2}}{8}XY\n",
" - \\tfrac{1}{8}YI\n",
" - \\tfrac{\\sqrt{2}}{8}YX\n",
" + \\tfrac{1}{8}YZ\n",
" + \\tfrac{1}{8}ZI\n",
" + \\tfrac{\\sqrt{2}}{8}ZX\n",
" + \\tfrac{1}{8}ZZ\n",
" $$\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-paulivec\" />\n",
"\n",
" You can also calculate these coefficients using `SparsePauliOp`.\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-paulivec-2\" />\n",
"\n",
" See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_paulivec) for more information.\n",
"\n",
"\n",
"</TabItem>\n",
"<TabItem value=\"Qsphere\" label=\"Qsphere\">\n",
"\n",
" The \"QSphere\" is a Qiskit-unique view of a quantum state in which the amplitude and phase of each element in a statevector is plotted on the surface of a sphere. The thickness of each dot represents the amplitude, and the color represents the phase. For mixed states it will show a sphere for each component.\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-qsphere\" />\n",
"\n",
" See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_qsphere) for more information.\n",
"\n",
"</TabItem>\n",
"<TabItem value=\"Bloch\" label=\"Bloch\">\n",
"\n",
" The Bloch vector of a qubit state is its expectation value in the X, Y, and Z Pauli observables mapped to the X, Y, and Z axes in three-dimensional space. This plot projects multi-qubit quantum states onto the single-qubit space and plots each qubit on a Bloch sphere. This visualization only shows the expectation values of individual qubits. It can't show correlations between qubits and so can't fully describe entangled quantum states.\n",
"\n",
" <CodeCellPlaceholder tag=\"id-tabs-bloch\" />\n",
"\n",
" See the [API documentation](/api/qiskit/qiskit.visualization.plot_bloch_multivector) for more information.\n",
"\n",
"</TabItem>\n",
"</Tabs>"
]
},
{
"cell_type": "code",
"execution_count": 2,
"id": "f6a47fc5-8b71-416d-8982-7e89a483d2e5",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-latex"
]
},
"outputs": [
{
"data": {
@ -94,7 +223,11 @@
"cell_type": "code",
"execution_count": 3,
"id": "9b6c950a-d2b1-48d0-95ff-4b44fb897697",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-latex-2"
]
},
"outputs": [
{
"data": {
@ -123,46 +256,15 @@
"DensityMatrix(psi).draw(\"latex\") # convert to a DensityMatrix and draw"
]
},
{
"cell_type": "markdown",
"id": "e3b33b00-964a-45ef-bb90-8662d06f04dc",
"metadata": {},
"source": [
"You can also replace `\"latex\"` with `\"latex_source\"` to get the raw LaTeX string.\n",
"\n",
"## City state visualization\n",
"\n",
"This plot displays the real and imaginary parts of each density matrix element in two three-dimensional bar charts. It's called a \"city\" plot because the bars resemble skyscrapers in a city. The state we're plotting has the following density matrix.\n",
"\n",
"$$\n",
"\\begin{bmatrix}\n",
"\\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" =\n",
"\\begin{bmatrix}\n",
"\\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & 0 \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & 0 \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" 0 & 0 & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" + i\n",
" \\begin{bmatrix}\n",
" 0 & 0 & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" 0 & 0 & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & 0 \\\\\n",
" \\end{bmatrix}\n",
"$$"
]
},
{
"cell_type": "code",
"execution_count": 4,
"id": "752f7232-dfe5-457b-82f1-8a4ab5837aef",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-city"
]
},
"outputs": [
{
"data": {
@ -184,46 +286,15 @@
"# Alternative: psi.draw(\"city\")"
]
},
{
"cell_type": "markdown",
"id": "ebbc5add-6e77-43e7-b329-ae065b0a9098",
"metadata": {},
"source": [
"See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_city) for more information.\n",
"\n",
"## Hinton state visualization\n",
"\n",
"This plot is very similar to the \"city\" plot, but the magnitude of each element is represented by the size of a square rather than the height of a bar. White squares represent elements with positive values, and black squares represent elements with negative values. The state we're plotting has the following density matrix.\n",
"\n",
"$$\n",
"\\begin{bmatrix}\n",
"\\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" =\n",
"\\begin{bmatrix}\n",
"\\frac{1}{2} & \\frac{\\sqrt{2}}{4} & 0 & 0 \\\\\n",
" \\frac{\\sqrt{2}}{4} & \\frac{1}{4} & 0 & 0 \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" 0 & 0 & 0 & \\frac{1}{4} \\\\\n",
" \\end{bmatrix}\n",
" + i\n",
" \\begin{bmatrix}\n",
" 0 & 0 & 0 & \\frac{\\sqrt{2} i}{4} \\\\\n",
" 0 & 0 & 0 & \\frac{i}{4} \\\\\n",
" 0 & 0 & 0 & 0 \\\\\n",
" - \\frac{\\sqrt{2} i}{4} & - \\frac{i}{4} & 0 & 0 \\\\\n",
" \\end{bmatrix}\n",
"$$"
]
},
{
"cell_type": "code",
"execution_count": 5,
"id": "31c6b641-9447-46c9-aecc-5a5602bbd538",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-hinton"
]
},
"outputs": [
{
"data": {
@ -245,41 +316,15 @@
"# Alternative: psi.draw(\"hinton\")"
]
},
{
"cell_type": "markdown",
"id": "73dffb7b-b180-46df-b3e0-c6e196d1cd8c",
"metadata": {},
"source": [
"See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_hinton) for more information.\n",
"\n",
"## Pauli vector state visualization\n",
"\n",
"An observable is a way of measuring a quantum state such that the possible measurement outcomes are real numbers. The expected value of the outcome is also known as the expectation value of the observable on that state, and it can be thought of as the average of infinitely many observations of that state.\n",
"\n",
"Tensor products of Pauli matrices are all observables that return +1 or -1. This plot displays the expectation values of the state on different Pauli operators as a bar chart. All density matrices can be written as a sum of these Pauli matrices, weighted by their expectation values.\n",
"\n",
"For example, this state can be written as the sum of terms:\n",
"\n",
"$$\n",
"|\\psi\\rangle\\langle\\psi|\n",
"=\n",
"\\tfrac{1}{4}II\n",
"+ \\tfrac{\\sqrt{2}}{8}IX\n",
"- \\tfrac{\\sqrt{2}}{8}XY\n",
"- \\tfrac{1}{8}YI\n",
"- \\tfrac{\\sqrt{2}}{8}YX\n",
"+ \\tfrac{1}{8}YZ\n",
"+ \\tfrac{1}{8}ZI\n",
"+ \\tfrac{\\sqrt{2}}{8}ZX\n",
"+ \\tfrac{1}{8}ZZ\n",
"$$"
]
},
{
"cell_type": "code",
"execution_count": 6,
"id": "b7729b72-3597-4360-a731-180314abc849",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-paulivec"
]
},
"outputs": [
{
"data": {
@ -301,19 +346,15 @@
"# Alternative: psi.draw(\"paulivec\")"
]
},
{
"cell_type": "markdown",
"id": "97645ec0-7102-47a5-b027-1dac3b89debf",
"metadata": {},
"source": [
"You can also calculate these coefficients using `SparsePauliOp`."
]
},
{
"cell_type": "code",
"execution_count": 7,
"id": "4a3da3f4-4ee6-4b2a-8d3c-215fc14eb3f9",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-paulivec-2"
]
},
"outputs": [
{
"data": {
@ -334,23 +375,15 @@
"SparsePauliOp.from_operator(psi)"
]
},
{
"cell_type": "markdown",
"id": "4e5327b3-115d-411e-b988-2078fbb2d958",
"metadata": {},
"source": [
"See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_paulivec) for more information.\n",
"\n",
"## QSphere state visualization\n",
"\n",
"The \"QSphere\" is a Qiskit-unique view of a quantum state in which the amplitude and phase of each element in a statevector is plotted on the surface of a sphere. The thickness of each dot represents the amplitude, and the color represents the phase. For mixed states it will show a sphere for each component."
]
},
{
"cell_type": "code",
"execution_count": 8,
"id": "aa034130-f9b6-4a2b-9dbf-20615bb15c6f",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-qsphere"
]
},
"outputs": [
{
"data": {
@ -372,23 +405,15 @@
"# Alternative: psi.draw(\"qsphere\")"
]
},
{
"cell_type": "markdown",
"id": "bcd7e8e9-57bc-4641-b3a5-c995a81e8808",
"metadata": {},
"source": [
"See the [API documentation](/api/qiskit/qiskit.visualization.plot_state_qsphere) for more information.\n",
"\n",
"## Bloch multivector state visualization\n",
"\n",
"The Bloch vector of a qubit state is its expectation value in the X, Y, and Z Pauli observables mapped to the X, Y, and Z axes in three-dimensional space. This plot projects multi-qubit quantum states onto the single-qubit space and plots each qubit on a Bloch sphere. This visualization only shows the expectation values of individual qubits. It can't show correlations between qubits and so can't fully describe entangled quantum states."
]
},
{
"cell_type": "code",
"execution_count": 10,
"id": "0a097bb3-d6b7-488b-8951-fc53aa7eae57",
"metadata": {},
"metadata": {
"tags": [
"id-tabs-bloch"
]
},
"outputs": [
{
"data": {
@ -410,14 +435,6 @@
"# Alternative: psi.draw(\"bloch\")"
]
},
{
"cell_type": "markdown",
"id": "90407fe1-8226-41ef-8275-73ede8f5613d",
"metadata": {},
"source": [
"See the [API documentation](/api/qiskit/qiskit.visualization.plot_bloch_multivector) for more information."
]
},
{
"cell_type": "markdown",
"id": "878769c0-c2ea-42c0-bb72-78c651bdba19",