JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://d3js.org/d3.v7.min.js"></script>
 <div class='chronologie'><p><strong><span style='font-size: 83%;'><code>1833</code></span></strong> <span style='font-size: 83%;'><span class='y1861' style='background-color: #F5F5F5;'><code>1861</code></span></span>
<span style='font-size: 83%;'><span class='y1866' style='background-color: #F5F5F5;'><code>1866</code></span></span>
<span style='font-size: 83%;'><span class='y1868' style='background-color: #F5F5F5;'><code>1868</code></span></span>
<span style='font-size: 83%;'><span class='y1872' style='background-color: #F5F5F5;'><code>1872</code></span></span>
<span style='font-size: 83%;'><span class='y1872' style='background-color: #F5F5F5;'><code>1872</code></span></span>
<span style='font-size: 83%;'><span class='y1872' style='background-color: #F5F5F5;'><code>1872</code></span></span>
<span style='font-size: 83%;'><span class='y1874' style='background-color: #F5F5F5;'><code>1874</code></span></span>
<span style='font-size: 83%;'><span class='y1877' style='background-color: #F5F5F5;'><code>1877</code></span></span>
<span style='font-size: 83%;'><span class='y1886' style='background-color: #F5F5F5;'><code>1886</code></span></span>
<span style='font-size: 83%;'><span class='y1888' style='background-color: #F5F5F5;'><code>1888</code></span></span>
<span style='font-size: 83%;'><span class='y1894' style='background-color: #F5F5F5;'><code>1894</code></span></span>
<span style='font-size: 83%;'><span class='y1896' style='background-color: #F5F5F5;'><code>1896</code></span></span>

JavaScript

// Extraction des années depuis le code HTML
const years = Array.from(document.querySelectorAll('.chronologie code'))
    .map(el => parseInt(el.textContent))
    .filter(year => !isNaN(year));

// Compter les occurrences de chaque année
const yearCounts = years.reduce((acc, year) => {
    acc[year] = (acc[year] || 0) + 1;
    return acc;
}, {});

// Convertir en tableau pour D3.js
const data = Object.entries(yearCounts).map(([year, count]) => ({ year: +year, count }));

// Dimensions du SVG
const width = 800, height = 100, margin = { top: 20, right: 20, bottom: 30, left: 50 };

// Création du SVG
const svg = d3.select("body")
    .append("svg")
    .attr("width", width)
    .attr("height", height);

// Définition des échelles
const x = d3.scaleLinear().domain([1600, 2030]).range([margin.left, width - margin.right]);
const y = d3.scaleLinear()
    .domain([0, Math.ceil(d3.max(data, d => d.count))]) // S'assurer que le domaine de y est entier
    .range([height - margin.bottom, margin.top]);

// Ajout des axes
svg.append("g")
    .attr("transform", `translate(0,${height - margin.bottom})`)
    .call(d3.axisBottom(x).tickFormat(d3.format("d")));

svg.append("g")
    .attr("transform", `translate(${margin.left},0)`)
    .call(d3.axisLeft(y).ticks(Math.ceil(d3.max(data, d => d.count)))); // Affichage des ticks entiers

// Ajout des lignes pour les occurrences
svg.selectAll(".bar")
    .data(data)
    .enter()
    .append("line")
    .attr("x1", d => x(d.year))
    .attr("x2", d => x(d.year))
    .attr("y1", height - margin.bottom)
    .attr("y2", d => y(d.count))
    .attr("stroke", "red")
    .attr("stroke-width", 1);