Retour sur les maquettes

• N'hésitez pas à ajouter de la couleur, faire un travail sur le choix des polices, travail sur les typographies, ...

• Des mises en avant de chiffres, de phrases, ... (animées ou non), peuvent être pertinentes pour casser une routine de lecture sur les pages.

• Des photos et illustrations peuvent être utilisées

• Une icônographie peut être utilisée

Questions/réponses

• Pas de responsive imposé

• Librairies CSS autorisées

• Icône, images existantes autorisées

Création de graphiques en JavaScript

Pour générer des graphiques sur le web il existe plusieurs solutions

• Méthodes statiques

  • L'image et le graphique sont construits avec un logiciel de création graphique classique, ou excel, ou équivalent. L'image est enregistrée et on la dépose sur le serveur web pour l'afficher comme une image classique.

• Méthodes "dynamique"

  • On peut générer en back en créant une image, à partir de données en PHP (avec la librairie GD ou d'autres (http://www.pchart.net/ par exemple), et l'afficher comme une image. Cette solution est intéressante, mais ne permet pas forcément une grande interactivité avec le graphique produit

  • Le générer avec un langage front, comme JavaScript. Dans ce cas il existe de nombreuses librairies (une liste non exhaustive ici : https://geekflare.com/fr/charting-libraries/). Cette solution permet une grande interactivité avec les données et le résultat produit.

Librairies JS

Pour ce premier exemple on va utiliser Chart.js (mais toutes les autres fonctionnent sur une logique similaire).

ChartJs, va générer du Canvas qui est intégré directement dans votre page HTML à partir d'une source de données JavaScript.

Mise en place

Partie HTML

Intégration du graphique dans votre page HTML

// Some code
<div>
  <canvas id="myChart"></canvas>
</div>

Il faut définir un objet "canvas" avec un id, dans lequel le graphique sera inséré. Vous pouvez ajouter autant de zone de graphique que vous le souhaitez.

Il faut ensuite ajouter la dépendance à ChartJs

<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>

Soit en CDN (comme ci-dessus) ou en intégrant les fichiers que vous auriez téléchargé.

Partie JavaScript

Soit directement dans le fichier HTML, soit en incluant un fichier js.

<script>
  const myChart = new Chart(
    document.getElementById('myChart'),
    {
    type: 'line',
    data: {
      labels: [
        'January',
        'February',
        'March',
        'April',
        'May',
        'June',
      ],
      datasets: [{
        label: 'My First dataset',
        backgroundColor: 'rgb(255, 99, 132)',
        borderColor: 'rgb(255, 99, 132)',
        data: [0, 10, 5, 2, 20, 30, 45],
      }]
    },
    options: {}
  }
  );
</script>

Le code ci-dessus permet de construire un objet Chart, avec deux paramètres :

• L'id (lien avec le canva) où sera mis en place le graphique

• Un objet JSON qui contient la construction du graphique.

Cette seconde partie de code va permettre de définir les éléments du graphique.

• Le type (line, pie, plot, ...)

• Les "data" (la forme de cette partie peut varier selon le type de graphique)

Les "data" sont souvent composées d'un nom (label), de données (data), et souvent de paramètres de couleurs ou d'option. Consulter la documentation pour chaque type de graphique.

Exercice

• Mettre en place votre premier graphique avec ChartJS (ou une librairie de votre choix)

Gestion des données

Comme vous le constatez les données sont inscrites directement dans la configuration. Ce qui peut être bien, mais n'est pas forcément optimal si les données doivent changer régulièrement.

Elles peuvent donc provenir d'un fichier JSON qui serait récupéré depuis une API par exemple, ou d'un appel API directement, ...

Ci-dessous un exemple se basant sur un fichier JSON.

Import d'un fichier JSON

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {
            
            })
.catch(error => console.error('Erreur lors du chargement des données JSON:', error));

Soit si c'est un fichier JavaScript importé

<script src="assets/js/graphiques.js" defer type="module"></script>

Modification

Le code du graphique doit donc manipuler les données du fichier Json

Exemple de fichier JSON

{
    "mmi1": {
        "h":73,
        "f": 44
    },
    "mmi2": {
       "crea": {
            "h": 17,
            "f": 13
        },
        "comm": {
            "h": 11,
            "f": 4
        },
        "devFi": {
            "h": 18,
            "f": 7
        },
        "devFc": {
            "h": 74,
            "f": 28
        }
    }
}

Exemple d'utilisation dans le javascript

fetch('./data.json')
            .then(response => response.json())
            .then(dataJson => {

        const chartGenreComm = new Chart(
            document.getElementById('chartGenreComm'),
            {
                type: 'pie',
                data: {
                    labels: [
                        'Homme',
                        'Femme'
                    ],
                    datasets: [{
                        label: 'Répartition des genres Parcours Communication',
                        backgroundColor: [
                            'rgb(255, 99, 132)',
                            'rgb(54, 162, 235)',
                        ],
                        hoverOffset: 4,
                        data: [dataJson.mmi2.comm.h, dataJson.mmi2.comm.f],
                    }]
                },
                options: {
                    plugins: {
                        title: {
                            text: 'Répartition des genres Parcours Communication',
                            display: true
                        }
                    }
                }
            }
        );
        })
        .catch(error => console.error('Erreur lors du chargement des données JSON:', error));

Ajouter des données

Il est possible d'ajouter ou de retirer des données en lien avec un graphique existant.

Exemple de code javascript, à associer sur un bouton avec un id "bouton", et un chart nommé charteGenreMMI2. Les données sont fixées par le code ici, elles peuvent venir de sources, de formulaires, ...

const charte2 = new Chart(
            document.getElementById('charte2'),
            {
                type: 'bar',
                data: {
                    labels: ['Red', 'Blue', 'Yellow', 'Green', 'Purple', 'Orange'],
                    datasets: [{
                        label: '# of Votes',
                        data: [12, 19, 3, 5, 2, 3],
                        borderWidth: 1
                    }]
                },
                options: {
                    scales: {
                        y: {
                            beginAtZero: true
                        }
                    }
                }
            }
        );

        //un clic sur le bouton avec l'id bouton doit ajouter un élément au charte2
        document.getElementById('bouton').addEventListener('click', () => {
            charte2.data.labels.push('New');
            charte2.data.datasets[0].data.push(10);
            charte2.update();
        });

Documentation associée :

https://www.chartjs.org/docs/latest/developers/updates.html

Les données sont de plus en plus présentes dans le monde de l’entreprise ou des services. Elles permettent d’enrichir une information, mais servent aussi d’outil de communication.

A partir de jeux de données, cette SAE mobilise les ressources liées à l’analyse de données, à la production graphique, à l’intégration et au développement front et amène les étudiants à :

• Analyser des données pour en extraire des indicateurs ou les informations pertinentes ;

• Proposer un site web permettant la visualisation de ces données

• Compléter ce site web par la production d'une application interactive permettant une navigation au sein des données.

Les étudiants réalisent les contenus et les présentent au commanditaire en répondant à la question : comment concevoir des visualisations de données apportant une information pertinente et appuyant une communication ?

Tips

Paramètres l'axe Y

Deux axes

Choix des données

Le HTML

Le JS

Afficher une carte

Le fichier html/JS

Et le charger à la place de departements.json

• Il faut ici une source CSV pour avoir les données de population.

Cette année ce module se fait en lien avec "ODU - Open Data University" de l'association Latitudes.

Les sources de données et des éléments de contexte sont sur ce site : https://www.opendatauniversity.org/

Objectifs de la SAE

• Choisir une source de données parmi celles disponibles

• Imaginer une analyse des données et le message auquel répondre

• Proposer un site web qui sera composé des élements suivants (obligatoires) :

  • Site web accessible, éco-conçu (pas de CMS)

  • Une infographie réalisée avec le logiciel de votre choix

  • Des graphiques développés par vos soins

    • Avec des interactions

  • Des graphiques issus d'outils en ligne

  • Une mise en page (travaillée et adaptée) et des textes explicatifs

• Une ergonomie et une mise en page agréable, appuyant votre message.

Quelques exemples

Organisation

• En binôme

• Présent à l'IUT sur tous les créneaux "PTUT"

Livrables

Intermédiaires

• Vendredi 27 septembre, 12h30 (a communiquer à l'IUT entre 11h et 12h30, salle h103)

  • Votre binôme

  • Votre source de données

  • Votre "histoire" (les données sont larges pour que les histoires ne soient pas toutes identiques).

• Mercredi 2 octobre, à partir de 15h30 (H017) Jeudi 3 octobre 11h, h101

  • Présentation d'une maquette détaillée des pages proposées

    • Avec tous les éléments présents sur la mise en page

  • Choix des graphiques (même si les données ne sont pas encore finalisées)

• 15 octobre, à partir de 14h00 (et avant 15h30)

  • Une pré-version du site en ligne

  • Votre site contiendra au moins deux pages (ou en one page) pour les dataviz + une page avec vos coordonnées + une page avec les références et sources utilisées

    • S'il faut chiffrer entre 8 et 10 graphiques semblent pertinents

      • Au moins 4 programmés, dont au moins deux fortement interactif

      • 1 en infographie libre

      • Les autres au format libre

• 17 octobre 17h00 18 octobre 12h30 (rendu final en ligne)

Le rendu se fera par mail (1 par binôme).

Critères de notation

• Site web

  • Accessibilité (a11y AA)

  • Eco-conception

  • Données exploitées

  • Histoire racontée

  • Esthétique du site (qualité de l'infographie libre, du site globalement)

Quelques exemple (bons et moins bons)