Hive Plots Using Other Visualization Libraries#

This notebook first demonstrates how to visualize hive plots with holoviews, plotly, and bokeh through formal hiveplotlib support.

We then show how to create a baseline JSON output from a toy HivePlot instance.

Next, we use this JSON output to visualize the same toy example in JavaScript using the <hive-plot> Web Component from our sister npm package [@hiveplotlib/d3](https://www.npmjs.com/package/@hiveplotlib/d3).

Finally, we demonstrate how to visualize this toy hive plot in pure matplotlib. Although hiveplotlib of course supports matplotlib visualizations formally, this last example is meant to demonstrate wrangling the JSON data product to help users who need to translate the JSON output to an unsupported Python visualization library.

For the full reference of the JSON output structure (the contents under "axes", "edges", and "node_viz_kwargs"), see the Exporting Hive Plots to JSON gallery page.

Matplotlib Baseline#

We will use the following example throughout this notebook.

[1]:
import matplotlib.pyplot as plt
from hiveplotlib.datasets import example_hive_plot
[2]:
hp = example_hive_plot(
    num_nodes=15,
    num_edges=25,
    repeat_axes=True,
    seed=3,
)

# add some color customization
color_dict = {
    "A": {"A": "#006BA4", "C": "#FF800E"},
    "C": {"B": "#ABABAB", "C": "#595959"},
    "B": {"B": "#5F9ED1", "A": "#C85200"},
}

for p1 in color_dict:
    for p2 in color_dict[p1]:
        hp.update_edges(
            partition_id_1=p1,
            partition_id_2=p2,
            color=color_dict[p1][p2],
        )

fig, ax = hp.plot(
    figsize=(6, 6),
    axes_kwargs={"color": "black", "alpha": 1.0},
    alpha=1,
)
ax.set_title("Hiveplotlib Starting Point", y=1.2, fontsize=20)
plt.show()
../_images/notebooks_hive_plot_viz_outside_matplotlib_3_0.png

For more on the nuances of using the "matplotlib" viz back end, see the Hive Plots in Matplotlib page.

holoviews#

hiveplotlib supports visualizations with a holoviews back end. We need only set the viz back end accordingly.

Note: the holoviews-based viz back ends require that hiveplotlib be installed with extra packages, which can be done by running:

pip install hiveplotlib[holoviews]

hiveplotlib supports holoviews plotting using both bokeh ("holoviews-bokeh") and matplotlib ("holoviews-matplotlib").

Holoviews (Bokeh Back End)#

[3]:
hp.set_viz_backend("holoviews-bokeh")

# note the extra plotting kwargs changed to holoviews-bokeh ones, not mpl
fig = hp.plot(
    node_kwargs={"size": 7},
    axes_kwargs={"line_alpha": 1, "line_width": 2},
    line_width=2,
    line_alpha=1,
)
fig = fig.opts(
    title="Hiveplotlib (Holoviews-Bokeh Back End)",
    fontsize={"title": 20},
)
fig
[3]:

Note that switching to this interactive back end gave us hover information over our nodes, edges, and axes.

For more on the nuances of using the "holoviews-bokeh" viz back end, see the Hive Plots in Holoviews-Bokeh page.

Holoviews (Matplotlib Back End)#

[4]:
hp.set_viz_backend("holoviews-matplotlib")

# note the extra plotting kwargs changed to holoviews-matplotlib ones
fig = hp.plot(
    node_kwargs={"s": 50},
    axes_kwargs={"alpha": 1, "linewidth": 2},
    linewidth=2,
    alpha=1,
)
fig = fig.opts(
    title="Hiveplotlib (Holoviews-Matplotlib Back End)",
    fontsize={"title": 30},
)
fig
[4]:

For more on the nuances of using the "holoviews-matplotlib" viz back end, see the Hive Plots in Holoviews-Matplotlib page.

bokeh#

hiveplotlib supports visualizations with a bokeh back end. We need only set the viz back end accordingly.

Note: the "bokeh" viz back end requires that hiveplotlib be installed with extra packages, which can be done by running:

pip install hiveplotlib[bokeh]
[5]:
from bokeh.io import output_notebook
from bokeh.plotting import show

output_notebook()
Loading BokehJS ...
[6]:
hp.set_viz_backend("bokeh")

# note the extra plotting kwargs changed to bokeh ones
fig = hp.plot(
    node_kwargs={"size": 7},
    axes_kwargs={"line_alpha": 1, "line_width": 2},
    line_width=2,
    line_alpha=1,
)
fig.title = "Hiveplotlib (Bokeh Back End)"
fig.title.text_font_size = "30px"
show(fig)

For more on the nuances of using the "bokeh" viz back end, see the Hive Plots in Bokeh page.

plotly#

hiveplotlib supports visualizations with a plotly back end. We need only set the viz back end accordingly.

Note: the "plotly" viz back end requires that hiveplotlib be installed with extra packages, which can be done by running:

pip install hiveplotlib[plotly]
[7]:
import plotly.io

plotly.io.renderers.default = "plotly_mimetype+notebook"
[8]:
hp.set_viz_backend("plotly")

fig = hp.plot(opacity=1)
fig.update_layout(title="Hiveplotlib (Plotly Back End)", font={"size": 25})
fig