feat: cache-busting plot images

Author: thunderpoot

docs/index.html

@@ -103863,8 +103863,8 @@ <h2 id="Statistics-Plots">Statistics Plots</h2>
             <h4 id="nodes">
                 <a href="#nodes">nodes</a>
             </h4>
-            <a href="./plots/nodes.png" target="_blank">
-                <img src="./plots/nodes.png" alt="nodes Plot">
+            <a href="./plots/nodes.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/nodes.png?version=cc-main-2025-feb-mar-apr" alt="nodes Plot">
             </a>
             <p>The total number of unique nodes (e.g., domains, hosts, or pages) in the graph. Each node represents an entity in the web graph.</p>
         </div>
@@ -103873,8 +103873,8 @@ <h4 id="nodes">
             <h4 id="arcs">
                 <a href="#arcs">arcs</a>
             </h4>
-            <a href="./plots/arcs.png" target="_blank">
-                <img src="./plots/arcs.png" alt="arcs Plot">
+            <a href="./plots/arcs.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/arcs.png?version=cc-main-2025-feb-mar-apr" alt="arcs Plot">
             </a>
             <p>The total number of directed edges (or arcs) in the graph, representing links between nodes.</p>
         </div>
@@ -103883,8 +103883,8 @@ <h4 id="arcs">
             <h4 id="successoravggap">
                 <a href="#successoravggap">successoravggap</a>
             </h4>
-            <a href="./plots/successoravggap.png" target="_blank">
-                <img src="./plots/successoravggap.png" alt="successoravggap Plot">
+            <a href="./plots/successoravggap.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/successoravggap.png?version=cc-main-2025-feb-mar-apr" alt="successoravggap Plot">
             </a>
             <p>The average gap between successive nodes in the adjacency list of the graph. This reflects the ordering and clustering of nodes in the graph.</p>
         </div>
@@ -103893,8 +103893,8 @@ <h4 id="successoravggap">
             <h4 id="avglocality">
                 <a href="#avglocality">avglocality</a>
             </h4>
-            <a href="./plots/avglocality.png" target="_blank">
-                <img src="./plots/avglocality.png" alt="avglocality Plot">
+            <a href="./plots/avglocality.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/avglocality.png?version=cc-main-2025-feb-mar-apr" alt="avglocality Plot">
             </a>
             <p>A measure of the locality of edges in the graph, indicating how closely related the linked nodes are in terms of graph structure.</p>
         </div>
@@ -103903,8 +103903,8 @@ <h4 id="avglocality">
             <h4 id="maxoutdegree">
                 <a href="#maxoutdegree">maxoutdegree</a>
             </h4>
-            <a href="./plots/maxoutdegree.png" target="_blank">
-                <img src="./plots/maxoutdegree.png" alt="maxoutdegree Plot">
+            <a href="./plots/maxoutdegree.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/maxoutdegree.png?version=cc-main-2025-feb-mar-apr" alt="maxoutdegree Plot">
             </a>
             <p>The highest number of outgoing edges (links) from a single node in the graph. This identifies the most connected node in terms of outlinks.</p>
         </div>
@@ -103913,8 +103913,8 @@ <h4 id="maxoutdegree">
             <h4 id="dangling">
                 <a href="#dangling">dangling</a>
             </h4>
-            <a href="./plots/dangling.png" target="_blank">
-                <img src="./plots/dangling.png" alt="dangling Plot">
+            <a href="./plots/dangling.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/dangling.png?version=cc-main-2025-feb-mar-apr" alt="dangling Plot">
             </a>
             <p>The total number of dangling nodes in the graph, which are nodes (vertices) with zero outgoing edges (arcs).</p>
         </div>
@@ -103923,8 +103923,8 @@ <h4 id="dangling">
             <h4 id="percdangling">
                 <a href="#percdangling">percdangling</a>
             </h4>
