D3-select-x-vars.js

let xVar = document.getElementById("select-x-var").value;

document.getElementById("select-x-var").addEventListener("change", (e)=>{
  
  // update the x-variable based on the user selection
  xVar = e.target.value   

  // rescale the x-axis
  xScale = d3.scaleLinear()
    .domain([0, d3.max(articleData, d => d[xVar]) ])    
    .range([0, 600]);

  // redraw the x-axis
  svg.select("#xAxis")            
    .call(d3.axisBottom(xScale))

  // transition each circle element
  svg.selectAll(".bubble")
    .transition()
    .duration(1000)
    .attr("cx", (d) => xScale(d[xVar]) )
})