Projet:Communes de France/Diagrammes

Cette page explique comment construire des diagrammes facilement modifiables dans les articles sur les communes concernant les évolutions démographiques et les pyramides des âges.

Diagramme en bâtons d'une évolution démographique en utilisant timeline

Le meilleur diagramme pour visualiser une évolution démographique est la courbe démographique mais cela oblige à télécharger un graphique sur commons difficilement modifiable. Si cette solution est envisagée, il est préférable de fournir un graphique svg. Les diagrammes en bâtons qui existent sur certains articles ne sont pas satisfaisant car l'échelle de temps n'est pas régulière et induit parfois une impression visuelle fausse. Timeline permet de créer des diagrammes en bâtons d'évolution démographique au prix toutefois de quelques calculs de conversion.

Exemple

Pour obtenir le diagramme suivant : <timeline>

1. taille de l'image - largeur normalisée hauteur = 80+ 50 * nombre de graduations

ImageSize = width:609 height:380 PlotArea = left:40 right:20 top:40 bottom:40 AlignBars = late

1. Configuration des dates

DateFormat = yyyy Period = from:1790 till:2010 TimeAxis = orientation:horizontal ScaleMajor = unit:year increment:20 start:1800

Colors =

 id:lightgrey value:gray(0.97)
 id:darkgrey  value:gray(0.1)
 id:canvas    value:gray(1)
 id:baton value:rgb(0.7,0.9,0.7)

Backgroundcolors = canvas:canvas

1. legende des axes , placer le nombre d'habitants à 20 px sous la hauteur max

TextData =

 pos:(5,360) textcolor:black fontsize:S
 text:Nombre d'habitants
 pos:(550,20) textcolor:black fontsize:S
 text:Années

1. placement de 6 graduations principales en ordonnées (séparation de 50px entre chaque graduation)

BarData =

 bar:6
 bar:5 text:2500
 bar:4 text:2000 
 bar:3 text:1500
 bar:2 text:1000 
 bar: 1 text:500

PlotData =

 bar:1  width:0.5 color:black from:start till:end
 bar:2  width:0.5 color:black from:start till:end
 bar:3  width:0.5 color:black from:start till:end
 bar:4  width:0.5 color:black from:start till:end
 bar:5  width:0.5 color:black from:start till:end
 bar:6  width:1 color:black from:start till:end

LineData=

color:baton
width:3

1. coordonnées absolues par rapport au bord de l'image
2. les traits démarrent de la position 40 à la position 40+ valeur * 50/graduation

at:1793 frompos:40 tillpos:131
at:1800 frompos:40 tillpos:122
at:1806 frompos:40 tillpos:134
at:1821 frompos:40 tillpos:150
at:1831 frompos:40 tillpos:156
at:1836 frompos:40 tillpos:156
at:1841 frompos:40 tillpos:158
at:1846 frompos:40 tillpos:169
at:1851 frompos:40 tillpos:174
at:1856 frompos:40 tillpos:172
at:1861 frompos:40 tillpos:184
at:1866 frompos:40 tillpos:176
at:1872 frompos:40 tillpos:178
at:1876 frompos:40 tillpos:172
at:1881 frompos:40 tillpos:185
at:1886 frompos:40 tillpos:196
at:1891 frompos:40 tillpos:203
at:1896 frompos:40 tillpos:196
at:1901 frompos:40 tillpos:200
at:1906 frompos:40 tillpos:202
at:1911 frompos:40 tillpos:197
at:1921 frompos:40 tillpos:191
at:1926 frompos:40 tillpos:191
at:1931 frompos:40 tillpos:192
at:1936 frompos:40 tillpos:182
at:1946 frompos:40 tillpos:207
at:1954 frompos:40 tillpos:204
at:1962 frompos:40 tillpos:213
at:1968 frompos:40 tillpos:220
at:1975 frompos:40 tillpos:241
at:1982 frompos:40 tillpos:266
at:1990 frompos:40 tillpos:275
at:1999 frompos:40 tillpos:289
at:2007 frompos:40 tillpos:291

</timeline>

Il suffit de taper le texte suivant

<timeline>
# taille de l'image - largeur normalisée hauteur = 80+ 50 * nombre de graduations
ImageSize = width:609 height:380
PlotArea = left:40 right:20 top:40 bottom:40
AlignBars = late

