Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Design Flow Sankey Diagram</title> | |
| <script src="https://cdn.plot.ly/plotly-latest.min.js"></script> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <h1 class="text-3xl font-bold text-center mb-8">AI Design Flow Visualization</h1> | |
| <div id="sankeyChart" class="bg-white p-4 rounded-lg shadow-lg"></div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const data = { | |
| type: "sankey", | |
| orientation: "h", | |
| node: { | |
| pad: 15, | |
| thickness: 30, | |
| line: { | |
| color: "black", | |
| width: 0.5 | |
| }, | |
| label: [ | |
| "Design", "Design Strategy", "Advanced Dessign", "Realisation", "PMO", "Finance", | |
| "CAS", "Visualisation", "Studio Engineering", "CMF", "Model Making", | |
| "Multimodal", "Image Synthesis", "3d", "Other", "NLP", "Computer Vision", | |
| "Audio to Text", "Visual Question Answering", "Text to Image", "Image to Image", | |
| "Image to text", "Text to 3d", "Image to 3D", "NERF / GS", "Table or Graph or Dashboards", | |
| "Deep Research", "Text Generation", "Summerisation", "Text Classification", | |
| "Coding / Software development", "Text to Speech", "Q&A", "Image Classification" | |
| ], | |
| color: [ | |
| "#636EFA", "#EF553B", "#00CC96", "#AB63FA", "#FFA15A", "#19D3F3", | |
| "#FF6692", "#B6E880", "#FF97FF", "#FECB52", "#1F77B4", | |
| "#FF7F0E", "#2CA02C", "#D62728", "#9467BD", "#8C564B", "#E377C2", | |
| "#7F7F7F", "#BCBD22", "#17BECF", "#9EDAE5", "#8C6D31", "#5254A3", | |
| "#6BAED6", "#9ECAE1", "#637939", "#8CA252", "#B5CF6B", "#CEDB9C", | |
| "#8C6D31", "#BD9E39", "#E7BA52", "#E7CB94", "#843C39" | |
| ] | |
| }, | |
| link: { | |
| source: [ | |
| 0,0,0,0,0,0,0,0,0, | |
| 1,1,1,1,1,1,1,1,1,1,1,1,1, | |
| 2,2,2,2,2,2, | |
| 3,3,3,3,3,3,3,3, | |
| 4,4,4, | |
| 5,5,5,5, | |
| 6,6,6, | |
| 7,7,7,7, | |
| 8,8,8,8,8,8, | |
| 9,9,9,9,9,9,9,9,9,9, | |
| 10,10,10,10,10,10,10,10,10 | |
| ], | |
| target: [ | |
| 1,2,3,4,5,6,7,8,9, | |
| 11,11,12,12,12,13,13,11,11,11,11,11,11, | |
| 12,11,11,13,13,13, | |
| 12,11,11,13,13,13,13,13, | |
| 11,11,14, | |
| 11,14,14,14, | |
| 12,13,13, | |
| 13,13,13,13, | |
| 14,14,13,13,13,13, | |
| 11,12,12,12,15,14,14,14,14,14, | |
| 12,13,15,14,14,13,13,13,13 | |
| ], | |
| value: [ | |
| 1,1,1,1,1,1,1,1,1, | |
| 1,6,1,1,1,1,1,1,1,1,1,1,1, | |
| 1,1,1,1,1,1, | |
| 1,1,1,1,1,1,1,1, | |
| 1,1,1, | |
| 1,1,1,1, | |
| 1,1,1, | |
| 1,1,1,1, | |
| 1,1,1,1,1,1, | |
| 1,1,1,1,1,1,1,1,1,1, | |
| 1,1,1,1,1,1,1,1,1 | |
| ] | |
| } | |
| }; | |
| const layout = { | |
| title: "AI Tools Usage Across Design Departments", | |
| font: { | |
| size: 10 | |
| }, | |
| margin: { | |
| t: 50, | |
| l: 50, | |
| r: 50, | |
| b: 50 | |
| } | |
| }; | |
| Plotly.newPlot('sankeyChart', [data], layout); | |
| }); | |
| </script> | |
| </body> | |
| </html> |