Include new interactive visualizations

[filemaster]

Summary

Add new interactive visualizations for Jupyter, including:

• Bloch sphere
• Cities
• Hinton
• Histogram
• Paulivec
• Qsphere

Details and comments

Closes #718

[CLAassistant]

All committers have signed the CLA.

[ajavadia]

Can you please make the docstring more descriptive for all of the new interactive visualization functions? This includes a general description of the function, and more importantly what the args are. For example you have options which can take slider, showLegend, etc. Also what is executions_results? It should be a density matrix.

[ajavadia]

Thanks @filemaster. These look really cool.
I tried them, and below are some comments. Can you take a look and let me know what you think?

[ajavadia]

The axis font on the city map is really small and hard to read.

from qiskit import *
from qiskit.tools.visualization.interactive import *
q = QuantumRegister(1)
c = ClassicalRegister(1)
circ = QuantumCircuit(q, c)
circ.x(q[0])
circ.h(q[0])
result = execute(circ, 'local_statevector_simulator').result()

import numpy as np
v = result.get_statevector()
iplot_cities(np.outer(v, v))

[ajavadia]

The histogram does not display for me, it just shows an empty axis. The same code works for non-interactive plot_histogram function.

from qiskit import *
from qiskit.tools.visualization.interactive import *
q = QuantumRegister(1)
c = ClassicalRegister(1)
circ = QuantumCircuit(q, c)
circ.x(q[0])
circ.h(q[0])
circ.measure(q, c)
result = execute(circ, 'local_qasm_simulator').result()

counts = result.get_counts()
iplot_histogram(counts)

[ajavadia]

The iplot_paulivec function does not seem to work with the same density matrix input as other functions. In the city example above, if I replace the last line with iplot_paulivec(np.outer(v,v)) I get:

---------------------------------------------------------------------------
IndexError                                Traceback (most recent call last)
<ipython-input-9-2444bcf66697> in <module>()
      1 import numpy as np
      2 v = result.get_statevector()
----> 3 iplot_paulivec(np.outer(v,v))

~/Desktop/ajavadia-terra/qiskit/tools/visualization/interactive/_iplot_paulivec.py in iplot_paulivec(executions_results, options)
     72     data_to_plot = []
     73     for execution in executions_results:
