Spaces:

ABC-climate
/

LoCs

Running

App Files Files Community

ZoeDuan commited on Oct 2

Commit

4290f65

•

1 Parent(s): 3157746

Update index.html

Browse files

Files changed (1) hide show

index.html +166 -18

index.html CHANGED Viewed

@@ -1,19 +1,167 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>ABC LoCs</title>
+  <!-- Include ECharts library -->
+  <script src="https://cdn.jsdelivr.net/npm/echarts@latest/dist/echarts.min.js"></script>
+  <!-- Include jQuery library -->
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+</head>
+<body>
+  <!-- Placeholder for the chart -->
+  <div id="main" style="width: 100%; height: fit-content; min-height: 800px;"></div>
+  <script>
+    var chartDom = document.getElementById('main');
+    var myChart = echarts.init(chartDom);
+    myChart.showLoading();
+    $.getJSON('data/output_echart.json')
+      .done(function (graph) {
+        myChart.hideLoading();
+        var functionNodes = graph.nodes.filter(node => node.category !== 0);
+        var organizationNodes = graph.nodes.filter(node => node.category === 0);
+        // Define colors for the functions matching those in the JSON
+        var functionColors = {
+          // "Data curation and hosting": "#5470c6",
+          // "Access to computational resources": "#fc8452",
+          // "Education and capacity building": "#fac858",
+          // "Field Data Collection": "#ee6666",
+          // "Global Research Collaboration": "#73c0de",
+          // "Inclusive community building and engagement": "#3ba272",
+          // "Tech transfer and open-source tools development": "#9a60b4"
+          "Data curation and hosting": "#7f3c8d",
+          "Access to computational resources": "#11a579",
+          "Education and capacity building": "#3969ac",
+          "Field Data Collection": "#f2b701",
+          "Global Research Collaboration": "#e73f74",
+          "Inclusive community building and engagement": "#80ba5a",
+          "Tech transfer and open-source tools development": "#e68310"
+        };
+        functionNodes.forEach((node, index) => {
+          node.x = Math.cos(2 * Math.PI * index / functionNodes.length) * 400;
+          node.y = Math.sin(2 * Math.PI * index / functionNodes.length) * 400;
+          node.symbolSize = 125;
+          node.itemStyle = { color: functionColors[node.name] };
+          var verticalPadding = node.y / 2 ;
+          var paddingRight = node.y >= 0 ? node.symbolSize : 0-node.symbolSize;
+          node.symbol = node.value;
+          node.label = {
+            show: true,
+            rotate: false,
+            position: 'inside',
+            align: 'center',
+            verticalAlign: 'middle',
+            // backgroundColor: '#000',
+            rotate: false,
+            padding: [0, paddingRight, 0, 0],
+            fontweight: 'bold',
+            fontSize: 12,
+            color: '#fff',
+            formatter: function(params) {
+              var name = params.data.name;
+              return wrapText(name, 15);  // Handle text wrapping
+            }
+            // formatter: '{b}'
+          };
+        });
+        organizationNodes.forEach((node, index) => {
+          node.x = Math.cos(2 * Math.PI * index / organizationNodes.length) * 500;
+          node.y = Math.sin(2 * Math.PI * index / organizationNodes.length) * 500;
+          node.symbolSize = 5;
+          node.itemStyle = { color: '#000' };
+          node.label = {
+            show: true,
+            fontSize: 10,
+            color: '#000',
+            formatter: function(params) {
+            var name = params.data.name;
+            return wrapText(name, 50);
+            }
+          };
+        });
+        function wrapText(text, maxLength) {
+          var words = text.split(' ');
+          var lines = [];
+          var currentLine = '';
+          words.forEach(function(word) {
+            if (currentLine.length + word.length <= maxLength) {
+              currentLine += (currentLine ? ' ' : '') + word;
+            } else {
+              lines.push(currentLine);
+              currentLine = word;
+            }
+          });
+          lines.push(currentLine);
+          return lines.join('\n');
+        }
+        var option = {
+          tooltip: {
+            trigger: 'item',
+            formatter: function (params) {
+              return params.name;
+            }
+          },
+          animationDuration: 1500,
+          animationEasingUpdate: 'quinticInOut',
+          series: [
+            {
+              name: 'ABC LoCs',
+              type: 'graph',
+              layout: 'circular',
+              data: functionNodes.concat(organizationNodes),
+              links: graph.links.map(link => ({
+                ...link,
+                lineStyle: {
+                  color: functionColors[link.target] || '#ccc',
+                  width: 1,
+                  curveness: 0.3
+                }
+              })),
+              circular: {
+                rotateLabel: true
+              },
+              roam: false,
+              draggable: true,
+              labelLayout: {
+                hideOverlap: true
+              },
+              lineStyle: {
+                curveness: 0.2,
+                width: 1
+              },
+              emphasis: {
+                focus: 'adjacency',
+                lineStyle: {
+                  width: 2
+                }
+              }
+            }
+          ]
+        };
+        // Apply the updated option to the chart
+        myChart.setOption(option);
+      })
+      .fail(function (jqxhr, textStatus, error) {
+        var err = textStatus + ", " + error;
+        console.log("Request Failed: " + err);
+        chartDom.innerHTML = "Failed to load data: " + err;
+      });
+  </script>
+</body>
 </html>