Reproduction d’une figure de William Playfair (1786) sur des données modernes

Il est beaucoup question de dette publique actuellement. Il se trouve que j’ai récemment découvert dans le cours de Stanislas Dehaene au collège de France sur la perception des graphiques qu’une des premières représentations graphiques modernes, qu’on doit à William Playfair en 1786, représentait justement l’évolution de la dette (anglaise) au cours du temps.

J’avais donc envie de m’amuser à rejouer cette figure historique sur les données françaises récentes (détails sur celles-ci plus bas). Et puis ensuite, tout de même, de faire une représentation qui bénéficie de presque 250 ans de recul sur la perception des graphiques et permettant de mieux communiquer la “vérité” (une notion qui elle-même mérite discussion) des données. Les enjeux conceptuels et les précautions d’interprétation sont proposés plus bas.

{
  // Crée le conteneur
  const container = html`<div class="figures-playfair"></div>`;

  // Petite fonction utilitaire pour (re)faire la mise en page
  const mq = window.matchMedia("(min-width: 900px)");
  function applyLayout() {
    container.style.display = "grid";
    container.style.gridTemplateColumns = mq.matches ? "1fr 1fr" : "1fr";
    container.style.gap = "16px";
    container.style.alignItems = "start";
  }

  // Construire les deux panneaux
  const left = document.createElement("div");
  left.appendChild(html`<h4>La dette française, à la Playfair</h4>`);
  //  left.appendChild(
  //  makeRough(
  //    plot_playfair_raw,
  //    { randomize: false, bowing: 0, roughness: 0, backgroundColor: "#fbe9d3", fillStyle: "solid", fontFamily: "Patrick Hand" }
  //  )
  //);

  const img_playfair = Object.assign(new Image(), { src: "https://minio.lab.sspcloud.fr/lgaliana/data/dataviz/chart_national_debt_reproduction.png" });
  img_playfair.style.maxWidth = "100%";
  img_playfair.style.height = "auto";
  left.appendChild(img_playfair);

  const right = document.createElement("div");
  right.appendChild(html`<h4>Version originale</h4>`);
  const img = Object.assign(new Image(), { src: "https://minio.lab.sspcloud.fr/lgaliana/data/dataviz/playfair-national-debt.png" });
  // Image responsive
  img.style.maxWidth = "100%";
  img.style.height = "auto";
  right.appendChild(img);

  container.append(left, right);

  // Applique la mise en page initiale et écoute les changements
  applyLayout();

  // Compat ancien / nouveau navigateur
  if (mq.addEventListener) mq.addEventListener("change", applyLayout);
  else mq.addListener(applyLayout);

  // Sécuriser avec un listener de resize (au cas où)
  const onResize = () => applyLayout();
  window.addEventListener("resize", onResize);

  // Nettoyage si le DOM est détaché
  container.addEventListener("DOMNodeRemoved", () => {
    if (mq.removeEventListener) mq.removeEventListener("change", applyLayout);
    else mq.removeListener(applyLayout);
    window.removeEventListener("resize", onResize);
  }, { once: true });

  return container;
}

Parmi les principaux problèmes de la représentation de gauche, on peut noter l’axe à droite auquel nous sommes peu familiers¹ et le point de départ de l’axe des ordonnées. Sur ce dernier sujet, il est plus juste de partir de 0 qui fournit, en quelques sorte, un idéal (un Etat sans endettement) permettant d’évaluer plus justement les valeurs observées et la pente de la série temporelle.

On peut aussi tirer parti de l’interactivité du navigateur web pour rendre plus ergonomique la visualisation. Pour améliorer la contextualisation de ces statistiques, des annotations sur certaines périodes clés ne seraient pas inutiles. Mais comme elles peuvent alourdir la visualisation sans réflexion approfondie sur l’ergonomie de la figure, j’ai préféré ne pas en mettre.

html`
${viewof yearZoom}
${viewof plot_modern}
`