#Configuration des dates
DateFormat = yyyy
Period = from:1790 till:2010
TimeAxis = orientation:horizontal
ScaleMajor = unit:year increment:20 start:1800

Colors =
  id:lightgrey value:gray(0.97)
  id:darkgrey  value:gray(0.1)
  id:canvas    value:gray(1)
  id:baton value:rgb(0.7,0.9,0.7)
Backgroundcolors = canvas:canvas

# legende des axes , placer le nombre d'habitants à 20 px sous la hauteur max
TextData =
  pos:(5,360) textcolor:black fontsize:S
  text:Nombre d'habitants
  pos:(550,20) textcolor:black fontsize:S
  text:Années
 

# placement de n graduations principales en ordonnées (séparation de 50px entre chaque graduation)
BarData =
  bar:6
  bar:5 text:2500
  bar:4 text:2000 
  bar:3 text:1500
  bar:2 text:1000 
  bar: 1 text:500

PlotData =
  bar:1  width:0.5 color:black from:start till:end
  bar:2  width:0.5 color:black from:start till:end
  bar:3  width:0.5 color:black from:start till:end
  bar:4  width:0.5 color:black from:start till:end
  bar:5  width:0.5 color:black from:start till:end
  bar:6  width:1 color:black from:start till:end

LineData=
 color:baton
 width:3

# coordonnées absolues par rapport au bord de l'image
# les traits démarrent de la position 40 à la position 40+ nombre d'habitants* 50 /première graduation

 at:1793 frompos:40 tillpos:131
 at:1800 frompos:40 tillpos:122
 at:1806 frompos:40 tillpos:134
 at:1821 frompos:40 tillpos:150
 at:1831 frompos:40 tillpos:156
 at:1836 frompos:40 tillpos:156
 at:1841 frompos:40 tillpos:158
 at:1846 frompos:40 tillpos:169
 at:1851 frompos:40 tillpos:174
 at:1856 frompos:40 tillpos:172
 at:1861 frompos:40 tillpos:184
 at:1866 frompos:40 tillpos:176
 at:1872 frompos:40 tillpos:178
 at:1876 frompos:40 tillpos:172
 at:1881 frompos:40 tillpos:185
 at:1886 frompos:40 tillpos:196
 at:1891 frompos:40 tillpos:203
 at:1896 frompos:40 tillpos:196
 at:1901 frompos:40 tillpos:200
 at:1906 frompos:40 tillpos:202
 at:1911 frompos:40 tillpos:197
 at:1921 frompos:40 tillpos:191
 at:1926 frompos:40 tillpos:191
 at:1931 frompos:40 tillpos:192
 at:1936 frompos:40 tillpos:182
 at:1946 frompos:40 tillpos:207
 at:1954 frompos:40 tillpos:204
 at:1962 frompos:40 tillpos:213
 at:1968 frompos:40 tillpos:220
 at:1975 frompos:40 tillpos:241
 at:1982 frompos:40 tillpos:266
 at:1990 frompos:40 tillpos:275
 at:1999 frompos:40 tillpos:289
 at:2007 frompos:40 tillpos:291
</timeline>

On peut toujours repartir de zéro, mais le plus simple est de recopier le texte précédent et de ne modifier que ce dont on a besoin.

Configurer l'axe des dates

La plage de dates concernées et le choix des graduations se font dans la rubrique

#Configuration des dates
DateFormat = yyyy
Period = from:1790 till:2010
TimeAxis = orientation:horizontal
ScaleMajor = unit:year increment:20 start:1800

• La période se rentre dans la variable periode (ici de 1790 à 2010)
• La graduation principale se rentre dans la variable ScaleMajor (ici le démarrage des graduation commence à 1800 - soit un peu décalé par rapport u début des mesures - avec des graduations tous les 20 ans)

Configurer l'axe du nombre d'habitants

C'est la partie la plus délicate : il faut regarder le nombre maximal d'habitants arrondi par excès à un nombre rond (ici on a choisi 3000 habitants) et choisir un nombre raisonnable de graduations (5 ou 6 graduations séparées de 50 px parait une solution raisonnable). Ceci déterminera la différents paramètres du diagramme.

Hauteur du diagramme

