Synthèse de stage : 

Contexte de stage :

J’ai effectué mon stage de première année du 08/11/2021 au 10/12/2021, au sein de la DINUM (Direction du Numérique et de la Modernisation ,anciennement la DTSI)

Qu’est ce que la DINUM?

La Direction du Numérique et de la modernisation, c’est l’institution qui est responsable de la politique de développement du numérique de la Nouvelle-Calédonie.

J’ai travaillé dans la Mission Transformation Numérique du côté de l’Open Data.

J’ai donc créé une DATAVIZ (visualisation de données),  pour un des nombreux clients de la DINUM : La PEP (Politique de l’eau partagée).

J’ai pu me renseigner pendant presque une semaine sur les différents types de DATAVIZ qui existaient grâce à la plateforme OpenDataSoft.


OpenDataSoft est une plateforme SaaS (Software as a Service) clé en main conçue pour permettre à des utilisateurs métiers de simplement publier, partager et réutiliser des données structurées.

La DINUM paye la licence ODS 2.5 millions par an.

Cette DATAVIZ sera donc inclus dans le site de la PEP.

La mission Transformation Numérique consiste à :

  • Comprendre les parcours des usagers pour mieux les simplifier.
  • Accompagner usagers et agents dans les usages numériques.
  • Encourager les initiatives des agents et soutenir l’innovation.
  • Stimuler les échanges transversaux pour casser les silos.
  • Mesurer régulièrement les résultats pour s’améliorer en continue.

Mission de Stage : Création de la DATAVIZ

L’objectif principal était de proposer une DATAVIZ correspondant aux besoins du client, (le client souhaite avoir un catalogue ou tous ces outils de sensibilisation sur l’eau y sont répertoriés) cette DATAVIZ par la suite sera implémentée sur le site du client (eau.nc) afin que ses utilisateurs (Profs, élèves etc…) bénéficient d’une meilleure visibilité et une meilleure compréhension des outils de sensibilisation disponibles.

Découverte de l’outil OPENDATASOFT

Langages utilisés : HTML, CSS, ANGULARJS

Autres outils : EXCEL

Sommaire

  • Partie 1 : Récupération des informations sur les fiches PDF
  • Partie 2 : Début de la création de la DATAVIZ (Base : ODS Generators)
  • Partie 3 : Personnalisation de la DATAVIZ en fonction des besoins
  • Partie 4 : Forme finale de la DATAVIZ
  • Partie 5 : Conclusion personnelle

Partie 1 : Récupération des informations sur les fiches PDF

Durant la première semaine, j’ai dû me renseigner et me documenter sur les différents types de visualisation de données afin de me plonger dans le cœur du sujet et découvrir réellement ce qu’est et ce que propose l’OpenData.

Ensuite j’ai dû remplir un tableau Excel avec les informations pertinentes des fiches PDF que le client nous a fournies. Partie très importante car sans ce tableau Excel, je ne peux afficher les données sur la DATAVIZ.

Voici à quoi ressemble les fiches PDF : 

Et voici le tableau EXCEL qui m’a servi de base de données (appelée jeu de données) pour la DATAVIZ. (Remarque : il y avait au début 55 fiches. Des fiches et même quelques vidéos ont été rajouté au cour de mon stage :  en tout il y a 64 outils)

Partie 2 : Début de la création de la DATAVIZ (Base : ODS Generators)

La plateforme Open Data Soft propose à ses utilisateurs des exemples de visualisation de données avec la possibilité de copier et de modifier le code du générateur sélectionné, dans un onglet de ODS nommé Code Library : 

Je me suis inspiré de cet exemple pour créer ma propre visualisation de données en fonction du thème. (En retirant les éléments inutiles comme la carte)

Partie 3 : Personnalisation de la DATAVIZ en fonction des besoins

Pour commencer, j’ai du configurer les paramètres de la DATAVIZ : 

Ici j’ai modifier “domain” et “datasetid” pour récupérer toutes les données du jeu de données que je souhaite (Dans le domaine : data.gouv.nc, ma base de données correspond a “catalogue-outils…”, qui fait référence au doc excel que j’ai créé au préalable)

Faire ceci est l’étape primordiale de la DATAVIZ car elle consiste à récupérer les données du jeu de données. Sans ça, pas de données.

Pour la suite de la configuration des paramètres, J’ai commencé par trier en fonction de ‘num_fiche’ (Classé en fonction de l’ordre d’apparition dans le tableau excel)

Ensuite, j’ai mis en place les filtres de recherche : 

Ici, j’initialise le nombre de “cards” par ligne.

J’ai pu aussi découvrir Angular-JS, c’est un framework JavaScript libre et open source, AngularJS exécute en permanence une boucle qui consiste à surveiller et à détecter des modifications sur un objet JavaScript. 

Pour résumer, il met à disposition une librairie propre à Angular mais surtout vous n’avez besoin de créer de fichier JS, car Angular s’intègre dans le HTML.

Au début de notre projet, moi et ma cheffe de projet, nous avions l’idée de proposer deux versions d’affichage de la DATAVIZ que l’utilisateur peut choisir selon sa préférence, un affichage “Tableau” et un affichage “Cards” (Sous forme de carte à jouer)

Avant le site ressemblait à ça : Affichage “Cards” (Fiche)

Affichage “Tableau” : 

Mais la cliente ne voulait pas d’affichage en tableau mais uniquement l’affichage en “Cards”, donc nous avons enlevé le bouton et l’affichage “Tableau”.

Je tiens à préciser aussi la présence d’une charte graphique (respect des couleurs comme sur le site eau.nc, taille de police etc…)

Partie 4 : Forme finale de la DATAVIZ

https://data.gouv.nc/pages/dataviz_pep_catalogue_sensibilisation/

Partie 5 : Conclusion personnelle 

Ce stage a été un gros rappel concernant le HTML/CSS et une découverte pour Angular-JS ou je n’ai d’ailleurs pas eu trop de mal à l’utiliser.

L’ambiance était conviviale, j’ai travaillé dans un espace Open Space et je n’ai pas eu de problèmes sur le plan relationnel.

Je tiens à remercier ma tutrice de stage Houy-Sy THAO qui m’a aidé et supervisé durant ce stage tout cela dans une ambiance qui va surement me manquer.