Index.html

ccd9494f · PRIOUX LEO-PAUL p2310373 · 86533c48 · ccd9494f
Commit ccd9494f authored 2 months ago by PRIOUX LEO-PAUL p2310373
--- a/index.html
+++ b/index.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <script src="https://d3js.org/d3.v7.min.js"></script>
+    <script src="matrixManagement.js"></script>
+    <style>
+      /* Ajoutez vos styles ici */
+      text {
+        font-size: 10px;
+        font-family: sans-serif;
+      }
+    </style>
+  </head>
+
+  <body>
+    <!-- Menu pour le ré-ordonnancement -->
+    <select id="order-menu" style="margin: 20px;">
+      <option value="appearance">Ordre d'apparence</option>
+      <option value="zones">Zones</option>
+      <option value="influence">Influence</option>
+    </select>
+
+    <!-- Div pour le SVG -->
+    <div id="visu-tp4"></div>
+
+    <script>
+      // Définition de la taille du SVG
+      const margin = { top: 150, right: 30, bottom: 20, left: 150 },
+        width = 960 - margin.left - margin.right,
+        height = 960 - margin.top - margin.bottom;
+
+      // Ajout du SVG
+      const svg = d3
+        .select("#visu-tp4")
+        .append("svg")
+        .attr("width", width + margin.left + margin.right)
+        .attr("height", height + margin.top + margin.bottom)
+        .append("g")
+        .attr("transform", `translate(${margin.left},${margin.top})`);
+
+      // Chargement des données JSON
+      d3.json("got_social_graph.json")
+        .then(function (graph) {
+          const nodes = graph.nodes;
+          const links = graph.links;
+
+          // Création de la matrice d'adjacence
+          const adjacencyMatrix = createAdjacencyMatrix(nodes, links, undefined, true);
+
+          // Dimensions des cellules
+          const cellSize = height / nodes.length;
+
+          // Échelle pour positionner les personnages
+          const echellexy = d3
+            .scaleBand()
+            .domain(d3.range(nodes.length))
+            .range([0, height])
+            .paddingInner(0.1);
+
+          // Échelle pour les zones (couleurs)
+          const zoneScale = d3.scaleOrdinal(d3.schemeCategory10);
+
+          // Dessin de la matrice
+          const matrixViz = svg
+            .selectAll("rect")
+            .data(adjacencyMatrix)
+            .join("rect")
+            .attr("width", cellSize)
+            .attr("height", cellSize)
+            .attr("x", (d) => echellexy(d.x))
+            .attr("y", (d) => echellexy(d.y))
+            .style("fill", (d) => (d.zone_s === d.zone_t ? zoneScale(d.zone_s) : "#eee"))
+            .style("opacity", (d) => (d.weight * 10 ) / d3.max(links, (d) => d.weight));
+
+          // Dessin des labels des colonnes (axe X, rotation corrigée)
+          const columnLabels = svg
+            .append("g")
+            .selectAll("text")
+            .data(nodes)
+            .join("text")
+            .attr("x", (d, i) => echellexy(i) + echellexy.bandwidth() / 2)
+            .attr("y", -25)
+            .attr("transform", (d, i) => `rotate(-90,${echellexy(i) + echellexy.bandwidth() / 2}, -25)`)
+            .style("text-anchor", "start")
+            .text((d) => d.character);
+
+          // Dessin des labels des lignes (axe Y)
+          const rowLabels = svg
+            .append("g")
+            .selectAll("text")
+            .data(nodes)
+            .join("text")
+            .attr("x", -10)
+            .attr("y", (d, i) => echellexy(i) + echellexy.bandwidth() / 2)
+            .style("text-anchor", "end")
+            .text((d) => d.character);
+
+          // Ré-ordonnancement
+          const orders = {
+            appearance: d3.range(nodes.length),
+            zones: nodes
+              .map((d, i) => ({ index: i, zone: d.zone }))
+              .sort((a, b) => a.zone - b.zone)
+              .map((d) => d.index),
+            influence: nodes
+              .map((d, i) => ({ index: i, influence: d.influence }))
+              .sort((a, b) => b.influence - a.influence)
+              .map((d) => d.index),
+          };
+
+          function update(orderKey) {
+            const newOrder = orders[orderKey];
+            echellexy.domain(newOrder);
+
+            // Réordonner les cellules
+            matrixViz
+              .transition()
+              .duration(1000)
+              .attr("x", (d) => echellexy(d.x))
+              .attr("y", (d) => echellexy(d.y));
+
+            // Réordonner les labels des colonnes
+            columnLabels
+              .data(newOrder.map((i) => nodes[i]))
+              .transition()
+              .duration(1000)
+              .attr("x", (d, i) => echellexy(i) + echellexy.bandwidth() / 2)
+              .attr("transform", (d, i) => `rotate(-90,${echellexy(i) + echellexy.bandwidth() / 2}, -25)`);
+
+
+            // Réordonner les labels des lignes
+            rowLabels
+              .data(newOrder.map((i) => nodes[i]))
+              .transition()
+              .duration(1000)
+              .attr("y", (d, i) => echellexy(i) + echellexy.bandwidth() / 2);
+          }
+
+          // Gestion du changement d'ordre via le menu
+          d3.select("#order-menu").on("change", function () {
+            const selectedOrder = d3.select(this).property("value");
+            update(selectedOrder);
+          });
+        })
+        .catch(function (error) {
+          console.error("Erreur lors du chargement des données :", error);
+        });
+    </script>
+  </body>
+</html>