Dans l'exemple ci-dessus, on a choisi 6 graduations de 50 px, il faut donc prendre une hauteur de diagramme de 6*50+80 = 380 px. Cette hauteur de diagramme se modifie dans la rubrique

# taille de l'image - largeur normalisée hauteur = 80+ 50 * nombre de graduations
ImageSize = width:609 height:380
PlotArea = left:40 right:20 top:40 bottom:40
AlignBars = late

ImageSize= ... height:380

Etiquette de l'axe des ordonnées

Il faut que l'étiquette de l'axe des ordonnées soit toujours située 20 px en dessous de la hauteur max : ici 360 px. la position de cette étiquette se change dans la rubrique

# legende des axes , placer le nombre d'habitants à 20 px sous la hauteur max
TextData =
  pos:(5,360) textcolor:black fontsize:S
  text:Nombre d'habitants
  pos:(550,20) textcolor:black fontsize:S
  text:Années

C'est le paramètre pos:(5,360) qu'il faut modifier.

Etiquette des graduations

Il faut enfin mettre des étiquettes des graduations.

• Dans l'exemple traité, il y a 6 graduations pour une valeur max de 3000 habitants, ce qui fait des graduations d'étiquettes 500, 1000, 1500, 2000, 2500, 3000 (la dernière étiquette peut être omise).
• Pour une ville de 22 000 habitants, il faut envisager 5 graduations d'étiquette 5 000, 10 000, 15 000, 20 000, 25 000 (étiquette optionnelle)

Ces plages et ces étiquettes se rentrent dans

# placement de n graduations principales en ordonnées (séparation de 50px entre chaque graduation)
BarData =
  bar:6
  bar:5 text:2500
  bar:4 text:2000 
  bar:3 text:1500
  bar:2 text:1000 
  bar: 1 text:500

Tracé des lignes horizontales

Les lignes horizontales se tracent dans la rubrique

PlotData =
  bar:1  width:0.5 color:black from:start till:end
  bar:2  width:0.5 color:black from:start till:end
  bar:3  width:0.5 color:black from:start till:end
  bar:4  width:0.5 color:black from:start till:end
  bar:5  width:0.5 color:black from:start till:end
  bar:6  width:1 color:black from:start till:end

La dernière ligne, plus épaisse, indique la fin du diagramme.

Calculer la hauteur des bâtons

Il faut maintenant calculer, à la main, la hauteur de chaque bâton (un tableur aide pour cette conversion)

on prend le nombre d'habitants à une date donnée, on le divise par la première étiquette de graduation et on multiple le résultat par 50 (50px est la taille réelle d'une graduation).

$h=\frac{N\times 50}{\text{premiere graduation}}$

Dans le cas de Pougues-les-Eaux, en 1793, il y avait 912 habitants, et la première graduation est à 500, ce qui donne une hauteur de bâton de 912*50/500, soit 91 px.

Les bâtons se tracent de 40 px à (40 + h) px. Ainsi le bâton en 1793 ira de 40 à 131 px.

Les tracé des bâtons s'effectuent dans la rubrique

LineData=
 color:baton
 width:3

# coordonnées absolues par rapport au bord de l'image
# les traits démarrent de la position 40 à la position 40+ nombre d'habitants* 50 /première graduation

 at:1793 frompos:40 tillpos:131
 at:1800 frompos:40 tillpos:122
 at:1806 frompos:40 tillpos:134
 at:1821 frompos:40 tillpos:150
 at:1831 frompos:40 tillpos:156
 at:1836 frompos:40 tillpos:156
 at:1841 frompos:40 tillpos:158
 at:1846 frompos:40 tillpos:169
 at:1851 frompos:40 tillpos:174
 at:1856 frompos:40 tillpos:172
 at:1861 frompos:40 tillpos:184
 at:1866 frompos:40 tillpos:176
 at:1872 frompos:40 tillpos:178
 at:1876 frompos:40 tillpos:172
 at:1881 frompos:40 tillpos:185
 at:1886 frompos:40 tillpos:196
 at:1891 frompos:40 tillpos:203
 at:1896 frompos:40 tillpos:196
 at:1901 frompos:40 tillpos:200
 at:1906 frompos:40 tillpos:202
 at:1911 frompos:40 tillpos:197
 at:1921 frompos:40 tillpos:191
 at:1926 frompos:40 tillpos:191
 at:1931 frompos:40 tillpos:192
 at:1936 frompos:40 tillpos:182
 at:1946 frompos:40 tillpos:207
 at:1954 frompos:40 tillpos:204
 at:1962 frompos:40 tillpos:213
 at:1968 frompos:40 tillpos:220
 at:1975 frompos:40 tillpos:241
 at:1982 frompos:40 tillpos:266
 at:1990 frompos:40 tillpos:275
 at:1999 frompos:40 tillpos:289
 at:2007 frompos:40 tillpos:291