---> 74         rho_data = process_data(execution['data'])
     75         rho_legend = execution['name']
     76         data_to_plot.append(dict(

IndexError: only integers, slices (`:`), ellipsis (`...`), numpy.newaxis (`None`) and integer or boolean arrays are valid indices

[ajavadia]

On the Qsphere, it seems like the state is displayed incorrectly. It just shows state = |1> everywhere.

There are several things going on in the picture below.
1- The point I am pointing to should be state |0000>, not |1>. It shows |1> for every point.
2- Two of the green lines have not faded away when I try to focus on the north pole.

Also, the colors seem to be wrong here. On the Qsphere, the color is supposed to signify the phase. In my example, every basis state has the same zero phase, so they should all be green.

from qiskit import *
from qiskit.tools.visualization import *
from qiskit.tools.visualization.interactive import *
q = QuantumRegister(4)
c = ClassicalRegister(4)
circ = QuantumCircuit(q, c)
circ.h(q)
result = execute(circ, 'local_statevector_simulator').result()

import numpy as np
v = result.get_statevector()
iplot_qsphere(np.outer(v,v))

[ajavadia]

Finally, it would be nice to have a similar structure to the functions as the non-interactive visualizations. There, you will see a function plot_state, which takes a method argument and then plots the state (density matrix rho) using any of city, paulivec, qsphere, bloch.

This way, we have two simple user-facing functions: iplot_state and iplot_histogram. The first one draws a state (using any of the 4 methods).

If we get the interfaces of the interactive and non-interactive the same, it will be easy to switch between them.

[diego-plan9]

Thanks @filemaster for the PR and @ajavadia for the review! Looking forward to having the neat interactive visualizations in place.

Please note as well that for this particular PR, some decisions (most of them visual, but also some of them arquitectural) involve not only terra itself, but also the design team and other forces at play. In particular, I think having the same signature compared to the static equivalents was desired (but not critical, as for example histogram has new functionality, now accepting several series), but I'm unsure about how desirable it was to replicate plot_state() - @ismaelfaro , can you take a look at some point?

[nonhermitian]

All of these import statements work in a normal IPython terminal env, and thus do not actually check for a notebook env. Instead, try this:

import sys
if ('ipykernel' in sys.modules) and ('spyder' not in sys.modules):
    from IPython.core.display import display, HTML

This covers everything except for the edge case of someone using the Qtconsole. But I have yet to run into someone actually using that now that notebooks exist.

[filemaster]

@ajavadia, we already added the necessary docstring to understand how to use the functions.

About the histogram, the new function can show different execution results in the same graph, so an input array of data is required. Following your example, it must look like:

from qiskit import *
from qiskit.tools.visualization.interactive import *
q = QuantumRegister(1)
c = ClassicalRegister(1)
circ = QuantumCircuit(q, c)
circ.x(q[0])
circ.h(q[0])
circ.measure(q, c)
result = execute(circ, 'local_qasm_simulator').result()

counts = result.get_counts()
iplot_histogram([{'data': counts}])

We know it is a bit more complex than the older version, but the real advantage is the possibility of compare results from different executions:

iplot_histogram([{'data': counts, 'name':'Job1'},
                 {'data': counts, 'name':'Job2'},
                 {'data': counts, 'name':'Job3', 'device':'simulated'},
                 {'data': counts, 'name':'Job4', 'device':'simulated'},
                ])

[jaygambetta]

before we merge we should make sure it is the same as the static plots and the static plots are also the same as these. I would also request that the plot defaults to interactive and then the non-interactive is made if the user does not have the extensions.

[filemaster]

@ajavadia. About the iplot_paulivec, the input is not the density matrix. The input for paulivec is similar to the histogram, an array of data objects. Is it possible you were trying to plot a Hinton? Hinton is like the cities but using 2D instead 3D, both of them use the density matrix as an input.

[jaygambetta]

the puali_vec needs to take in the state matrix.

[jaygambetta]

i will say the plots look awesome. Great job

[ajavadia]

@filemaster the paulivec should have the same input as the other state visualization methods (density matrix). This is the case in non-interactive visualizations as well.

from qiskit import *
from qiskit.tools.visualization import *
q = QuantumRegister(2)
c = ClassicalRegister(2)
circ = QuantumCircuit(q, c)
circ.h(q)
result = execute(circ, 'local_statevector_simulator').result()

import numpy as np
v = result.get_statevector()
plot_state(np.outer(v,v), 'paulivec')

That's also why i suggested a wrapper method plot_state, which shows that these all plot the same thing but in different ways.

[filemaster]

@ajavadia , @jaygambetta we are making the required changes to use the density matrix with paulivec visualization and the other issues. Thanks for your comments.

[filemaster]

All issues were fixed. We added a new function called iplot_state()similar to the non interactive plot_state().

iplot_state() supports next plotting methods:

• bloch
• city
• hinton
• paulivec
• qsphere

[ajavadia]

@filemaster thank you. I made some tiny changes mostly in the comments.

One comment about the histogram: what does the rest option do?

If you look at the static plotter, there is an option number_to_keep. It will keep the n most frequent bars, and will group the rest. This is because some plots can be really long.

from qiskit import *
from qiskit.tools.visualization import *
from qiskit.tools.visualization.interactive import *
q = QuantumRegister(5)
c = ClassicalRegister(5)
circ = QuantumCircuit(q, c)
circ.h(q)
circ.measure(q,c)
result = execute(circ, 'local_qasm_simulator').result()
c = result.get_counts()
plot_histogram(c, number_to_keep=3)

(without number to keep)

(with number to keep)

I thought the rest option in iplot_histogram would do the same, but it does not. It apparently just groups the ones that are exactly zero. Can we add the number_to_keep option, since that is more useful?

[Tansito]

The rest option does exactly what you thought @ajavadia , it groups just the ones that are zero. We will work in this 'new' behaviour.

[ajavadia]

Thanks you @Tansito and @filemaster. These look great.

I'll follow up with another issue to think about how to make these the default when qiskit is run in Jupyter, and to see if we can make the plot_histogram and iplot_histogram more consistent.