Ce composant permet de représenter, sous la forme d’un diagramme de Sankey, les parcours possibles des étudiants au cours de leur formation, de l’entrée dans l’enseignement supérieur jusqu’à la poursuite d’études ou à l’entrée dans la vie active.
Les flux sont représentés en pourcentage. La largeur des flux dans le diagramme est proportionnelle au pourcentage d’étudiants concerné.
Le diagramme peut être consulté à différents niveaux de détail : par défaut, il présente les flux tous domaines d’études confondus. Un clic sur un grand domaine d’études permet ensuite d’afficher les flux correspondant spécifiquement à ce domaine ainsi que les formations associées.
Prérequis
La mise en place du diagramme nécessite une modification du modèle de données (actuellement disponible dans la skin ODF orientation) :
- ajouter les attributs suivants à la table des diplômes (odf-enumeration.Degree) :
- Année de début (startYear – long) ;
- Durée (duration – long) ;
- créer une nouvelle table de référence Grand domaine d’étude (odf.enumeration.StudyField), contenant notamment un libellé, un code et un pictogramme ;
- ajouter l’attribut Grand domaine d’étude (studyField) aux formations.
Saisie
Pour configurer le diagramme, il est nécessaire :
- de définir les grands domaines d’études ;
- de renseigner les champs Année de début et Durée pour les types de diplômes qui doivent apparaître dans le diagramme ;
- de renseigner le Grand domaine d’étude pour chaque formation ;
- de décrire les flux d’étudiants dans le fichier WEB-INF/param/odf/program-flow.json.
Fichier program-flow.json
Le fichier program-flow.json décrit les différents parcours possibles et les pourcentages d’étudiants passant d’une formation à une autre.
La structure générale du fichier est la suivante :
{
"source": { "id": "...", "label": "..." },
"outcome": { "id": "...", "label": "..." },
"degrees": [
{
"id": "...",
"label": "...",
"entryPercent": 0,
"flows": [],
"fields": {}
}
]
}Source et destination finale
Les propriétés source et outcome définissent respectivement le point de départ et la destination finale des parcours.
- source correspond au niveau d’entrée dans le diagramme. Dans l’exemple, il s’agit du BAC.
- outcome correspond à la destination finale des parcours. Dans l’exemple, il s’agit de la Vie active.
Chaque objet possède :
- id : identifiant unique utilisé pour référencer le nœud dans les flux ;
- label : libellé affiché dans le diagramme.
Par exemple :
"source": { "id": "bac", "label": "BAC" },
"outcome": { "id": "outcome", "label": "Vie active" }Les diplômes
La propriété degrees contient la liste des diplômes représentés dans le diagramme.
Chaque diplôme possède les propriétés suivantes :
- id : code du diplôme. Cet identifiant est utilisé pour cibler ce diplôme dans les flux ;
- label : libellé affiché dans le diagramme ;
- entryPercent : pourcentage d’étudiants entrant dans ce diplôme ;
- flows : flux sortants du diplôme lorsqu’aucun grand domaine d’étude n’est sélectionné ;
- fields : flux détaillés par grand domaine d’étude.
Exemple
{
"id": "XA",
"label": "Licence",
"entryPercent": 68,
"flows": [
{ "target": "outcome", "percent": 77 },
{ "target": "DP", "percent": 1 },
{ "target": "XB", "percent": 10 }
],
"fields": { ... }
}Le pourcentage d’entrée (entryPercent)
entryPercent indique le pourcentage d’étudiants qui entrent dans le diplôme considéré.
Il est exprimé par rapport à l’ensemble des étudiants représentés dans le diagramme.
Par exemple :
"entryPercent": 68
indique que 68 % des étudiants entrent dans ce diplôme.
Les flux (flows)
La propriété flows décrit les orientations possibles des étudiants à partir d’un diplôme.
Chaque flux possède deux propriétés :
- target : code du diplôme ou de la destination vers lequel le flux est dirigé ;
- percent : pourcentage d’étudiants suivant ce flux.
Par exemple :
"flows": [
{ "target": "outcome", "percent": 77 },
{ "target": "DP", "percent": 1 },
{ "target": "XB", "percent": 10 }
]signifie que, parmi les étudiants concernés par ce diplôme :
- 77 % entrent dans la vie active ;
- 1 % poursuivent en DP (Licence professionnelle) ;
- 10 % poursuivent en XB (Master).
L’identifiant renseigné dans target doit correspondre au code d’un autre diplôme défini dans degrees, ou à l’id de outcome pour représenter une sortie vers la destination finale.
Les flux par grand domaine d’étude (fields)
La propriété fields permet de définir des flux différents pour chaque grand domaine d’étude.
La clé utilisée dans cet objet correspond au code du grand domaine d’étude défini dans la table de référence odf.enumeration.StudyField.
Chaque domaine possède :
- entryPercent : pourcentage d’étudiants entrant dans le diplôme pour ce domaine ;
- flows : flux sortants des étudiants de ce domaine.
Par exemple :
"fields": {
"SC": {
"entryPercent": 77,
"flows": [
{ "target": "outcome", "percent": 78 },
{ "target": "XB", "percent": 9 },
{ "target": "DP", "percent": 1 }
]
}
}Dans cet exemple, SC correspond au code d’un grand domaine d’étude. Pour ce domaine, 77 % des étudiants entrent dans le diplôme et leurs orientations sont ensuite réparties entre les différentes destinations indiquées dans flows.
Les flux définis dans fields sont utilisés lorsque l’utilisateur sélectionne un grand domaine d’étude dans le diagramme.
Flux généraux et flux par domaine
Pour chaque diplôme, deux niveaux de flux peuvent donc être définis :
- flows : flux généraux, utilisés lorsqu’aucun domaine d’étude n’est sélectionné ;
- fields.<code>.flows : flux spécifiques à un grand domaine d’étude, utilisés lorsque ce domaine est sélectionné.
Il est ainsi possible de représenter une répartition différente des parcours selon le domaine d’étude.
Exemple complet
L’exemple ci-dessous présente un fichier program-flow.json contenant plusieurs diplômes, leurs pourcentages d’entrée et leurs différents flux, ainsi que les flux spécifiques à certains grands domaines d’étude.
Télécharger le fichier «program-flow.json» (5.6 Ko)
Points d’attention
- Les identifiants utilisés dans target doivent correspondre à des id existants dans le fichier (degrees, source ou outcome).
- Les valeurs de percent et entryPercent sont exprimées en pourcentage et non en valeur décimale : 25 correspond à 25 %, et non à 0,25 %.
- Les codes utilisés dans fields doivent correspondre aux codes des grands domaines d’étude définis dans la table de référence.
- Les flux généraux et les flux par domaine doivent être renseignés selon les données que l’on souhaite représenter dans le diagramme.
Intégration dans la charte graphique
1. Importer les bibliothèques JavaScript nécessaires
Le diagramme repose sur les bibliothèques D3.js et d3-sankey, ainsi que sur le script Ametys ProgramFlowDiagram.js.
Ces scripts doivent être importés dans la page ou le template qui affiche le diagramme :
<script type="text/javascript" src="{concat(ametys:uriPrefix(), '/plugins/odf-orientation/resources/js/AmetysFront/ProgramFlowDiagram.', ametys:lang(), '.js')}"/>
<!-- Sankey Diagram -->
<script src="{ametys:skinURL('templates/common/js/vendor/d3.js')}"></script>
<script src="{ametys:skinURL('templates/common/js/vendor/d3-sankey.js')}"></script>2. Insertion et initialisation du diagramme
L’intégration repose sur la fonction AmetysFront.ProgramFlowDiagram.renderDiagram(), qui prend deux arguments :
- targetEl (obligatoire) : élément HTML dans lequel le diagramme doit être inséré ;
- options (facultatif) : objet permettant notamment de personnaliser les couleurs du diagramme.
Exemple:
<div id="programs-flow"></div>
<script>
const targetEl = document.getElementById("#programs-flow");
const opts = {
"diagram": {
colors: {
"sourceFill": "#e4c1af",
"outcomeFill": "#d77d79",
"stemFill": "#521C7E",
"degreeFlow": "#eaf3ff",
"activeFlowStart": "#eaf3ff",
"activeFlowEnd": "#d77d79"
}
}
}
AmetysFront.ProgramFlowDiagram.renderDiagram(targetEl, opts);
</script>Personnaliser les couleurs
Six couleurs peuvent être personnalisées. Elles correspondent aux différents éléments du diagramme :
Propriété | Élément concerné |
|---|---|
sourceFill | Nœud représentant le point de départ du parcours (par exemple « BAC ») |
outcomeFill | Nœud représentant la destination finale (par exemple « Vie active ») |
stemFill | Nœuds représentant les diplômes |
degreeFlow | Flux entre les diplômes |
activeFlowStart | Début des flux lorsqu'un grand domaine d'étude est sélectionné |
activeFlowEnd | Fin des flux lorsqu'un grand domaine d'étude est sélectionné |
Retour en haut