# Network Graphs with Images

URL: https://brege.org/post/network-graphs-with-images/
Published: 2022-12-21
Updated: 2026-04-12
Tags: hugo, network-graphs, vis.js, images, data-visualization
Categories: software, data-science

A followup to the Network Graphs in Hugo post, this time with avatars for
the nodes.

This is a follow-up to the previous post [Network Graphs in Hugo](/post/network-graphs-in-hugo/).
I'm feeling fruity.  These aren't *all* tree fruits, but a few clusters organized by tree grafting compatibility.

{{< fruit-network nodesPath="data/nodes.json" edgesPath="data/edges.json" scriptPath="js/fruit-network.js" >}}

1. Data for the network is stored in two separate JSON files in this page bundle:
    - [`nodes.json`](data/nodes.json)
    - [`edges.json`](data/edges.json)

2. The shortcode and post-local javascript work together:
    - `fruit-network.html`
    - [`fruit-network.js`](js/fruit-network.js)
        ``` html
        {{ $nodesPath := .Get "nodesPath" }}
        {{ $edgesPath := .Get "edgesPath" }}

        <style>
          #mynetwork {
            background-color: #f5f5f5; /* a medium gray color */
            border-radius: 10px;
            border: 1px solid #cccccc;
            margin: 5px 0 40px 0;
          }
        </style>

        <div id="mynetwork" data-nodes-path={{ $nodesPath }} data-edges-path={{ $edgesPath }}></div>

        <script src="https://visjs.github.io/vis-network/standalone/umd/vis-network.min.js"></script>
        <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
        <script src="js/fruit-network.js"></script>

        ```

This will provide network graph physics where the nodes are images (all sourced from [Wikipedia](https://www.wikipedia.org/). Hugo template for completeness:
``` markdown
{{</* fruit-network nodesPath="data/nodes.json" edgesPath="data/edges.json" scriptPath="js/fruit-network.js" */>}}

```