Images on brege.org https://brege.org/tags/images/ Recent content in Images on brege.org Hugo en Copyright (c) 2016-2026 Wyatt Brege Sun, 12 Apr 2026 21:45:09 -0400 Network Graphs with Images https://brege.org/post/network-graphs-with-images/ Wed, 21 Dec 2022 02:15:04 -0500 https://brege.org/post/network-graphs-with-images/ 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. I’m feeling fruity. These aren’t all tree fruits, but a few clusters organized by tree grafting compatibility.

  1. Data for the network is stored in two separate JSON files in this page bundle:

  2. The shortcode and post-local javascript work together:

    • fruit-network.html
    • fruit-network.js 
      {{ $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. Hugo template for completeness:

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