show word and year instead of date and value

Question

I am using Barchart to show dummy data but instead of date and value, i want word and year 

for example: word{Paddy,Maize,Wheat,Pulses,Oilseed,Fodder,Vegetables}

year{2001,2002,2003,2004,2005}

import * as Plot from '@observablehq/plot';
import * as d3 from 'd3';

import * as PieChart from './piechart';

var spos =
    [{ "date": "2022/01/04", "value": 10 },
    { "date": "2022/02/17", "value": 20 },
    { "date": "2022/03/26", "value": 21 },
    { "date": "2022/04/02", "value": 22 },
    { "date": "2022/05/27", "value": 25 },
    { "date": "2022/06/28", "value": 30 },
    { "date": "2022/07/27", "value": 31 },
    { "date": "2022/08/15", "value": 36 },
    { "date": "2022/09/04", "value": 38 },
    { "date": "2022/10/11", "value": 40 },
    { "date": "2022/11/27", "value": 43 },
    { "date": "2022/12/21", "value": 48 },
    { "date": "2023/01/01", "value": 50 },
    { "date": "2023/02/20", "value": 54 },
    { "date": "2023/03/28", "value": 59 },
    { "date": "2023/04/28", "value": 60 }];


const dateParser = d3.timeParse("%Y/%m/%d");
const xAccessor = d => dateParser(d.date);


let data = spos.map(d => {
    return {
        date: Date.parse((d.date)),
        value: d.value,
    };
})


function BarChart(data, {
    x = (d, i) => i, // given d in data, returns the (ordinal) x-value
    y = d => d, // given d in data, returns the (quantitative) y-value
    title, // given d in data, returns the title text
    marginTop = 20, // the top margin, in pixels
    marginRight = 0, // the right margin, in pixels
    marginBottom = 30, // the bottom margin, in pixels
    marginLeft = 40, // the left margin, in pixels
    width = 640, // the outer width of the chart, in pixels
    height = 400, // the outer height of the chart, in pixels
    xDomain, // an array of (ordinal) x-values
    xRange = [marginLeft, width - marginRight], // [left, right]
    yType = d3.scaleLinear, // y-scale type
    yDomain, // [ymin, ymax]
    yRange = [height - marginBottom, marginTop], // [bottom, top]
    xPadding = 0.1, // amount of x-range to reserve to separate bars
    yFormat, // a format specifier string for the y-axis
    yLabel, // a label for the y-axis
    color = "currentColor" // bar fill color
} = {}) {
    // Compute values.
    const X = d3.map(data, x);
    const Y = d3.map(data, y);

    // Compute default domains, and unique the x-domain.
    if (xDomain === undefined) xDomain = X;
    if (yDomain === undefined) yDomain = [0, d3.max(Y)];
    xDomain = new d3.InternSet(xDomain);

    // Omit any data not present in the x-domain.
    const I = d3.range(X.length).filter(i => xDomain.has(X[i]));

    // Construct scales, axes, and formats.
    const xScale = d3.scaleBand(xDomain, xRange).padding(xPadding);
    const yScale = yType(yDomain, yRange);
    const xAxis = d3.axisBottom(xScale).tickSizeOuter(0);
    const yAxis = d3.axisLeft(yScale).ticks(height / 40, yFormat);

    // Compute titles.
    if (title === undefined) {
        const formatValue = yScale.tickFormat(100, yFormat);
        title = i => `${X[i]}\n${formatValue(Y[i])}`;
    } else {
        const O = d3.map(data, d => d);
        const T = title;
        title = i => T(O[i], i, data);
    }

    const svg = d3.create("svg")
        .attr("width", width)
        .attr("height", height)
        .attr("viewBox", [0, 0, width, height])
        .attr("style", "max-width: 100%; height: auto; height: intrinsic;");

    svg.append("g")
        .attr("transform", `translate(${marginLeft},0)`)
        .call(yAxis)
        .call(g => g.select(".domain").remove())
        .call(g => g.selectAll(".tick line").clone()
            .attr("x2", width - marginLeft - marginRight)
            .attr("stroke-opacity", 0.1))
        .call(g => g.append("text")
            .attr("x", -marginLeft)
            .attr("y", 10)
            .attr("fill", "currentColor")
            .attr("text-anchor", "start")
            .text(yLabel));

    const bar = svg.append("g")
        .attr("fill", color)
        .selectAll("rect")
        .data(I)
        .join("rect")
        .attr("x", i => xScale(X[i]))
        .attr("y", i => yScale(Y[i]))
        .attr("height", i => yScale(0) - yScale(Y[i]))
        .attr("width", xScale.bandwidth());

    if (title) bar.append("title")
        .text(title);

    svg.append("g")
        .attr("transform", `translate(0,${height - marginBottom})`)
        .call(xAxis);

    return svg.node();
}

let chart = BarChart(data, {
    x: d => d.date,
    y: d => d.value,
    xDomain: d3.groupSort(data, ([d]) => -d.value, d => d.date), // sort by descending frequency
    yFormat: "%",
    yLabel: "? Frequency",
    width: 1000,
    height: 500,
    color: "steelblue"
})

let spos_elem = document.getElementById('spos');
spos_elem.appendChild(chart);
document.getElementById("footerText").innerHTML = "Amount of Seed Produced";
const element1 = document.getElementById("footerrm");
element1.remove();

const element2 = document.getElementById("footerrm2");
element2.remove();

const element3 = document.getElementById("footerrm3");
element3.remove();