![](https://brege.org/post/network-graphs-with-images/fruit-network-images.png)
Network Graphs with Images
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. Data for the network is stored in two separate JSON files, both located in /static/data/fruit/: nodes.json edges.json The javascript and the shortcode, as one file: fruit-network.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....