cartes et path

Code permettant la coloration en rouge

C'est la règle CSS :

path:hover {
      fill: red;
      stroke: red;
    }

qui permet cette coloration en rouge du contenu d'un chemin lors de son survol par la souris.

Code pour colorer en vert le Département de l'Ain

On a ajouté un identifiant au path définissant les frontières de l'Ain (id="Ain"). On trouve facilement ce path en faisant une recherche sur data-num="01" dans le fichier. Puis on a ajouté une règle CSS qui s'applique au survol (:hover) de l'élément d'identifiant "Ain".

Le code CSS :

 #Ain:hover {
      fill: green;
      stroke: green;
    }

Le fichier modifié.

Ajout du nom du département

On peut ajouter dans l' élément svg :

Le fichier modifié (le code svg ajouté se trouve en fin d'élément svg).

On peut également utiliser snap.svg (si l'on veut éviter de modifier le code de la figure) en ajoutant par exemple en bas de page :

Le fichier modifié.

Le script qui permet l'affichage est en fin de fichier.

L'événement DOMContentLoaded est déclenché lorsque le document HTML initial a été complètement chargé et analysé. La fonction, second paramètre de document.addEventListener, est alors exécutée.

Cette fonction déclenche des événements sur les éléments path : lors du survol de la souris (événement mouseover), les contenus html des éléments span sont redéfinis.

Ce fichier présente un script modifié, ainsi que l'ajout d'une balise span dans la partie html et l'ajout d'un attribut class de valeur AuvergneRhoneAlpes pour les départements concernés. Ces modifications (vos choix peuvent être différents bien entendu) permettent l'affichage du nom de la région pour les départements d'Auvergne-Rhône-Alpes.

Intensité du gris en hsl

Pour régler l'intensité de gris, on peut utiliser le codage HSL des couleurs.

Ceci nous amène à tenter de définir le pourcentage de la composante l à l'aide du pourcentage de la population du département par rapport à celle de la région.

On utilisera donc le rapport \( \frac{\text{population du département}}{\text{population de la région}} \) et plus précisément (pourcentage) la valeur \(100 \times \frac{\text{population du département}}{\text{population de la région}} \) pour la composante l.

Mais comme on le voit sur les exemples ci-dessus, cela nous amènerait à foncer les départements les moins peuplés, ce qui est contraire aux habitudes.

On utilisera donc plutôt \(100 - 100 \times \frac{\text{population du département}}{\text{population de la région}} \).

Intensité du gris en rgb

Vous pourrez aussi tester avec du code rgb.

Premier essai pour griser les départements

Ce fichier vous propose une première solution (script en fin de fichier).

Second essai pour griser les départements

On peut reprocher à la tentative précédente d'afficher des niveaux de gris trop proches.

Pour éviter cela, on force la plage [niveau min de gris, niveau max de gris] à s'étendre sur toute la plage [0;100]. On marque ainsi plus nettement les variations.

Ce fichier vous propose une solution (script en fin de fichier).

Remarques :

• les différences sont mieux marquées, mais on pourrait aussi penser qu'elles sont "trop" marquées. C'est là un thème important en représentation de données : choisir l'échelle ne doit pas se faire aux dépends de l'information, cela ne doit pas fausser l'impression visuelle. L'équilibre entre un choix assez net visuellement et un choix donnant une impression fidèle à la réalité est assez difficile à réaliser (d'autant plus qu'il est subjectif).
• On peut facilement remplacer les niveaux de gris par des niveaux de bleu (ou autre). Un fichier avec niveaux de bleu : la seule modification est dans le code de la dernière ligne hsl(....