Added code and data for compressed layouts, new layout of large NLP cluster, and additional information

.gitattributes

@@ -35,3 +35,5 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
 modalities_data.json filter=lfs diff=lfs merge=lfs -text
 large_nlp_data.json filter=lfs diff=lfs merge=lfs -text
+compressed_large_nlp_data.json.gz filter=lfs diff=lfs merge=lfs -text
+compressed_modalities_data.json.gz filter=lfs diff=lfs merge=lfs -text

compressed_large_nlp_data.json.gz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2eda736f8882384558fc4abd089efb4092d122114e455290c0e7aa3df796982b
+size 17696866

compressed_modalities_data.json.gz

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b75bf9487d0126f7bbd685baffdfbaeef0f3d9155adb67e501693a4c24a502e
+size 2493363

config.json

@@ -1,15 +1,15 @@
 {
   "type": "network",
   "version": "1.0",
-  "data": "modalities_data.json",
+  "data": "compressed_modalities_data.json.gz",
   "logo": {
     "file": "",
     "link": "",
     "text": "Test"
   },
   "text": {
-    "more": "More",
-    "intro": "A model atlas for a small region of Hugging Face. The model atlas was introduced in the paper \"Charting and Navigating Hugging Face's Model Atlas\". <br><br> For more details see <a href=\"https://horwitz.ai/model-atlas\" target=\"_blank\">horwitz.ai/model-atlas</a>. <br><br><br> Note: This visualizes a very small part of Hugging Face, more maps coming soon... <br><br><br> Note: this is an alpha version, many features are missing including edge arrows and node borders, they will be added in a future version.",
+    "more": "<p><strong>Note:</strong> This visualizes a very small part of Hugging Face, more maps coming soon...</p> <br><br><br> <p><strong>Note:</strong> this is an alpha version, loading can take a bit of time and many features are missing including edge arrows and node borders, they will be added in a future version.</p> <br><br><br>     <h2 class=\"title\">BibTeX</h2><p>If you use this model atlas in your research or work, please cite our paper: </p><br><pre><code>@misc{horwitz2025chartingnavigatinghuggingfaces, <br>title={Charting and Navigating Hugging Face's Model Atlas}, <br>author={Eliahu Horwitz and Nitzan Kurer and Jonathan Kahana and Liel Amar and Yedid Hoshen}, <br>year={2025}, <br>eprint={2503.10633}, <br>archivePrefix={arXiv}, <br>primaryClass={cs.LG}, <br>url={https://arxiv.org/abs/2503.10633},<br>}</code></pre>",
+    "intro": "A model atlas for a small region of Hugging Face. The model atlas was introduced in the paper \"Charting and Navigating Hugging Face's Model Atlas\". <br><br> For more details see <a href=\"https://horwitz.ai/model-atlas\" target=\"_blank\">horwitz.ai/model-atlas</a>.<br><br><br>",
     "title": "Model Atlas"
   },
   "legend": {

index.html

@@ -15,7 +15,7 @@
   <script src="js/sigma/sigma.parseJson.js" type="text/javascript" language="javascript"></script>
   <script src="js/fancybox/jquery.fancybox.pack.js" type="text/javascript" language="javascript"></script>
   <script src="js/main.js" type="text/javascript" language="javascript"></script>
-
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/pako/2.0.4/pako.min.js"></script>
   <link rel="stylesheet" type="text/css" href="js/fancybox/jquery.fancybox.css"/>
   <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />
   <link rel="stylesheet" media="screen and (max-height: 770px)" href="css/tablet.css" />
@@ -32,6 +32,10 @@
     <div id="title"></div>
     <div id="titletext"></div>
     <div class="info cf">
+      <dl>
+        <dt class="moreinformation"></dt>
+        <dd class="line"><a href="#information" class="line fb">More about this visualisation</a></dd>
+      </dl>
     </div>
 <div id="legend">
 	<div class="box">

js/main.js

@@ -823,8 +823,8 @@ function AtlasSelector(a) {
 
 function getAvailableAtlases() {
   return [
-    { name: "Modalities Atlas", file: "modalities_data.json" },
-    { name: "Large NLP Atlas", file: "large_nlp_data.json" },
+    { name: "Modalities Atlas", file: "compressed_modalities_data.json.gz" },
+    { name: "Large NLP Atlas", file: "compressed_large_nlp_data.json.gz" },
   ];
 }
 

js/sigma/sigma.parseJson.js

@@ -1,28 +1,58 @@
-// Scott Hale (Oxford Internet Institute)
-// Requires sigma.js and jquery to be loaded
-// based on parseGexf from Mathieu Jacomy @ Sciences Po M�dialab & WebAtlas
+// // Scott Hale (Oxford Internet Institute)
+// // Requires sigma.js and jquery to be loaded
+// // based on parseGexf from Mathieu Jacomy @ Sciences Po M�dialab & WebAtlas
 
-sigma.publicPrototype.parseJson = function(jsonPath,callback) {
-	var sigmaInstance = this;
-	jQuery.getJSON(jsonPath, function(data) {
-		for (i=0; i<data.nodes.length; i++){
-			var id=data.nodes[i].id;
-			//window.NODE = data.nodes[i];//In the original, but not sure purpose
-			sigmaInstance.addNode(id,data.nodes[i]);
-		}
 
-		for(j=0; j<data.edges.length; j++){
-			var edgeNode = data.edges[j];
-
-			var source = edgeNode.source;
-			var target = edgeNode.target;
-			var label = edgeNode.label;
-			var eid = edgeNode.id;
-
-			sigmaInstance.addEdge(eid,source,target,edgeNode);
-		}
-		
-		if (callback) callback.call(this);//Trigger the data ready function
-	
-	});//end jquery getJSON function
-};//end sigma.parseJson function
+sigma.publicPrototype.parseJson = function(gzippedJsonPath, callback) {
+  var sigmaInstance = this;
+  
+  // Use XMLHttpRequest for binary data
+  var xhr = new XMLHttpRequest();
+  xhr.open('GET', gzippedJsonPath, true);
+  xhr.responseType = 'arraybuffer';
+  
+  xhr.onload = function() {
+    if (xhr.status === 200) {
+      try {
+        // Decompress the gzipped data using pako
+        var inflatedData = pako.inflate(new Uint8Array(xhr.response));
+        
+        // Convert binary data to string
+        var jsonString = new TextDecoder('utf-8').decode(inflatedData);
+        
+        // Parse the JSON
+        var jsonData = JSON.parse(jsonString);
+        
+        // Process nodes
+        for (var i = 0; i < jsonData.nodes.length; i++) {
+          var id = jsonData.nodes[i].id;
+          sigmaInstance.addNode(id, jsonData.nodes[i]);
+        }
+        
+        // Process edges
+        for (var j = 0; j < jsonData.edges.length; j++) {
+          var edgeNode = jsonData.edges[j];
+          var source = edgeNode.source;
+          var target = edgeNode.target;
+          var label = edgeNode.label;
+          var eid = edgeNode.id;
+          
+          sigmaInstance.addEdge(eid, source, target, edgeNode);
+        }
+        
+        // Call the callback function if provided
+        if (callback) callback.call(sigmaInstance);
+      } catch (error) {
+        console.error("Error processing gzipped JSON:", error);
+      }
+    } else {
+      console.error("Error fetching gzipped JSON. Status:", xhr.status);
+    }
+  };
+  
+  xhr.onerror = function() {
+    console.error("Network error while fetching gzipped JSON");
+  };
+  
+  xhr.send();
+};