La largeur des bâtons (ici width:3) permet de montrer que les mesures sont espacées dans le temps. La position des bâtons est précisée dans les paramètres frompos et tillpos. Ainsi la ligne

at:1793 frompos:40 tillpos:131

signifie que l'on a tracé, à la date 1793, un bâton de la position 40 à la positon 131.

Les couleurs

Pour l'instant, la couleur des diagrammes semblent être le vert. La nuance de vert peut se changer dans la rubrique

Colors =
  id:lightgrey value:gray(0.97)
  id:darkgrey  value:gray(0.1)
  id:canvas    value:gray(1)
  id:baton value:rgb(0.7,0.9,0.7)
Backgroundcolors = canvas:canvas

La couleur des bâton est rangée dans l'ID: baton. Elle est pour l'instant identifiée par le code rgb(0.7,0.9,0.7). Elle est souhaitable de conserver la même couleur dans les diagrammes et donc de changer la couleur seulement après décision communautaire.

Pyramide des âges en utilisant le modèle Pyramide des âges

Pour l'explication dur le modèle voir modèle:Pyramide des âges

Dans une pyramide des âges, il est préférable de travailler avec des classes d'âge de taille constante. Pour une classe d'age de taille différente des autres, il faudrait en toute rigueur modifier la hauteur et la largeur du rectangle représentant cette classe d'âge et son effectif. Mais cette fonctionnalité n'est pas prévue dans le modèle Pyramide des âges.

Malheureusement, l'INSEE ne fournit des classe d'âge de taille constante que pour des classes de largeur 1 an ou des classes de largeur 5 ans qui sont incompatibles avec un tracé raisonnable.

On peut cependant, à l'aide de quelques additions, reconstituer une pyramide des âges dont les classes sont toutes de 15 ans ou toutes de 20 ans.

Exemple

Pour obtenir le diagramme suivant

Il suffit de taper le code

{{Pyramide des âges
|float=left
|width=49%
|maxvalue=36
|bg=rgb(100%,100%,100%)
|border=1px solid black|margin-top=1ex
|caption=Pyramide des âges de la commune de Royan en 1999<ref>[http://www.recensement.insee.fr/RP99/rp99/wr_page.affiche?p_id_transac=&p_theme=ALL&p_typeprod=ALL&p_id_nivgeo=C&p_id_loca=17306&p_id_princ=POP1A&p_id_second=POP1A1&p_langue=FR&p_specim=N&p_pourcent=2 INSEE : POP1 - Population totale par sexe et âge à Royan] (1999)</ref> en pourcentage.
|barcolor=rgb(70%,90%,70%)
|> 90|1.2|2.3
|75-89|11.8|18.8
|60-74|23.4|25.2
|45-59|17.2|17.3
|30-44|16.3|14.9
|15-29|14.5|11.6
|0-14 |12.6|9.8
}}

Construire des classe d'âge de taille constante

Pour trouver les données sources, il faut allers sur le site de Site de l'INSEE, puis demander tous les produits concernant la commune concernée (ici Royan). Le produit qui nous intéresse est POP1.

• Pour reconstituer des classes d'âge de 15 ans, choisir un affichage "structure en pourcentage par âge quinquennal" et additionner les pourcentages trois par trois.
• Pour reconstituer des classes d'âge de 20 ans, choisir l'affichage "structure en pourcentage en 5 tranches" et modifier les deux dernières tranches en ajoutant à la tranche (60-74 ans) le pourcentage de la tranche (75-79 ans) que l'on peut trouver dans le tableau "structure en pourcentage par âge quinquennal" et en retranchant à la tranche (75 et plus) ce même pourcentage.