-            <a href="./plots/percdangling.png" target="_blank">
-                <img src="./plots/percdangling.png" alt="percdangling Plot">
+            <a href="./plots/percdangling.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/percdangling.png?version=cc-main-2025-feb-mar-apr" alt="percdangling Plot">
             </a>
             <p>The percentage of nodes in the graph that are dangling nodes (see above).</p>
         </div>
@@ -103933,8 +103933,8 @@ <h4 id="percdangling">
             <h4 id="avgoutdegree">
                 <a href="#avgoutdegree">avgoutdegree</a>
             </h4>
-            <a href="./plots/avgoutdegree.png" target="_blank">
-                <img src="./plots/avgoutdegree.png" alt="avgoutdegree Plot">
+            <a href="./plots/avgoutdegree.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/avgoutdegree.png?version=cc-main-2025-feb-mar-apr" alt="avgoutdegree Plot">
             </a>
             <p>The average number of outgoing edges per node. This provides an overview of the graph's overall connectivity.</p>
         </div>
@@ -103943,8 +103943,8 @@ <h4 id="avgoutdegree">
             <h4 id="successoravglogdelta">
                 <a href="#successoravglogdelta">successoravglogdelta</a>
             </h4>
-            <a href="./plots/successoravglogdelta.png" target="_blank">
-                <img src="./plots/successoravglogdelta.png" alt="successoravglogdelta Plot">
+            <a href="./plots/successoravglogdelta.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/successoravglogdelta.png?version=cc-main-2025-feb-mar-apr" alt="successoravglogdelta Plot">
             </a>
             <p>The average logarithmic difference between successive node IDs in the adjacency list. This reflects the dispersion of node IDs in the graph structure.</p>
         </div>
@@ -103953,8 +103953,8 @@ <h4 id="successoravglogdelta">
             <h4 id="maxindegree">
                 <a href="#maxindegree">maxindegree</a>
             </h4>
-            <a href="./plots/maxindegree.png" target="_blank">
-                <img src="./plots/maxindegree.png" alt="maxindegree Plot">
+            <a href="./plots/maxindegree.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/maxindegree.png?version=cc-main-2025-feb-mar-apr" alt="maxindegree Plot">
             </a>
             <p>The highest number of incoming edges (links) to a single node in the graph. It identifies the most referenced or linked-to node.</p>
         </div>
@@ -103963,8 +103963,8 @@ <h4 id="maxindegree">
             <h4 id="avgindegree">
                 <a href="#avgindegree">avgindegree</a>
             </h4>
-            <a href="./plots/avgindegree.png" target="_blank">
-                <img src="./plots/avgindegree.png" alt="avgindegree Plot">
+            <a href="./plots/avgindegree.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/avgindegree.png?version=cc-main-2025-feb-mar-apr" alt="avgindegree Plot">
             </a>
             <p>The average number of incoming edges per node. This is equal to avgoutdegree in a balanced directed graph.</p>
         </div>
@@ -103973,8 +103973,8 @@ <h4 id="avgindegree">
             <h4 id="sccs">
                 <a href="#sccs">sccs</a>
             </h4>
-            <a href="./plots/sccs.png" target="_blank">
-                <img src="./plots/sccs.png" alt="sccs Plot">
+            <a href="./plots/sccs.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/sccs.png?version=cc-main-2025-feb-mar-apr" alt="sccs Plot">
             </a>
             <p>The total number of strongly connected components (SCCs) in the graph. SCCs are subgraphs in which every node is reachable from every other node within the subgraph.</p>
         </div>
@@ -103983,8 +103983,8 @@ <h4 id="sccs">
             <h4 id="maxsccsize">
                 <a href="#maxsccsize">maxsccsize</a>
             </h4>
-            <a href="./plots/maxsccsize.png" target="_blank">
-                <img src="./plots/maxsccsize.png" alt="maxsccsize Plot">
+            <a href="./plots/maxsccsize.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/maxsccsize.png?version=cc-main-2025-feb-mar-apr" alt="maxsccsize Plot">
             </a>
             <p>The size (number of nodes) of the largest strongly connected component (SCC) in the graph. This indicates the largest cluster of nodes that are mutually reachable.</p>
         </div>
