DIOD Viewer Tool
DIOD Timeline Viewer
Qu'est-ce que c'est ?
DIOD Timeline Viewer est un outil web de visualisation comparative des opérations d'influence numérique documentées avec le DIOD Input Tool. Il permet aux analystes et chercheurs de superposer plusieurs incidents sur une même frise chronologique et d'en comparer les structures.
Le principe : L'outil lit les fiches JSON produites par le DIOD Input Tool et les affiche sous forme de swimlanes parallèles. Chaque ligne correspond à une opération. L'approche reste centrée sur les incidents observables, conformément à la méthodologie M82_project.
L'outil mobilise les mêmes cadres analytiques que le DIOD Input Tool :
- Le Diamond Model affiche les 4 dimensions de chaque opération (Adversaire, Infrastructure, Capacités, Cible) sous forme de diagramme SVG
- Le framework DISARM et la méthodologie DIMA sont représentés dans une matrice de comparaison croisée entre opérations
Point important : DIOD Timeline Viewer est un fichier HTML autonome. Aucune installation requise, aucun compte à créer, aucune donnée n'est envoyée sur un serveur. Tout fonctionne directement dans votre navigateur.
Version actuelle : v1.0 — Lien : Accéder à l'outil
Pourquoi utiliser cet outil ?
Comparaison multi-incidents
Visualisez jusqu'à 20 opérations simultanément sur une frise chronologique commune. Identifiez les chevauchements temporels, les séquences d'événements et les patterns récurrents entre incidents.
Filtrage et recherche
Filtrez les opérations par pays d'origine, type d'attaquant, technique DISARM ou statut. La recherche textuelle couvre les labels, événements, narratifs et mots-clés.
Visualisation Diamond Model comparative
Le panneau Diamond Model affiche toutes les opérations filtrées côte à côte sous forme de cartes SVG. Comparez en un coup d'œil les adversaires, cibles, infrastructures et capacités.
Matrice de techniques
Le panneau Matrice croise techniques DISARM ou DIMA avec les opérations chargées. Les points colorés indiquent quelles techniques sont partagées entre plusieurs incidents.
Jalons contextuels
Ajoutez des jalons datés (élections, publications, événements géopolitiques) superposés à la timeline pour contextualiser les opérations.
Outil évolutif
L'outil s'améliore grâce aux retours des utilisateurs. Vous pouvez proposer de nouvelles fonctionnalités ou de nouveaux champs selon vos besoins terrain.
Comment ça fonctionne ?
L'outil se compose de 6 fonctionnalités principales accessibles depuis la barre d'outils :
📥 Importer des données
Deux modes d'import sont disponibles :
Import fichier local :
- Glisser-déposer un ou plusieurs fichiers JSON sur la zone d'import
- Ou cliquer pour parcourir et sélectionner les fichiers
- Formats acceptés : fichiers .json générés par le DIOD Input Tool (v7.0+)
- Limite : 20 opérations simultanées, 10 Mo par fichier
- En cas de doublon (même code_operation), une confirmation de remplacement est proposée
Import depuis un dépôt Git :
- Saisir l'URL brute d'un fichier JSON hébergé sur GitHub ou GitLab
- Domaines autorisés : raw.githubusercontent.com, gitlab.com
- Timeout automatique après 10 secondes
- L'URL source est tracée et affichée dans la fiche de l'opération
🕐 Timeline comparative
La zone centrale affiche les opérations sous forme de swimlanes horizontales :
Lanes (lignes d'opération) :
- Chaque opération occupe une lane colorée (8 couleurs distinctes, rotation automatique)
- La barre d'activité matérialise la durée de l'opération (date_debut → date_fin ou date du dernier événement)
- Les opérations sans date de fin sont affichées comme en cours jusqu'à la date du dernier événement documenté
- Réorganisation par glisser-déposer pour modifier l'ordre d'affichage
Marqueurs d'événements :
- Chaque événement de la chronologie est représenté par un point sur la lane
- Cercle plein : observation, détection, publication, action
- Cercle vide : fin d'incident, analyse, attribution
- Au survol : bulle d'information avec date, description et label de l'événement
- Au clic : modale de détail avec navigation précédent / suivant entre les événements
Axe temporel :
- Graduation automatique selon la durée totale des opérations chargées (jours, semaines, quinzaines, mois, bimestres)
- Alignement sur les lundis pour les intervalles hebdomadaires, sur le 1er et 15 du mois pour les intervalles plus longs
Jalons :
- Lignes verticales datées superposées à toutes les lanes
- Couleur et label personnalisables
- Ajout et suppression depuis le panneau Jalons
🔍 Filtres et zoom
La barre de filtres permet de restreindre les opérations affichées :
- Filtre par pays d'origine de l'attaquant
- Filtre par type d'attaquant
- Filtre par technique DISARM (premier code détecté par opération)
- Filtre par statut (en cours, terminée, en analyse, archivée)
- Recherche textuelle libre (labels, événements, narratifs, mots-clés)
- Zoom temporel : restreindre la plage affichée avec des dates de début et fin
- Chips de filtres actifs : affichage et suppression individuelle
- Compteur opérations visibles / total chargé
- Bouton Reset pour réinitialiser tous les filtres en un clic
🔷 Diamond Model
Le panneau Diamond Model s'ouvre depuis la barre d'outils :
- Affichage de toutes les opérations filtrées en cartes SVG côte à côte
- Chaque carte contient le diagramme complet avec les 4 sommets : Adversaire (haut), Cible (bas), Infrastructure (gauche), Capacités (droite)
- Bordure supérieure colorée selon la couleur de l'opération dans la timeline
- Code de l'opération affiché en titre au-dessus du diagramme
- Scroll horizontal automatique si le nombre de cartes dépasse la largeur disponible
- Les textes longs sont découpés intelligemment sur plusieurs lignes (max 3 lignes par sommet)
📊 Matrice de techniques
Le panneau Matrice s'ouvre depuis la barre d'outils :
- Deux onglets : DISARM et DIMA
- Lignes : techniques identifiées dans au moins une des opérations chargées
- Colonnes : opérations (code_operation), avec en-tête coloré selon la palette de la timeline
- Point coloré : la technique est documentée dans cette opération
- Case vide : technique absente de cette opération
- En-têtes de colonnes pivotés verticalement si plus de 4 opérations (gain de place)
- Scroll horizontal automatique pour les grandes matrices
📷 Export PNG
Le bouton Export PNG dans la barre d'outils déclenche la capture de la zone timeline :
- Capture de la timeline complète (toutes les lanes visibles, axe temporel, jalons)
- Résolution doublée (scale 2x) pour une qualité optimale
- Fond sombre préservé (#0F1419)
- Téléchargement automatique au format PNG avec nom horodaté (DIOD-Timeline-AAAA-MM-JJ.png)
- Toast de confirmation à la fin de l'export
Panneau de détail d'une opération
Un clic sur une carte de détail (zone sous la timeline) ouvre la modale complète de l'opération :
- En-tête coloré avec code, statut, dates, attribution et badge source (Local / Git)
- Lien cliquable vers la source Git si l'opération a été importée depuis un dépôt
- Bouton d'accès direct au DIOD Input Tool
- Sections structurées selon le Diamond Model :
- Adversaire(s) : nom, type, pays, niveau d'attribution, rôle, description
- Cible(s) : pays, région, type de cible, description
- Infrastructure : canaux de diffusion et relais avec ampleur et rôle
- Capacités : techniques DISARM et DIMA sous forme de badges cliquables avec description
- Sections complémentaires : Objectifs, Narratifs (avec véracité et thèmes), Leviers psychologiques, Chronologie complète, Formats de contenu, Documents et sources, Mots-clés, Commentaires
- Fermeture par clic sur le fond, bouton X ou touche Échap
Sécurité
L'outil applique les mêmes mesures de sécurité que le DIOD Input Tool v7.0 :
- Sanitization des données importées : validation de schéma strict, extraction de texte pur via DOMParser, regex de fallback renforcée, encodage des 5 entités HTML critiques
- Validation des dates : regex ISO 8601 stricte avec vérification des bornes (mois, jours, années 1900-2100)
- Protection prototype pollution : clés interdites (__proto__, constructor, prototype)
- Validation des URL Git : protocole HTTPS obligatoire, liste blanche de domaines, extension .json requise
- Content Security Policy (CSP) : politique stricte, sans trusted-types (incompatible html2canvas)
- Anti-clickjacking : détection d'iframe et blocage immédiat
- Vérification d'intégrité des CDN : hash SRI sur React 18.3.1 et ReactDOM 18.3.1 ; vérification runtime pour Tailwind (JIT, incompatible SRI par design)
- Limites de charge : 20 opérations maximum, 10 Mo par fichier, 100 éléments par tableau, 20 jalons maximum
- Error Boundary React : capture des erreurs de rendu avec affichage d'un message informatif et bouton de rechargement
Compatibilité
- Navigateurs modernes : Chrome, Firefox, Safari, Edge (versions récentes)
- Aucune installation, aucun serveur, aucun backend
- Données conservées uniquement en mémoire vive pendant la session — aucune persistance locale ni envoi réseau (hors import Git)
- Interface disponible en français et en anglais (bascule depuis la barre d'outils)
Liens utiles
Généré par DIOD — Digital Influence Operations Database — M82_project