Spaces:

awacke1
/

Interactive-Treemap-File-Visualizer

Running

App Files Files Community

awacke1 commited on 11 days ago

Commit

c8ee83b

verified ·

1 Parent(s): 5d74c00

Update index.html

Browse files

Files changed (1) hide show

index.html +103 -1

index.html CHANGED Viewed

@@ -219,6 +219,40 @@ Tiling heuristics and evaluation metrics for treemaps with a target node aspect
             background-color: #bdc3c7;
         }
     </style>
 </head>
 <body>
@@ -247,6 +281,8 @@ Tiling heuristics and evaluation metrics for treemaps with a target node aspect
         </div>
     </div>
     <!-- D3.js Library for data visualization -->
     <script src="https://d3js.org/d3.v7.min.js"></script>
@@ -259,10 +295,76 @@ Tiling heuristics and evaluation metrics for treemaps with a target node aspect
             const tooltip = document.getElementById('tooltip');
             const contextMenu = document.getElementById('context-menu');
             const deleteModal = document.getElementById('delete-modal');
             let currentFileTree = null; // To store the current data structure for modification
             let nodeToDelete = null; // To store the node targeted for deletion
             /**
              * Processes the selected files and initiates the treemap rendering.
              */
@@ -466,4 +568,4 @@ Tiling heuristics and evaluation metrics for treemaps with a target node aspect
     </script>
 </body>
-</html>

             background-color: #bdc3c7;
         }
+        /* References Section Styling */
+        #references {
+            max-width: 800px;
+            margin: 2rem auto;
+            text-align: left;
+        }
+        #references h2 {
+            color: #2c3e50;
+            font-size: 1.5rem;
+            margin-bottom: 1rem;
+        }
+        #references ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        #references li {
+            margin-bottom: 1rem;
+            color: #555;
+        }
+        #references a {
+            color: #3498db;
+            text-decoration: none;
+            transition: color 0.2s ease;
+        }
+        #references a:hover {
+            color: #2980b9;
+            text-decoration: underline;
+        }
     </style>
 </head>
 <body>
         </div>
     </div>
+    <!-- References Section -->
+    <div id="references"></div>
     <!-- D3.js Library for data visualization -->
     <script src="https://d3js.org/d3.v7.min.js"></script>
             const tooltip = document.getElementById('tooltip');
             const contextMenu = document.getElementById('context-menu');
             const deleteModal = document.getElementById('delete-modal');
+            const referencesContainer = document.getElementById('references');
             let currentFileTree = null; // To store the current data structure for modification
             let nodeToDelete = null; // To store the node targeted for deletion
+            // References data
+            const references = [
+                {
+                    title: "A heuristic extending the Squarified treemapping algorithm",
+                    links: [
+                        { text: "Abstract", url: "https://arxiv.org/abs/1609.00754" },
+                        { text: "PDF", url: "https://arxiv.org/pdf/1609.00754" }
+                    ]
+                },
+                {
+                    title: "Squarified Treemaps",
+                    links: [{ text: "PDF", url: "https://vanwijk.win.tue.nl/stm.pdf" }]
+                },
+                {
+                    title: "Treemaps with Bounded Aspect Ratio",
+                    links: [
+                        { text: "Abstract", url: "https://arxiv.org/abs/1012.1749" },
+                        { text: "PDF", url: "https://arxiv.org/pdf/1012.1749" }
+                    ]
+                },
+                {
+                    title: "Interactive Visualisation of Hierarchical Quantitative Data: an Evaluation",
+                    links: [
+                        { text: "Abstract", url: "https://www.arxiv.org/abs/1908.01277v1" },
+                        { text: "PDF", url: "https://www.arxiv.org/pdf/1908.01277v1" }
+                    ]
+                },
+                {
+                    title: "Treemapping - Wikipedia",
+                    links: [{ text: "Article", url: "https://en.wikipedia.org/wiki/Treemapping" }]
+                },
+                {
+                    title: "A Novel Algorithm for Real-time Procedural Generation of Building Floor Plans",
+                    links: [{ text: "HTML", url: "https://ar5iv.labs.arxiv.org/html/1211.5842" }]
+                },
+                {
+                    title: "Fat Polygonal Partitions with Applications to Visualization and Embeddings",
+                    links: [
+                        { text: "Abstract", url: "https://arxiv.org/abs/1009.1866" },
+                        { text: "PDF", url: "https://arxiv.org/pdf/1009.1866" }
+                    ]
+                },
+                {
+                    title: "Tiling heuristics and evaluation metrics for treemaps with a target node aspect ratio",
+                    links: [{ text: "PDF", url: "https://www.diva-portal.org/smash/get/diva2:1129639/FULLTEXT01.pdf" }]
+                }
+            ];
+            // Render references
+            function renderReferences() {
+                referencesContainer.innerHTML = `
+                    <h2>References</h2>
+                    <ul>
+                        ${references.map(ref => `
+                            <li>
+                                ${ref.title}:
+                                ${ref.links.map(link => `<a href="${link.url}" target="_blank">${link.text}</a>`).join(' | ')}
+                            </li>
+                        `).join('')}
+                    </ul>
+                `;
+            }
+            renderReferences();
             /**
              * Processes the selected files and initiates the treemap rendering.
              */
     </script>
 </body>
+</html>