@@ -103993,8 +103993,8 @@ <h4 id="maxsccsize">
             <h4 id="percmaxscc">
                 <a href="#percmaxscc">percmaxscc</a>
             </h4>
-            <a href="./plots/percmaxscc.png" target="_blank">
-                <img src="./plots/percmaxscc.png" alt="percmaxscc Plot">
+            <a href="./plots/percmaxscc.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/percmaxscc.png?version=cc-main-2025-feb-mar-apr" alt="percmaxscc Plot">
             </a>
             <p>The percentage of nodes in the graph that belong to the largest strongly connected component (SCC). It shows how dominant the largest SCC is in the overall graph.</p>
         </div>
@@ -104003,8 +104003,8 @@ <h4 id="percmaxscc">
             <h4 id="percminscc">
                 <a href="#percminscc">percminscc</a>
             </h4>
-            <a href="./plots/percminscc.png" target="_blank">
-                <img src="./plots/percminscc.png" alt="percminscc Plot">
+            <a href="./plots/percminscc.png?version=cc-main-2025-feb-mar-apr" target="_blank">
+                <img src="./plots/percminscc.png?version=cc-main-2025-feb-mar-apr" alt="percminscc Plot">
             </a>
             <p>The percentage of nodes in the graph that belong to the smallest strongly connected components (SCCs) (typically isolated nodes or trivial SCCs). This indicates the prevalence of disconnected or minimally connected components.</p>
         </div>

src/build_webpage.py

@@ -48,7 +48,7 @@ def has_zero_signal(series):
     return series.nunique() <= 1
 
 
-def generate_plots(data):
+def generate_plots(data, latest_release):
     excluded = [
         'maxindegreenode',
         'maxoutdegreenode',
@@ -66,9 +66,10 @@ def generate_plots(data):
             if col not in ["release", "source"] and not has_comma_separated_values(data[col]) and not has_zero_signal(data[col]) and col not in excluded:
                 file_name = f"{col}.png"
                 file_path = f"../docs/plots/{file_name}"
+                html_file_name = f"{file_name}?version={latest_release}"
                 if args.no_plots and os.path.exists(file_path):
                     progress_bar.set_description(f"Using existing plot: {file_name}")
-                    plot_files.append((col, file_name))
+                    plot_files.append((col, html_file_name))
                 else:
                     progress_bar.set_description(f"Generating plot: {file_name}")
                     plot = (
@@ -138,12 +139,12 @@ def embed_file(file_path):
     categories=combined_data['release'].unique()
 )
 
-plot_files = generate_plots(combined_data)
-
 last_updated = datetime.datetime.now().strftime("%Y-%m-%d")
 latest_release = combined_data['release'].iloc[-1]
 latest_release_url = f"https://data.commoncrawl.org/projects/hyperlinkgraph/{latest_release}/index.html"
 
+plot_files = generate_plots(combined_data, latest_release)
+
 html_content = """
 <!DOCTYPE html>
 <html lang="en">
@@ -322,15 +323,16 @@ def embed_file(file_path):
 for col in descriptions.keys():
     file_name = f"{col}.png"
     file_path = f"../docs/plots/{file_name}"
+    html_file_name = f"{file_name}?version={latest_release}"
     description = descriptions.get(col, "No description available.")
     if os.path.exists(file_path):
         html_content += f"""
         <div class="chart-container">
             <h4 id="{col}">
                 <a href="#{col}">{col}</a>
             </h4>
-            <a href="./plots/{file_name}" target="_blank">
-                <img src="./plots/{file_name}" alt="{col} Plot">
+            <a href="./plots/{html_file_name}" target="_blank">
+                <img src="./plots/{html_file_name}" alt="{col} Plot">
             </a>
             <p>{description}</p>
         </div>