I’m doing a d3 bar graph in CodePen, but the d3 isn’t playing. It just shows me the title(which is from the HTML) and the rest of the screen is blank. I’ve already checked the settings and added d3 to the external links section, but that doesn’t seem to be working. Is there something else I’m missing?

const data = [
  { year: "2000", Smartphones: 2, PCs: 7, HomePhone: 10, iPad: 0 },
  { year: "2005", Smartphones: 4, PCs: 8, HomePhone: 9, iPad: 0 },
  { year: "2010", Smartphones: 6, PCs: 9, HomePhone: 6, iPad: 6 },
  { year: "2015", Smartphones: 8, PCs: 9, HomePhone: 3, iPad: 8 },
  { year: "2020", Smartphones: 10, PCs: 7, HomePhone: 1, iPad: 9 }
];

const width = 800,
  height = 400,
  margin = { top: 20, right: 30, bottom: 40, left: 100 };

// Create SVG container
const svg = d3
  .select("#popularity-chart")
  .append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

// Extract keys (categories)
const keys = ["Smartphones", "PCs", "HomePhone", "iPad"];

// Create a color scale
const color = d3.scaleOrdinal().domain(keys).range(d3.schemeCategory10);

// Create X and Y scales
const xScale = d3
  .scaleLinear()
  .domain([0, 10]) // Popularity range
  .range([0, width]);

const yScale = d3
  .scaleBand()
  .domain(keys) // Instead of years, we show categories on Y
  .range([0, height])
  .padding(0.2);

// Add X Axis
svg
  .append("g")
  .attr("transform", `translate(0, ${height})`)
  .call(d3.axisBottom(xScale));

// Add Y Axis
svg.append("g").call(d3.axisLeft(yScale));

// Function to update the bars for a specific year
function updateChart(yearIndex) {
  const yearData = data[yearIndex];

  const bars = svg.selectAll("rect").data(
    keys.map((key) => ({
      name: key,
      value: yearData[key]
    }))
  );

  // ENTER (New bars)
  bars
    .enter()
    .append("rect")
    .attr("y", (d) => yScale(d.name))
    .attr("x", 0)
    .attr("height", yScale.bandwidth())
    .attr("fill", (d) => color(d.name))
    .merge(bars) // UPDATE (Existing bars)
    .transition()
    .duration(1000)
    .attr("width", (d) => xScale(d.value)); // Animate width change

  // EXIT (Remove bars if needed)
  bars.exit().remove();
}

// Start with the first year
let currentYearIndex = 0;
updateChart(currentYearIndex);

// Animate year-by-year every 2 seconds
setInterval(() => {
  currentYearIndex = (currentYearIndex + 1) % data.length; // Loop through years
  updateChart(currentYearIndex);
}, 2000);

<script src=".9.0/d3.min.js"></script>
<div id="popularity-chart"></div>