code: function visProps(props) {
    const {
      data,
      height,
      width,
    } = props;
  
    const padding = {
      top: 20,
      right: 20,
      bottom: 40,
      left: 50,
    };
  
    const plotAreaWidth = width - padding.left - padding.right;
    const plotAreaHeight = height - padding.top - padding.bottom;
  
    const xDomain = d3.extent(data, d => d.x);
    const yDomain = d3.extent(data, d => d.y);
    const xDomainPadding = 0.05 * xDomain[1];
    const yDomainPadding = 0.02 * yDomain[1];
  
    const xScale = d3.scaleLinear()
      .domain([xDomain[0] - xDomainPadding, xDomain[1] + xDomainPadding])
      .range([0, plotAreaWidth]);
  
    const yScale = d3.scaleLinear()
      .domain([yDomain[0] - yDomainPadding, yDomain[1] + yDomainPadding])
      .range([plotAreaHeight, 0]);
  
    const color = ({ y }) => `rgb(150, 200, ${Math.floor(255 * (yScale(y) / plotAreaHeight))})`;
  
  
    const voronoiDiagram = d3.voronoi()
      .x(d => xScale(d.x))
      .y(d => yScale(d.y))
      .size([plotAreaWidth, plotAreaHeight])(data);
  
    return {
      color,
      padding,
      plotAreaWidth,
      plotAreaHeight,
      xScale,
      yScale,
      voronoiDiagram,
    };
  }
docs: Figure out what is needed to render the chart based on the props of the component