inital commit

src/main.ts

@@ -0,0 +1,94 @@
+import './style.css'
+import Graph from "https://esm.sh/graphology";
+import Sigma from "https://esm.sh/sigma";
+import forceAtlas2 from "https://esm.sh/graphology-layout-forceatlas2";
+
+// --- Génération de données de base ---
+const graph = new Graph();
+
+const N = 30;
+const colors = ["#ec635e", "#61afef", "#2c3029ff", "#e5c07b"];
+for (let i = 0; i < N; i++) {
+  const sex = Math.random() < 0.5 ? "F" : "M";
+  const education = Math.floor(Math.random() * 4);
+  const color = colors[education];
+  graph.addNode(`n${i}`, {
+    x: i, y: i,
+    label: `${sex}${i}`,
+    sex,
+    education,
+    size: 6 + education,
+    color,
+  });
+}
+
+// --- Ajout de quelques liens initiaux ---
+for (let i = 0; i < N * 1.5; i++) {
+  const a = `n${Math.floor(Math.random() * N)}`;
+  const b = `n${Math.floor(Math.random() * N)}`;
+  if (a !== b && !graph.hasEdge(a, b)) {
+    graph.addEdge(a, b, { color: "#aaa", size: 1 });
+  }
+}
+
+
+// With settings:
+const positions = forceAtlas2(graph, {
+  iterations: 50,
+  settings: {
+    gravity: 10
+  }
+});
+
+// --- Placement automatique avec ForceAtlas2 ---
+//forceAtlas2.assign(graph);
+
+// --- Rendu Sigma ---
+const container = document.getElementById("app");
+const renderer = new Sigma(graph, container, { renderLabels: true });
+
+// --- Fonctions dynamiques ---
+function addLink(source, target) {
+  if (!graph.hasEdge(source, target)) {
+    graph.addEdge(source, target, { color: "#666" });
+    renderer.refresh();
+  }
+}
+
+function removeLink(source, target) {
+  if (graph.hasEdge(source, target)) {
+    graph.dropEdge(source, target);
+    renderer.refresh();
+  }
+}
+
+// --- Exemple d’évolution dynamique ---
+setTimeout(() => addLink("n0", "n5"), 3000);
+setTimeout(() => removeLink("n1", "n2"), 6000);
+
+console.log("Graph loaded:", graph.order, "nodes,", graph.size, "edges");
+
+//import typescriptLogo from './typescript.svg'
+//import viteLogo from '/vite.svg'
+//import { setupCounter } from './counter.ts'
+/*
+document.querySelector<HTMLDivElement>('#app')!.innerHTML = `
+  <div>
+    <a href="https://vite.dev" target="_blank">
+      <img src="${viteLogo}" class="logo" alt="Vite logo" />
+    </a>
+    <a href="https://www.typescriptlang.org/" target="_blank">
+      <img src="${typescriptLogo}" class="logo vanilla" alt="TypeScript logo" />
+    </a>
+    <h1>Vite + TypeScript</h1>
+    <div class="card">
+      <button id="counter" type="button"></button>
+    </div>
+    <p class="read-the-docs">
+      Click on the Vite and TypeScript logos to learn more
+    </p>
+  </div>
+`
+
+setupCounter(document.querySelector<HTMLButtonElement>('#counter')!)
+*/

src/style.css

@@ -0,0 +1,95 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  background: white
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.vanilla:hover {
+  filter: drop-shadow(0 0 2em #3178c6aa);
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}