viewof plot_modern = Plot.plot({
  width: 670,
  height: 330,
  marginBottom: 38,
  marginRight: 130,
  style: "user-select: none; touch-action: none; max-width: 100%;",
  title: html`<div style="font-family: var(--sans-serif); font-weight: 600;">${'La dette des administrations publiques françaises'}</div>`,
  caption: md`Cette figure représente la [dette au sens de Maastricht](https://www.insee.fr/fr/statistiques/8574703?sommaire=8574832#documentation) des administrations publiques françaises, rapportée au PIB. Les seuils de 60% (critère de convergence de Maastricht) et de 100% (dette égale au PIB) ont été rapportés.<br>Source: Insee, [comptes nationaux annuels](https://www.insee.fr/fr/statistiques/8574703?sommaire=8574832#documentation).`,
  x: { domain: yearZoom, grid: true, label: "Année" },
  y: {
    grid: true, domain: [0, d3.max(df, d => d.OBS_VALUE_NIVEAU)+10],
    label: "Ratio dette/PIB (%)"
    },
  marks: [

    Plot.ruleY(
      [60, 100],
      {strokeDasharray: "4,2"}
    ),

    // petit triangle indicateur
    Plot.dot(
      df,
      pointerMX({
        symbol: "triangle",
        x: "TIME_PERIOD",
        frameAnchor: "top",
        atrest: "maxX",
        fill: "#c81025",
        rotate: 180
      })
    ),

    // courbe fine en arrière-plan
    Plot.lineY(df, {
      x: "TIME_PERIOD",
      y: "OBS_VALUE_NIVEAU",
      stroke: "red",
      strokeWidth: 1,
      curve: "natural",
      opacity: 0.250
    }),

    // courbe principale "mise en avant"
    Plot.lineY(
      df,
      pointerMX({
        x: "TIME_PERIOD",
        y: "OBS_VALUE_NIVEAU",
        atrest: "maxX",
        selector: "before",
        stroke: "#c81025",
        curve: "natural",
        strokeWidth: 3,
        markerStart: true
      })
    ),


    // annotation du nom de la série (fixe : "Dette")
    Plot.text(
      df,
      pointerMX({
        x: "TIME_PERIOD",
        y: "OBS_VALUE_NIVEAU",
        atrest: "maxX",
        selector: "eq",
        fontWeight: "bold",
        text: d => d.OBS_VALUE_NIVEAU.toFixed(1) + " %",
        fontSize: 14,
        textAnchor: "end",
        dx: 50,
        stroke: "white",
        fill: "#c81025"
      })
    ),

    // annotation de valeur dynamique
    Plot.text(
      df,
      pointerMX({
        x: "TIME_PERIOD",
        y: "OBS_VALUE_NIVEAU",
        atrest: "maxX",
        text: (d) => d.TIME_PERIOD.toLocaleString(undefined, {year: "numeric"}),
        fill: "currentColor",
        frameAnchor: "top",
        dy: -15
      })
    ),

  ]
});

Données et définitions conceptuelles

Ces graphiques s’appuient sur les comptes nationaux - une représentation synthétique de la structure de l’économie française - publiés par l’Insee. Le concept retenu est celui de la dette au sens de Maastricht. Son périmètre est ici celui des administrations publiques (les APU dans le jargon de la comptabilité nationale) qui prend en compte les passifs de l’État, des organismes divers d’administration centrale, des administrations publiques locales et des administrations de sécurité sociale. Le périmètre des engagements de l’Etat intégrés dans la définition de la dette au sens de Maastricht est proposé sur le site de l’Insee .

Ces données ont été récupérées par le biais de l’API Melodi de l’Insee qui vise à simplifier la récupération de certains jeux de données - notamment ceux issus de la comptabilité nationale - de l’Insee. Les données en question sont consultables sur catalogue-donnees.insee.fr/fr/explorateur/DD_CNA_APU et récupérables sous forme de JSON depuis l’URL https://api.insee.fr/melodi/data/DD_CNA_APU?REF_SECTOR=S13&STO=_GD_PPIB.

