Plot sample images over network graph

Question

I am using Plotly to display a network graph and I'm trying to display sample images belonging to specific data points (each data point is a 64x64 luminosity map of a sculpture). I have two problems:

1. I'm using the datapoint coordinates to position the image, but they are not aligned. I tried to use xanchor/yanchor to fix it but it didn't work.
2. Although I'm plotting 100 images, only a few of them are actually visible. If I zoom in into the visualization I can see more of them but I want to force Plotly to show all of them. I tried with layer='above' but didn't work.
3. It would be great if there is a way to link the image with the actual data point but I don't know how to do it.

def plot_graph(G, plot_title, dataset, coordinates=None):

if coordinates == None:
    coordinates = nx.drawing.spring_layout(G, weight=None)

edge_x = []
edge_y = []
for edge in G.edges():
    x0, y0 = coordinates[edge[0]]
    x1, y1 = coordinates[edge[1]]
    edge_x.extend([x0, x1])
    edge_y.extend([y0, y1])

edge_trace = go.Scatter(x=edge_x,
                        y=edge_y,
                        line=dict(width=0.5, color='#888'),
                        hoverinfo='none',
                        mode='lines'
                        )

node_x = []
node_y = []
for node in G.nodes():
    x, y = coordinates[node]
    node_x.append(x)
    node_y.append(y)

colorbar_attrs = dict(thickness=15, title='KNN Density', xanchor='left', titleside='right')
marker_attrs = dict(showscale=True,
                    colorscale='YlGnBu',
                    reversescale=True,
                    color=[], size=10,
                    colorbar=colorbar_attrs,
                    line_width=2)

node_trace = go.Scatter(x=node_x, y=node_y, mode='markers', hoverinfo='text', marker=marker_attrs)

node_adjacencies = []
node_text = []

for node, adjacencies in enumerate(G.adjacency()):
    node_adjacencies.append(len(adjacencies[1]))
    node_text.append('K-Nearest Neighbors: '+str(len(adjacencies[1])))


node_trace.marker.color = node_adjacencies
node_trace.text = node_text
fig = go.Figure(data=[edge_trace, node_trace],
                layout=go.Layout(
                title='<br> {}'.format(plot_title),
                titlefont_size=18,
                showlegend=False,
                hovermode='closest',
                margin=dict(b=20,l=5,r=5,t=40),
                xaxis=dict(showgrid=False, zeroline=False, showticklabels=False),
                yaxis=dict(showgrid=False, zeroline=False, showticklabels=False))
                )

num_images = 100
num_faces = dataset.shape[0]
sample_images = np.random.choice(num_faces, num_images, replace=False)
greys = cm.get_cmap('Greys_r')

for index in sample_images:
    greyscale = np.apply_along_axis(greys, 0, dataset[index]).reshape((64, 64, 4))*255
    greyscale = greyscale.astype(np.uint8)
    im = pilim.fromarray(greyscale)
    fig.add_layout_image(dict(
        source=im,
        x=coordinates[index][0],
        y=coordinates[index][1],
        sizex=0.03,
        sizey=0.03,
        layer='above'
                         ))

return fig

This is what I'm getting

Answer 1

First pitch

Since you haven't provided a fully reproducible example, it's difficult to solve your problem directly. But I do have a suggestion building on the top example from plot.ly/python/network-graphs/ and using the image benze.png that's also used in other plotly examples. The image is stored multiple times in a list, so you should be able to replace those easily with references to other images. I'm grabbing the X, Y coordinates from fig['data'][1]['x'] and fig['data'][1]['y'] but that should be easily adjustable to other sources too.

Plot 1:

Plot 2: Zoomed in

Now, if I'm understanding your challenge correctly, this plot meets your requirements regarding all three criteria:

1. datapoints are aligned
2. all images are showing
3. images are aligned directly to all datapoints

Please don't hesitate to let me know how this works out for you!

Code:

import plotly.graph_objects as go
import networkx as nx

G = nx.random_geometric_graph(200, 0.125)

edge_x = []
edge_y = []
for edge in G.edges():
    x0, y0 = G.nodes[edge[0]]['pos']
    x1, y1 = G.nodes[edge[1]]['pos']
    edge_x.append(x0)
    edge_x.append(x1)
    edge_x.append(None)
    edge_y.append(y0)
    edge_y.append(y1)
    edge_y.append(None)

edge_trace = go.Scatter(
    x=edge_x, y=edge_y,
    line=dict(width=0.5, color='#888'),
    hoverinfo='none',
    mode='lines')

node_x = []
node_y = []
for node in G.nodes():
    x, y = G.nodes[node]['pos']
    node_x.append(x)
    node_y.append(y)

node_trace = go.Scatter(
    x=node_x, y=node_y,
    mode='markers',
    hoverinfo='text',
    marker=dict(
        showscale=True,
        colorscale='YlGnBu',
        reversescale=True,
        color=[],
        size=10,
        colorbar=dict(
            thickness=15,
            title='Node Connections',
            xanchor='left',
            titleside='right'
        ),
        line_width=2))

node_adjacencies = []
node_text = []
for node, adjacencies in enumerate(G.adjacency()):
    node_adjacencies.append(len(adjacencies[1]))
    node_text.append('# of connections: '+str(len(adjacencies[1])))

node_trace.marker.color = node_adjacencies
node_trace.text = node_text

fig = go.Figure(data=[edge_trace, node_trace])

# sample images
sample_images=["https://raw.githubusercontent.com/michaelbabyn/plot_data/master/benzene.png"]*len(fig['data'][1]['x'])
xVals = fig['data'][1]['x']
yVals = fig['data'][1]['y']

for i in range(0, len(xVals)):  
    fig.add_layout_image(dict(
        source=sample_images[i],
        x=xVals[i],
        y=yVals[i],
        xref="x",
        yref="y",
        #sizex=0.03,
        #sizey=0.03,
        #layer='above'
        sizex=0.1,
        sizey=0.1,
        #sizing="stretch",
        opacity=0.5,
        layer="below"
    ))

fig.show()