DataMapPlot with Panel

Showcase
1

I wanted to test out DataMapPlot with Panel. And it works.

The trick is the convert the DataMapPlot InteractiveFigure to html and then to an iframe string.

import datamapplot
import numpy as np
import pandas as pd
import requests
import bz2
import io
import panel as pn
import numpy as np
import requests
import io
import html
import os
from pathlib import Path
from datamapplot.interactive_rendering import InteractiveFigure


pn.extension(defer_load=True)

base_url = "https://github.com/TutteInstitute/datamapplot"

CACHE = Path(".cache")
CACHE.mkdir(parents=True, exist_ok=True)

DATA_MAP_PLOT_LOGO = "https://github.com/TutteInstitute/datamapplot/raw/main/doc/datamapplot_text_horizontal.png"
DATA_MAP_PLOT_URL = "https://datamapplot.readthedocs.io/en/latest/"

DESCRIPTION = f"""\
Creating **beautiful plots of data maps**.

[**DataMapPlot**]({DATA_MAP_PLOT_URL}) is a small library designed to help you make \
beautiful data map plots for inclusion in presentations, posters and papers.

The focus is on producing static plots, or simple interactive plots, that are great looking \
with as little work for you as possible.\
"""

@pn.cache
def np_load(url, allow_pickle=False):
  filename = os.path.basename(url)
  file = CACHE/filename
  if not file.exists():
    content = requests.get(url).content
    file.write_bytes(content)
  
  return np.load(file, allow_pickle=allow_pickle)

@pn.cache
def create_plot()->InteractiveFigure:
    arxivml_data_map_url = f"{base_url}/raw/main/examples/arxiv_ml_data_map.npy"
    arxivml_data_map = np_load(arxivml_data_map_url)
    arxivml_label_layers = []
    for layer_num in range(5):
        label_url = f"{base_url}/raw/interactive/examples/arxiv_ml_layer{layer_num}_cluster_labels.npy"
        arxivml_label_layers.append(np_load(label_url, allow_pickle=True))
    return datamapplot.create_interactive_plot(
        arxivml_data_map,
        arxivml_label_layers[2],
    )

def to_iframe(plot: InteractiveFigure)->str:
    escaped_html = html.escape(plot._html_str)
    return f'<iframe srcdoc="{escaped_html}" style="height:100%; width:100%;padding:2px;" frameborder="0"></iframe>'

plot = create_plot()
html = to_iframe(plot)

data_map_plot_logo_pane = pn.pane.PNG(DATA_MAP_PLOT_LOGO, link_url=DATA_MAP_PLOT_URL)
plot_pane = pn.pane.HTML(html, sizing_mode="stretch_both", styles={"border": "2px solid var( --neutral-color )", "border-radius": "4px"})

pn.template.FastListTemplate(
  site="Panel",
  title="ArXiv ML Landscape",
  sidebar = [data_map_plot_logo_pane, DESCRIPTION],
  main=[pn.Column("# A data map of papers from the Machine Learning section of ArXiv", plot_pane)],
  main_max_width="1600px",
  main_layout=None,
).servable()
3 Likes