Spaces:
Running
Running
| <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> | |
| <style> | |
| /* Make the chart responsive */ | |
| #main { | |
| width: 100%; | |
| max-width: 1200px; | |
| height: 100vh; | |
| max-height: 800px; | |
| margin: 5cm auto 0 auto; | |
| transform: scale(0.8); | |
| transform-origin: top left; | |
| } | |
| /* Adjust scaling for smaller screens */ | |
| @media (max-width: 768px) { | |
| #main { | |
| transform: scale(0.6); | |
| } | |
| } | |
| </style> | |
| </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'); | |
| if (myChart){ | |
| myChart.dispose() | |
| } | |
| var myChart = echarts.init(chartDom); | |
| // window.addEventListener('resize', function() { | |
| // myChart.resize(); | |
| myChart.showLoading(); | |
| $.getJSON('/echarts-5.5.0-rc.2/dist/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": "#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 = 126; | |
| 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> | |