Le code de préparation de données est disponible ci-dessous. L’ensemble du code pour produire les visualisations est disponible sur linogaliana/playfair-viz-reproduction

filtered = df.filter(d =>
  d.TIME_PERIOD >= yearZoom[0] && d.TIME_PERIOD < yearZoom[1]
);

df = d3.json("https://api.insee.fr/melodi/data/DD_CNA_APU?REF_SECTOR=S13&STO=_GD_PPIB").then(data => {
  const flattened = data.observations.map(obs => {
    const dimensions = { ...obs.dimensions };

    // Convert to Date object
    dimensions.TIME_PERIOD = new Date(dimensions.TIME_PERIOD + "-06-01");

    const measures = Object.fromEntries(
      Object.entries(obs.measures ?? {}).map(([k, v]) => [k, v.value])
    );

    return {
      ...dimensions,
      ...measures
    };
  });

  // ⬅️ Sort in ascending order of TIME_PERIOD
  flattened.sort((a, b) => a.TIME_PERIOD - b.TIME_PERIOD);

  console.table(flattened);
  return flattened;
});

temp = Array({
  url: "https://minio.lab.sspcloud.fr/lgaliana/data/dataviz/chart_national_debt2.png",
  x: d3.timeMonth.offset( d3.min(filtered, d => d.TIME_PERIOD), 180),
  y: d3.max(filtered, d => d.OBS_VALUE_NIVEAU) - 10
})

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);
      format = format || "%M:%S.%L";
      break;
    case "second":
      ts = d3.utcSeconds(start, end, step);
      format = format || "%H:%M:%S";
      break;
    case "minute":
      ts = d3.utcMinutes(start, end, step);
      format = format || "%H:%M";
      break;
    case "hour":
      ts = d3.utcHours(start, end, step);
      format = format || "%H:%M";
      break;
    case "day":
      ts = d3.utcDays(start, end, step);
      format = format || "%Y-%m-%d";
      break;
    case "week":
      ts = d3.utcWeeks(start, end, step);
      format = format || "%Y-%m-%d";
      break;
    case "month":
      ts = d3.utcMonths(start, end, step);
      format = format || "%b %Y";
      break;
    case "year":
      ts = d3.utcYears(start, end, step);
      format = format || "%Y";
      break;
    default:
      throw Error(`Unknown time interval "${interval}" provided to timeRange`);
  }

  // Because we are dealing with Date objects rather than primitives, the value setting for initial
  // selection needs to be matched against closest of the internally stored Dates rather than direct
  // equality testing.
  const findClosestDate = (targetDate) => {
    if (!targetDate || ts.length === 0) {
      return null;
    }
    let closestDate = ts[0];
    let smallestDifference = Math.abs(ts[0] - targetDate);
    for (const date of ts) {
      const difference = Math.abs(date - targetDate);
      if (difference < smallestDifference) {
        smallestDifference = difference;
        closestDate = date;
      }
    }
    return closestDate;
  };

  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`<span ${{
      style: "display: flex; justify-content: space-between"
    }}>
      <span>${a.toLocaleString(undefined, {year: "numeric"})} </span>
      <span style="font-size: 1.2em; margin: 0 0.2em; vertical-align: middle;">→</span>
      <span>${b.toLocaleString(undefined, {year: "numeric"})}</span>
    </span>`
    })

}

import {offsetInterval} from "@mootari/offset-slider"

html`
<link href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Patrick+Hand&family=Shadows+Into+Light&display=swap" rel="stylesheet">
`

svg2rough = import("https://cdn.skypack.dev/svg2roughjs@3.0.1?min")

makeRough = (svg, {
  backgroundColor = "white",
  fontFamily = "cursive",
  fillStyle = "hachure",
  roughness = 1.5,
  bowing = 1,
  randomize = true,
  pencilFilter = true
} = {}) => {
  const S = Object.assign(
    new svg2rough.Svg2Roughjs(document.createElement("svg")),
    {
      svg,
      backgroundColor,
      pencilFilter,
      randomize,
      fontFamily,
      roughConfig: { bowing, roughness, fillStyle }
    }
  );
  S.sketch();
  return S.outputElement;
}

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 {pointerMX, renderMultipleText, customOverlapRender} from "@observablehq/plot-pointer-driven-marks"

