Pluviométrie mensuelle - tableau de bord (p5.js)

index.html · 3.3 Ko

<!DOCTYPE html>
<!--
  ============================================================
  Pluviométrie mensuelle - tableau de bord p5.js (intermédiaire)
  ============================================================
  ATTENTION : toutes les valeurs affichées sont des VALEURS
  D'ILLUSTRATION inventées pour apprendre. Ce ne sont pas des
  mesures officielles.

  Structure de la page :
    - un bandeau qui rappelle que les données sont fictives ;
    - des commandes HTML (choix de l'année, bascule histogramme/courbe) ;
    - le canevas p5 (le graphique) ;
    - un résumé en texte et un tableau HTML des données (accessibilité).

  Ordre des scripts : données -> réglages -> outils de calcul ->
  dessin (axes, graphiques, infobulle) -> interaction -> sketch.
-->
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Pluviométrie mensuelle d'Antalaha</title>
  <link rel="stylesheet" href="css/style.css">
</head>
<body>
  <header>
    <h1>Pluviométrie mensuelle à Antalaha</h1>
    <p class="bandeau" role="note">
      <strong>Valeurs d'illustration</strong> : ces données sont inventées pour le tutoriel.
      Elles ne proviennent d'aucune mesure officielle.
    </p>
  </header>

  <main>
    <!-- Commandes (de vrais éléments HTML : accessibles au clavier et au lecteur d'écran) -->
    <section class="commandes" aria-label="Commandes du graphique">
      <label for="choix-annee">Année :</label>
      <select id="choix-annee"></select>
      <button id="bouton-mode" type="button" aria-pressed="false">Afficher la courbe</button>
    </section>

    <!-- Le canevas p5 sera inséré ici. touch-action: pan-y dans le CSS : on peut
         faire défiler la page verticalement et glisser le doigt horizontalement sur le graphique. -->
    <div id="conteneur-canvas" role="img"
         aria-label="Graphique de la pluviométrie mensuelle (valeurs d'illustration). Le détail est donné dans le tableau en dessous."></div>

    <p class="aide">Survolez (souris) ou touchez (doigt) une colonne pour lire sa valeur.</p>
    <p id="resume" class="resume" aria-live="polite"></p>

    <!-- Tableau de données : alternative texte au graphique -->
    <details class="tableau-details">
      <summary>Voir le tableau des données (en mm)</summary>
      <div class="defile-x">
        <table id="tableau-donnees"></table>
      </div>
    </details>

    <noscript>
      <p class="avertissement">Ce graphique a besoin de JavaScript. Activez-le pour l'afficher.</p>
    </noscript>
  </main>

  <footer>
    <p>Code ouvert : lisez les fichiers <code>js/</code> et <code>data/</code>. Données d'illustration uniquement.</p>
  </footer>

  <script src="/libs/p5.min.js"></script>
  <script src="data/pluie.js"></script>        <!-- les données (tableaux JavaScript) -->
  <script src="js/config.js"></script>         <!-- couleurs, marges, vitesses -->
  <script src="js/donnees.js"></script>        <!-- calculs : moyenne, maximum, résumé, tableau HTML -->
  <script src="js/axes.js"></script>           <!-- grille, graduations, légende -->
  <script src="js/graphiques.js"></script>     <!-- histogramme et courbe -->
  <script src="js/interaction.js"></script>    <!-- souris, tactile, infobulle -->
  <script src="js/sketch.js"></script>         <!-- setup(), draw(), windowResized() -->
</body>
</html>