Les prix des vélos ont-ils vraiment explosé ces dernières années ?

Contexte

Lors de conversations avec des amis cyclistes, une remarque revient souvent : les vélos coûtent de plus en plus cher. Quelle que soit la catégorie — mécanique ou électrique, entrée de gamme ou premium — le sentiment général est que les prix se sont envolés ces dernières années.

Toujours statisticien public, même en cuissard, je me suis demandé : est-ce simplement un biais de perception ou peut-on objectiver cette impression à partir des données officielles détaillées de l’Insee ? L’occasion rêvée de faire un peu de data storytelling.

Les visualisations interactives ci-dessous vous permettent d’explorer cette question par vous-même : jouez avec les paramètres pour observer l’évolution des prix des vélos sur une longue période.

Une fois votre propre idée forgée, vous pourrez la mettre en regard de quelques éléments d’interprétation et précisions méthodologiques plus bas dans la page.

Disclaimer

Ceci n’est pas une publication statistique officielle ! Certains raccourcis conceptuels ont été pris pour simplifier la lecture ou le récit.

Mon objectif ici est de montrer comment les données publiques peuvent servir à raconter une histoire, et comment elles permettent parfois de confirmer — ou d’infirmer — nos impressions de consommateurs.

Au-delà de l’anecdote, c’est aussi une manière de rappeler que les statistiques officielles peuvent nous aider à mieux comprendre les phénomènes du quotidien. Se confronter aux données réelles est un exercice exigeant mais précieux : il demande parfois un peu de temps, selon l’accessibilité des sources, mais il est toujours instructif.

La réponse

Dynamique des prix

html`
<div class="bloc-formulaire" style="margin-bottom: 2rem;">
  <div class="input-stat-affichage">
    ${viewof size}
  </div>

  <div class="input-date-achat">
    <label>
      ${size === "indice" ? "Date de référence" : "Date d'achat"}
    </label>
    ${viewof achatDateRaw}
  </div>

  ${size === "valeur" ? html`
    <div class="input-date-montant">
      <label>Prix d'achat (€)</label>
      ${viewof prixAchatRaw}
    </div>
  ` : ``}
</div>
`

html`
<div class="zoom-year-figure-ipc">
  <div style="font-weight: bold; margin-bottom: 0.5rem;">
    Période affichée : 
    ${yearZoom[0].toLocaleString(undefined, { month: "long", year: "numeric" })} – 
    ${yearZoom[1].toLocaleString(undefined, { month: "long", year: "numeric" })}
  </div>

  <div class="zoom-year" style="max-width: 700px; width: 95%;">
    ${viewof yearZoom}
  </div>
</div>

<div class="figure-ipc">
  ${figureIPC}
</div>

<div class="note-ipc" style="font-size: 0.85rem; line-height: 1.4;">
  ${md`${captionNoteIPC}`}
</div>
`

Inflation

html`<div style="display: flex; flex-direction: column; gap: 1rem;">

  <div class="zoom-year-figure-inflation">
    <div style="font-weight: bold; margin-bottom: 0.5rem;">
      Période affichée : 
      ${secondYearZoom[0].toLocaleString(undefined, { month: "long", year: "numeric" })} – 
      ${secondYearZoom[1].toLocaleString(undefined, { month: "long", year: "numeric" })}
    </div>

    <div class="zoom-year" style="max-width: 700px; width: 95%;">
      ${viewof secondYearZoom}
    </div>
  </div>


  <div>${figureInflation}</div>

  <div class="note-ipc" style="font-size: 0.85rem; line-height: 1.4;">
  ${md`${captionNote}`}

  ${
    secondYearZoom[0] < inflationAnnuel[0].date
      ? calloutRecul
      : ""
  }

  </div>


</div>`

Et maintenant que vous avez une impression plus claire, analysons un peu ces données.

Éléments d’interprétation

Pourquoi une unique catégorie “Bicyclettes” ?

Premier constat un peu frustrant : l’analyse fine des dynamiques de prix par type de vélo n’est pas possible.

L’Insee ne publie des données que pour une catégorie générique — “Bicyclettes” (voir Sources et définitions) — sans distinction entre vélos mécaniques, électriques, de route, de ville, etc.

Mais ce n’est pas propre à la France : la nomenclature des biens utilisée pour les indices de prix est internationale (la COICOP ) et présente le même niveau d’agrégation dans de nombreux pays. Elle est très détaillée pour les produits alimentaires (achetés fréquemment), mais plus sommaire pour des biens durables comme les voitures ou les vélos, achetés plus rarement.

Il faut garder cela en tête au moment d’interpréter les résultats : une statistique agrégée peut masquer des évolutions très contrastées selon les segments de marché. Par exemple, la dynamique de prix des VAE peut différer fortement de celle des vélos mécaniques d’entrée de gamme — sans que cela soit visible dans les séries officielles.

La hausse des prix post-Covid n’a rien de surprenant : pénurie de composants (notamment de dérailleurs), tensions logistiques, explosion de la demande. Mais comment expliquer la baisse récente des prix ? Une déflation apparente qui contredit l’impression de nombreux consommateurs.

L’inflation et le progrès technique

Un facteur souvent trompeur par rapport à nos perceptions est ce que les statisticiens appellent effet qualité . Lorsqu’un institut statistique mesure les prix, il cherche à comparer à caractéristiques constantes : l’objectif est de distinguer une véritable hausse de prix d’un simple changement de produit. Ceci est résumé dans la définition de l’inflation que donne l’institut:

L’inflation est la perte du pouvoir d’achat de la monnaie qui se traduit par une augmentation générale et durable des prix. Elle doit être distinguée de l’augmentation du coût de la vie.

Source: Insee

Prenons un exemple : un ordinateur à 500 € aujourd’hui est bien plus puissant que son équivalent il y a 20 ans. Il y a 20 ans ce même ordinateur aurait coûté beaucoup plus cher - il n’aurait même sans doute pas existé. A contrario, vous ne seriez certainement pas prêt à acheter plus de quelques euros un ordinateur qui coûtait 500€ il y a vingt ans.

Cet effet du progrès technique sur le prix est considéré comme un gain de qualité, et sa valeur est déduite du prix observé, pour éviter de surestimer l’inflation. C’est le même principe que pour la shrinkflation : un paquet de gâteaux plus petit au même prix, c’est une hausse de prix déguisée — et donc intégrée dans l’inflation.

Dans le cas des vélos, il ne s’agit pas de quantité (difficile de vendre un vélo avec une seule roue), mais la qualité a énormément évolué au fil des ans. Et cette amélioration peut entraîner une baisse “ajustée” des prix dans les indices, même si les prix en magasin restent stables ou augmentent légèrement.

Pour s’en faire une idée, comparons les vélos des vainqueurs du Tour de France aux bornes de notre période :

Figure 1: Greg LeMond (1990)

Figure 2: Tadej Pogacar (2025)

Les vélos des vainqueurs du Tour de France sur la période de disponibilité des données¹.

Sans aller jusqu’au matériel pro, les améliorations techniques sont réelles pour le grand public : freins à disque généralisés, vélos mécaniques allégés, dérailleurs plus performants (et plus de vitesses, donc plus de confort), sans parler de l’essor des vélos électriques — dont la généralisation explique sans doute une partie de l’effet qualité même si tous les cyclistes ne sont pas concernés par ces vélos.

Le progrès technique explique ainsi sans doute une partie de la hausse des prix, car les vélos que nous avons aujourd’hui sont plus confortables, plus performants et plus sécurisés que les biclous d’antan, qui ne manquent pour autant pas de charme!

Eléments méthodologiques

L’indicateur utilisé ici est l’ indice des prix à la consommation (IPC) français. Il est calculé chaque mois par l’Insee pour mesurer l’évolution moyenne des prix des biens et services achetés par les ménages vivant en France.

Contrairement à un prix exprimé en euros, un indice est une mesure relative. Une valeur de 120 signifie que les prix ont augmenté de 20 % par rapport à la période de référence. Dans nos séries, la base retenue par l’Insee est l’année 2015, fixée à 100. L’ inflation correspond à la variation de cet indice dans le temps. Plus précisément, l’inflation annuelle désigne l’évolution de l’indice entre une année donnée et l’année précédente.

Niveau d’analyse

Les séries utilisées s’appuient sur la nomenclature COICOP (Classification of Individual Consumption According to Purpose), une classification internationale des biens et services qui regroupe les produits selon leur fonction dans la consommation des ménages. Elle permet d’organiser les dépenses en catégories hiérarchisées et comparables d’un pays à l’autre, et constitue la base de la construction des indices de prix à la consommation.

Certaines fonctions de consommation, comme l’alimentation, sont très finement détaillées. Voici un exemple réel d’arborescence pour une seule sous-catégorie alimentaire :

Exemple de décomposition d’un champ alimentaire

Dérouler les catégories pour comprendre la hiérarchisation des produits

01 – Produits alimentaires et boissons non alcoolisées

01.1 – Produits alimentaires

01.1.1 – Pain et céréales

• 01.1.1.1 – Riz
• 01.1.1.2 – Farines et autres céréales
• 01.1.1.3 – Pain
• 01.1.1.4 – Autres produits de boulangerie
• 01.1.1.5 – Pizzas, quiches et plats cuisinés à base de céréales
• 01.1.1.6 – Pâtes alimentaires et couscous
• 01.1.1.7 – Céréales pour petit déjeuner
• 01.1.1.8 – Autres produits à base de céréales n.c.a.

La liste complète est disponible sur insee.fr

À l’inverse, d’autres postes de consommation sont beaucoup plus agrégés. C’est le cas des vélos, qui ne disposent que d’une seule catégorie dans la nomenclature :

07 – Transports

07.1 - Achat de véhicules

• 07.1.1 - Voitures automobiles
• 07.1.2 - Motocycles
• 07.1.3 – Bicyclettes

Cette ligne unique regroupe tous les types de vélos, sans distinction de modèle ni de gamme. Cela inclut par exemple :

– les vélos mécaniques
– les vélos à assistance électrique (VAE)
– les vélos de ville, de route, tout-terrain (VTT), pour enfants, etc.

Cette agrégation limite la finesse de l’analyse statistique : on observe une évolution moyenne des prix des vélos, sans possibilité de suivre séparément les tendances propres à chaque segment de marché. Or, ces segments peuvent connaître des dynamiques très différentes — par exemple, une montée en gamme ou un essor du VAE qui viendrait tirer les prix observés vers le haut (avant de tenir compte de l’effet qualité), alors que certains modèles stagnent ou baissent.

Contextualisation avec l’indice des prix hors énergie

Pour mettre en perspective l’évolution des prix d’un poste de consommation comme les vélos, il est pertinent de la comparer à celle de l’indice général des prix — c’est-à-dire celui qui reflète l’ensemble du panier de consommation des ménages.

Cela permet de se poser une question plus éclairante :

Les prix des vélos ont-ils augmenté plus vite (ou moins vite) que l’ensemble du panier de consommation ?

Cependant, certains postes — notamment l’énergie — sont très volatils et peuvent masquer les tendances de fond. Pour une lecture plus structurelle de l’évolution du coût de la vie, nous avons choisi ici de nous appuyer sur
l’indice des prix hors énergie.

Ce type de comparaison donne du contexte : une hausse de 15 % des prix des vélos peut sembler importante… mais si l’indice général hors énergie a augmenté de 18 % sur la même période, on peut conclure que les vélos ont suivi une tendance comparable — voire légèrement inférieure — à celle du reste du panier.

Pour en savoir plus:

• Comprendre le calcul du pouvoir d’achat : perceptions individuelles et mesure statistique
• Séries longue période d’indices des prix
• Eléments d’information sur la nomenclature COICOP
• Post de blog “Comment l’Insee mesure-t-il le juste prix”
• Définition de l’IPC

Reproduire cette analyse

Les données sont disponibles sur le site de l’Insee². Elles peuvent être visualisées sur le site:

• L’indice des prix des bicyclettes est ici;
• L’indice des prix hors énergie est ici.

Tout le code utilisé pour cette dataviz est en JavaScript, le langage le plus riche pour faire des visualisations interactives. Il est disponible sur linogaliana/dataviz-bike-price. Le code est assez complexe car il y a ici de nombreuses dimensions d’interactivité mais à partir des sources brutes, avec un peu d’aide d’une IA assistante de code, on a très rapidement un résultat convenable.

data = {
  // Série vélos
  const dataBike = d3.csv("https://minio.lab.sspcloud.fr/lgaliana/data/dataviz-bike/ipc_velo.csv").then(rows =>
    rows.map(d => ({
      ...d,
      date: new Date(d.date + "-01"),
      value: +d.index,
      variable: "bike"
    }))
  ) ;
  
  // Série hors énergie
  const dataHorsEnergie = d3.csv("https://minio.lab.sspcloud.fr/lgaliana/data/dataviz-bike/ipc_hors_energie.csv").then(rows =>
    rows.map(d => ({
      ...d,
      date: new Date(d.date + "-01"),
      value: +d.index,
      variable: "hors_energie"
    }))
  ) ;
  
  // Fusion
  const dataCombined = Promise.all([dataBike, dataHorsEnergie]).then(([a, b]) => [...a, ...b]) ;

  return dataCombined

}

df = data.sort((a, b) => a.date - b.date)

achatDate = debounce(viewof achatDateRaw, 500)
prixAchat = debounce(viewof prixAchatRaw, 500)

viewof achatDateRaw = Inputs.date({
  value: new Date(2018, 11, 1),
  min: new Date(1996, 0, 1),
  max: new Date()
})

viewof prixAchatRaw = Inputs.number({
  min: 0,
  step: 1,
  value: 180,
  placeholder: "ex. 1200"
})

viewof yearZoom = timeRange(
  new d3.min(df, d => d.date),
  new d3.max(df, d => d.date),
  {
    interval: "month",
    value: [achatDate, new d3.max(df, d => d.date)],
    format: ([a, b]) => htl.html`<div style="
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.5rem 0;
    ">
      <span style="flex: 1; text-align: left;">
        ${a.toLocaleString(undefined, { month: "long", year: "numeric" })}
      </span>
      <span style="flex: 1; text-align: right;">
        ${b.toLocaleString(undefined, { month: "long", year: "numeric" })}
      </span>
    </div>`
  }
)

viewof secondYearZoom = timeRange(
  new d3.min(df, d => d.date),
  new d3.max(df, d => d.date),
  {
    interval: "month",
    value: [achatDate, new d3.max(df, d => d.date)],
    format: ([a, b]) => htl.html`<div style="
      display: flex;
      justify-content: space-between;
      gap: 1rem;
      padding: 0.5rem 0;
    ">
      <span style="flex: 1; text-align: left;">
        ${a.toLocaleString(undefined, { month: "long", year: "numeric" })}
      </span>
      <span style="flex: 1; text-align: right;">
        ${b.toLocaleString(undefined, { month: "long", year: "numeric" })}
      </span>
    </div>`
  }
)

viewof size = ToggleSwitch({
  labels: ["Indice", "Valeur (€)"],
  values: ["indice", "valeur"],
  value: "indice",
  sliderColor: "#f5d63b"
})

// composant principal
ToggleSwitch = ({
  labels = ["Gauche", "Droite"],
  values = ["left", "right"],
  value = values[0],
  sliderColor = "#275EFE"
} = {}) => {
  const [labelLeft, labelRight] = labels;
  const [valLeft, valRight] = values;

  const node = html`<div class="toggle-wrapper">
    <span class="label left">${labelLeft}</span>

    <label class="toggle-ios" style="--slider-color: ${sliderColor}">
      <input type="checkbox" ${value === valRight ? "checked" : ""}>
      <span class="slider"></span>
    </label>

    <span class="label right">${labelRight}</span>

    <style>${styleButtonSwitch}</style>
  </div>`;

  const input = node.querySelector("input");

  const updateLabels = () => {
    node.querySelector(".label.left").classList.toggle("active", !input.checked);
    node.querySelector(".label.right").classList.toggle("active", input.checked);
  };

  Object.defineProperty(node, "value", {
    get: () => input.checked ? valRight : valLeft,
    set: (v) => {
      input.checked = (v === valRight);
      updateLabels();
    }
  });

  input.addEventListener("change", () => {
    updateLabels();
    node.dispatchEvent(new CustomEvent("input"));
  });

  updateLabels();
  return node;
}

styleButtonSwitch = `
.toggle-wrapper {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: sans-serif;
  font-size: 14px;
  color: #444;
}

.label {
  transition: font-weight 0.2s;
}

.label.active {
  font-weight: bold;
}

.toggle-ios {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  --slider-color: #275EFE; /* fallback locale */
}

.toggle-ios input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  border-radius: 34px;
  transition: background-color 0.3s;
  cursor: pointer;
}

.slider:before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  background-color: white;
  border-radius: 50%;
  transition: transform 0.3s;
}

.toggle-ios input:checked + .slider {
  background-color: var(--slider-color, #275EFE);
}

.toggle-ios input:checked + .slider:before {
  transform: translateX(20px);
}
`

function timeRange(start, end, options = {}) {
  let {
    interval = "day",
    step = 1,
    format = null,
    label = null,
    value = null
  } = options;

  let ts;
  switch (interval.toLowerCase()) {
    case "millisecond":
      ts = d3.utcMilliseconds(start, end, step);
      break;
    case "second":
      ts = d3.utcSeconds(start, end, step);
      break;
    case "minute":
      ts = d3.utcMinutes(start, end, step);
      break;
    case "hour":
      ts = d3.utcHours(start, end, step);
      break;
    case "day":
      ts = d3.utcDays(start, end, step);
      break;
    case "week":
      ts = d3.utcWeeks(start, end, step);
      break;
    case "month":
      ts = d3.utcMonths(start, end, step);
      break;
    case "year":
      ts = d3.utcYears(start, end, step);
      break;
    default:
      throw Error(`Unknown time interval "${interval}" provided to timeRange`);
  }

  const findClosestDate = (targetDate) => {
    if (!targetDate || ts.length === 0) return null;
    return ts.reduce((closest, current) =>
      Math.abs(current - targetDate) < Math.abs(closest - targetDate) ? current : closest
    );
  };

  let minSel, maxSel;
  if (value && value.length === 2) {
    minSel = findClosestDate(value[0]);
    maxSel = findClosestDate(value[1]);
  } else {
    minSel = ts[0];
    maxSel = ts.at(-1);
  }

  return offsetInterval(ts, {
    value: [minSel, maxSel],
    label: label,
    format: ([a, b]) => htl.html`<div style="
      display: flex;
      justify-content: space-between;
      width: 100%;
      padding: 0.25rem 0.5rem;
      font-weight: bold;
      font-size: 0.95rem;
    ">
    </div>`
  });
}

figureIPC = {
  const datefmt = d3.utcFormat("%b. %Y");

  return Plot.plot({
    width: 670,
    height: 330,
    marginBottom: 38,
    marginRight: 130,
    color: {
      type: "ordinal",
      domain: ["bike", "hors_energie"],
      range: ["#f5d63b", "#d3d3d3"]
    },
        style: "user-select: none; touch-action: none; max-width: 100%;",
    title: html`<div style="font-family: var(--sans-serif); font-weight: 600;">${titleIPC}</div>`,
    x: {
      domain: yearZoom,
      grid: true,
      ticks: xTicks.ticks,
      tickFormat: xTicks.format
    },
    y: {
      domain: yDomain,
      label: ylabel,
      grid: true
    },
    marks: [
      Plot.dot(
        valeurActualisee,
        pointerMX({
          symbol: "triangle",
          x: "date",
          frameAnchor: "top",
          atrest: "maxX",
          fill: "black",
          rotate: 180
        })
      ),

      Plot.ruleY([size == "valeur" ? prixAchat : 100]),

      Plot.ruleX(
        valeurActualisee,
        pointerMX({ x: "date", atrest: "maxX" })
      ),

      Plot.lineY(valeurActualisee, {
        x: "date",
        y: "value",
        stroke: "variable",
        strokeWidth: 1,
        curve: "natural",
        opacity: 0.25
      }),

      Plot.lineY(
        valeurActualisee,
        pointerMX({
          x: "date",
          y: "value",
          atrest: "maxX",
          selector: "before",
          z: "variable",
          stroke: "variable",
          curve: "natural",
          strokeWidth: 3,
          markerStart: true,
        })
      ),

      Plot.text(
        valeurActualisee,
        pointerMX(
          renderMultipleText({
            x: "date",
            y: "value",
            atrest: "maxX",
            channels: { z: "variable" },
            fill: "variable",
            selector: "eq",
            fontWeight: "bold",
            fontSize: 14,
            text: (d) => textPrintIPC(d),
            textAnchor: "end",
            stroke: "white",
            dx: 50,
            render: customOverlapRender()
          })
        )
      ),

      Plot.text(
        valeurActualisee,
        pointerMX({
          x: "date",
          atrest: "maxX",
          text: ({ date }) => date.toLocaleDateString(undefined, { month: "short", year: "numeric" }),
          fill: "currentColor",
          frameAnchor: "top",
          dy: -15
        })
      )
    ]
  });
}

titleIPC = `${size == "valeur" ? "Evolution en valeur" : "Indice des prix"}
  <span style="color: #f5d63b;">● Vélo</span>,
  <span style="color: #d3d3d3;">● Ensemble (hors énergie)</span>
`

captionNoteIPC = `
Cette figure est __interactive__ : vous pouvez modifier l’affichage en survolant la courbe ou en changeant les paramètres ci-dessus.

Elle retrace l’évolution de la *valeur moyenne* des <span style="color: #f5d63b; font-weight: bold;">● vélos</span> entre **${yearZoom[0].toLocaleDateString(undefined, { month: "long", year: "numeric" })}** et **${yearZoom[1].toLocaleDateString(undefined, { month: "long", year: "numeric" })}**, en supposant une valeur initiale de ${size == "valeur" ? prixAchat + "€" : "100"} en ${achatDate.toLocaleDateString(undefined, { month: "long", year: "numeric" })}.

À titre de comparaison, est également représentée l’évolution de la <span style="color: #888; font-weight: bold;">● valeur moyenne de l’ensemble des biens et services (hors énergie)</span>, selon la même période et les mêmes hypothèses de départ.
`

ylabel = `${size == "valeur" ? "Valeur (€)" : `Indice (base 100, ${achatDate.toLocaleDateString(undefined, {month: "long", year: "numeric"})})`}`

function textPrintIPC(d) {
  const nom = d.variable === "bike" ? "Vélo" : "Ensemble";

  let valeurTexte;
  if (size === "valeur") {
    valeurTexte = `${Math.round(d.value)} €`;
  } else {
    // si size === "indice", on affiche d.value - 100
    const diff = Math.round(d.value - 100);
    valeurTexte = ` ${diff > 0 ? "+" : ""}${diff} %`;
  }

  return `${nom} | ${valeurTexte}`;
}

figureInflation = {
  const datefmt = d3.utcFormat("%b. %Y");

  return Plot.plot({
    width: 670,
    height: 330,
    marginBottom: 38,
    marginRight: 130,
    style: {
        backgroundColor: quartoThemeIsDark ? "black" : "white",
    },
    color: {
      type: "ordinal",
      domain: ["bike", "hors_energie"],
      range: ["#32CD32", "#d3d3d3"]
    },
        style: "user-select: none; touch-action: none; max-width: 100%;",
title: html`<div style="font-family: var(--sans-serif); font-weight: 600;">
  Inflation annuelle :
  <span style="color: #32CD32;">● Vélo</span>,
  <span style="color: #d3d3d3;">● Ensemble (hors énergie)</span>
</div>`,
    //caption: md`${captionNote}`,
    x: {
      domain: domainInflationZoom,
      grid: true,
      ticks: xTicksInflation.ticks,
      tickFormat: xTicksInflation.format
    },
    y: {
      domain: yDomainInflation,
      label: "Inflation annuelle (%)",
      tickFormat: d => `${d.toFixed(0)} %`,
      grid: true
    },
    marks: [
      Plot.dot(
        inflationAnnuel,
        pointerMX({
          symbol: "triangle",
          x: "date",
          frameAnchor: "top",
          atrest: "maxX",
          fill: "black",
          rotate: 180
        })
      ),

      Plot.ruleY([0]),

      Plot.ruleX(
        inflationAnnuel,
        pointerMX({ x: "date", atrest: "maxX" })
      ),

      Plot.lineY(inflationAnnuel, {
        x: "date",
        y: "value",
        stroke: "variable",
        strokeWidth: 1,
        curve: "natural",
        opacity: 0.25
      }),

      Plot.lineY(
        inflationAnnuel,
        pointerMX({
          x: "date",
          y: "value",
          atrest: "maxX",
          selector: "before",
          z: "variable",
          stroke: "variable",
          curve: "natural",
          strokeWidth: 3,
          markerStart: true
        })
      ),

      Plot.text(
        inflationAnnuel,
        pointerMX(
          renderMultipleText({
            x: "date",
            y: "value",
            atrest: "maxX",
            channels: { z: "variable" },
            fill: "variable",
            selector: "eq",
            fontWeight: "bold",
            fontSize: 12,
            text: (d) =>
              `${d.variable === "bike" ? "Vélo" : "Ensemble"} | ${Math.round(d.value)}%`,
            textAnchor: "end",
            stroke: "white",
            dx: 50,
            render: customOverlapRender()
          })
        )
      ),

      Plot.text(
        inflationAnnuel,
        pointerMX({
          x: "date",
          atrest: "maxX",
          text: ({ date }) => date.toLocaleDateString(undefined, { month: "short", year: "numeric" }),
          fill: "currentColor",
          frameAnchor: "top",
          dy: -15
        })
      )
    ]
  });
}

captionNote = `
Cette figure est __interactive__ : vous pouvez modifier l’affichage en survolant la courbe ou en changeant les paramètres.

Elle compare l’**inflation annuelle** des <span style="color: #32CD32; font-weight: bold;">● vélos</span> à celle de <span style="color: #888; font-weight: bold;">● l’ensemble des prix (hors énergie)</span> en France.

L’*inflation annuelle* mesure l’évolution, sur douze mois, de l’indice des prix : elle correspond à la hausse (ou à la baisse) moyenne des prix par rapport au même mois un an plus tôt.
`

valeurActuelle = valeurActualisee.at(-1)?.value

valeurActualisee = df.map(d => ({
  date: d.date,
  value: (size == "valeur") ? prixAchat * (d.value / indiceAchat) : 100*d.value / indiceAchat,
  variable: d.variable
}))

indiceAchat = df.find(d =>
  d.date.getFullYear() === achatDate.getFullYear() &&
  d.date.getMonth() === achatDate.getMonth()
)?.value ?? "—"

indiceRef = df.find(d =>
  d.date.getFullYear() === achatDate.getFullYear() &&
  d.date.getMonth() === achatDate.getMonth()
)?.value ?? null

yDomain = (() => {

  const minDate = d3.utcYear.offset(yearZoom[0], -2);  // yearZoom[0] moins 2 ans
  const maxDate = d3.utcYear.offset(yearZoom[1], +2);  // yearZoom[1] plus 2 ans

  const values = valeurActualisee
    .filter(d => d.date >= minDate && d.date <= maxDate)
    .map(d => d.value)
    .filter(d => d != null);
  
  const [min, max] = d3.extent(values);
  const padding = (max - min) * 0.05;
  const yDomain = [min - padding, max + padding];

  return yDomain

})();

xTicks = (() => {
  const [start, end] = yearZoom;
  const durationYears = (end - start) / (1000 * 60 * 60 * 24 * 365.25);

  if (durationYears < 1) {
    return {
      ticks: d3.utcMonth.every(1),
      format: d3.utcFormat("%b %Y")
    };
  } else if (durationYears <= 3) {
    return {
      ticks: d3.utcMonth.every(3),
      format: d3.utcFormat("%b %Y")
    };
  } else if (durationYears <= 10) {
    return {
      ticks: d3.utcYear.every(1),
      format: d3.utcFormat("%Y")
    };
  } else {
    return {
      ticks: d3.utcYear.every(2),
      format: d3.utcFormat("%Y")
    };
  }
})();

xTicksInflation = (() => {
  const [start, end] = secondYearZoom;
  const durationYears = (end - start) / (1000 * 60 * 60 * 24 * 365.25);

  if (durationYears < 1) {
    return {
      ticks: d3.utcMonth.every(1),
      format: d3.utcFormat("%b %Y")
    };
  } else if (durationYears <= 3) {
    return {
      ticks: d3.utcMonth.every(3),
      format: d3.utcFormat("%b %Y")
    };
  } else if (durationYears <= 10) {
    return {
      ticks: d3.utcYear.every(1),
      format: d3.utcFormat("%Y")
    };
  } else {
    return {
      ticks: d3.utcYear.every(2),
      format: d3.utcFormat("%Y")
    };
  }
})();

yDomainInflation = (() => {
  const values = inflationAnnuel.map(d => d.value).filter(v => v != null);
  const [min, max] = d3.extent(values);
  const padding = (max - min) * 0.1; // 10% de marge

  return [min - padding, max + padding];
})();

domainInflationZoom = [
  d3.max([secondYearZoom[0], inflationAnnuel[0].date]),
  secondYearZoom[1]
]

inflationAnnuel = Array.from(
  d3.group(df, d => d.variable), // grouper par variable
  ([variable, values]) => {
    // trier par date (important si les données ne sont pas déjà triées)
    values.sort((a, b) => a.date - b.date);

    // calcul glissement annuel pour cette variable
    return values.map((d, i) => {
      const prev = values[i - 12];
      if (!prev || !prev.value || !d.value) return null;

      return {
        date: d.date,
        value: ((d.value / prev.value) - 1) * 100,
        variable
      };
    }).filter(d => d !== null);
  }
).flat();

CalloutWarning = (content, id = "callout-1") => html`
  <div class="callout callout-style-default callout-warning callout-titled">
    <div class="callout-header d-flex align-content-center"
         data-bs-toggle="collapse"
         data-bs-target=".${id}-contents"
         aria-controls="${id}"
         aria-expanded="true"
         aria-label="Toggle callout">
         
      <div class="callout-icon-container">
        <i class="callout-icon"></i>
      </div>
      
      <div class="callout-title-container flex-fill">
        Warning
      </div>
      
      <div class="callout-btn-toggle d-inline-block border-0 py-1 ps-1 pe-0 float-end">
        <i class="callout-toggle"></i>
      </div>
    </div>
    
    <div id="${id}" class="${id}-contents callout-collapse collapse show">
      <div class="callout-body-container callout-body">
        ${typeof content === "string" ? html`<p>⚠️ ${content}</p>` : content}
      </div>
    </div>
  </div>
`

calloutRecul = CalloutWarning(
  html`
  Les données avant <b>${
              inflationAnnuel[0].date.toLocaleString(undefined, { month: "long", year: "numeric" })
            }</b> ne sont pas représentées car l'inflation en glissement annuel nécessite 12 mois de recul.
  `
)

viewof quartoThemeIsDark = {
  const span = html`<span style="display: none;"></span>`;

  function updateTheme() {
    const isDark = document.body.classList.contains("quarto-dark");
    span.value = isDark;
    span.dispatchEvent(new CustomEvent("input"));
  }

  // Initial check
  updateTheme();

  // Observer les changements de classe sur <body>
  const observer = new MutationObserver(() => updateTheme());

  observer.observe(document.body, {
    attributes: true,
    attributeFilter: ["class"]
  });

  // Nettoyage si jamais nécessaire
  span.remove = () => observer.disconnect();

  return span;
}

import {debounce} from "@mbostock/debouncing-input"
import {offsetInterval} from "@mootari/offset-slider"

import {pointerMX, renderMultipleText, customOverlapRender} from "@observablehq/plot-pointer-driven-marks"

Footnotes

1. Pour en savoir plus sur l’évolution des vélos du Tour, lisez ce billet de Datawrapper.

2. Malheureusement, le CSV qu’on peut récupérer n’est pas ingérable directement dans Javascript car il est zippé. Par ailleurs, il contient quelques métadonnées qui brouillent sa lecture. Je me suis donc résolu à faire ce que je déteste, à savoir modifier à la main plutôt que dans un code - où cela est traçable - un fichier brut fourni par un producteur de données et le mettre à disposition quelque part.

   Il existe un autre moyen de récupérer les données Insee, plus adapté aux logiciels statistiques, une API nommée API Mélodi. Néanmoins, à l’heure actuelle, seules les séries de l’IPCH (indice des prix harmonisé à l’échelle européenne pour Eurostat) sont disponibles. Même si cet exercice n’a pas la rigueur d’une publication statistique qui se doit d’interroger les hypothèses conceptuelles de l’analyse, j’ai tout de même fait le choix qu’aurait privilégié un statisticien public ; à savoir utiliser l’IPC plutôt que l’IPCH pour l’analyse de la situation française.