plot_playfair_raw = {

  // règle de responsive
  let plotWidth;
  if (width < 768) { // seuil pour mobile/tablette
    plotWidth = width * 0.95; // quasi toute la largeur
  } else {
    plotWidth = width * 0.5; // moitié de l'écran sur grand
  }

  const plotHeight = plotWidth * 8.5/5;

  const plot_playfair_raw = Plot.plot({
    width: plotWidth,
    height: plotHeight,
    style: {
      backgroundColor: '#fbe9d3',
      color: 'black',
    },
    x: { label: "Année", domain: [d3.min(df, d => d.TIME_PERIOD), d3.max(df, d => d.TIME_PERIOD)]},
    y: {
      axis: "right",
      label: "Ratio dette/PIB (%)",
    },
    marks: [
      Plot.areaY(df, {
        x: "TIME_PERIOD",
        y2: "OBS_VALUE_NIVEAU",
        y1: d => d3.min(df, d => d.OBS_VALUE_NIVEAU),
        fill: "#a9997a",
        curve: "linear",
        opacity: 0.8
      }),
      Plot.line(df, {
        x: "TIME_PERIOD",
        y: "OBS_VALUE_NIVEAU",
        stroke: "darkred",
        strokeWidth: 3.5,
        curve: "linear",
        tip: true,
        strokeOpacity: 0.6
      }),
      Plot.gridY({ strokeOpacity: 0.6 }),
      Plot.gridX({ strokeOpacity: 0.6, interval: "1 year" }),

      // --- évènements ---
      Plot.text(
        [{ TIME_PERIOD: new Date("2008-01-01"), OBS_VALUE_NIVEAU: d3.max(df, d => d.OBS_VALUE_NIVEAU) }],
        {
          x: (d) => d3.timeMonth.offset(d.TIME_PERIOD, -5),
          y: (d) => d.OBS_VALUE_NIVEAU - 20,
          text: () => "Crise financière",
          rotate: -90,
          dy: -20,
          fontSize: 12,
          fill: "black",
          textAnchor: "end",
          fontWeight: "bold"
        }
      ),
      Plot.text(
        [{ TIME_PERIOD: new Date("2020-01-01"), OBS_VALUE_NIVEAU: d3.max(df, d => d.OBS_VALUE_NIVEAU) }],
        {
          x: (d) => d3.timeMonth.offset(d.TIME_PERIOD, -5),
          y: (d) => d.OBS_VALUE_NIVEAU - 20,
          text: () => "Covid",
          rotate: -90,
          dy: -20,
          fontSize: 12,
          fill: "black",
          textAnchor: "end",
          fontWeight: "bold"
        }
      ),

      // ton image
      Plot.image(temp, {
        x: "x",
        y: "y",
        src: "https://minio.lab.sspcloud.fr/lgaliana/data/dataviz/chart_national_debt2.png",
        width: 200,
        title: "Title"
      })
    ]
  });

  return plot_playfair_raw
}

viewof yearZoom = timeRange(
  new d3.min(df, d => d.TIME_PERIOD),
  new d3.max(df, d => d.TIME_PERIOD),
  {
    interval: "year",
    value: [new d3.min(df, d => d.TIME_PERIOD), new d3.max(df, d => d.TIME_PERIOD)]
  }
)

Plot = require("https://cdn.jsdelivr.net/npm/@observablehq/plot@0.6.16/dist/plot.umd.min.js")

Footnotes

1. Ici, il ne me semble pas choquant de représenter à droite l’axe des \(y\) si on désire focaliser l’attention sur les dernières valeurs. J’ai choisi de remettre l’axe à gauche pour correspondre aux attentes usuelles des lecteurs. De toute manière, pour connaître les valeurs précises, l’interactivité permet d’afficher celles-ci avec la souris (ordinateur) ou en cliquant sur un point (smartphone ou tablette).