Skip to content
Snippets Groups Projects
Commit ccd9494f authored by PRIOUX LEO-PAUL p2310373's avatar PRIOUX LEO-PAUL p2310373
Browse files

Index.html

parent 86533c48
No related branches found
No related tags found
No related merge requests found
<!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>
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment