React D3 Scatter Plot failing test 11

User Story #11: I can see that the range of the x-axis labels are within the range of the actual x-axis data.
Test returns this error message: “x axis labels are below the range of the actual data : expected NaN to be at least 1994”

The code passes test #12, which is the same but for the y axis. It also passes all other tests for values and labels aligning.

My Codepen:
https://codepen.io/felavid/pen/gOmwoEy

For reference, I had already successfully used a very similar D3-React solution for the Bar Chart:
https://codepen.io/felavid/pen/PopzXOg

This is how I build the marks and ticks using D3:

  const xValue = (d) => d.Year;
  const yValue = (d) => d.Time;

  const dataYear = data.map(xValue);
  const dataTime = data.map(yValue);

  const xScale = d3
    .scaleLinear()
    .domain(d3.extent(dataYear))
    .range([0, innerWidth])
    .nice();

  const yScale = d3
    .scaleTime()
    .domain(d3.extent(dataTime))
    .range([0, innerHeight])
    .nice();

This is how I render the marks in (JSX - Marks Component):

data.map((d, i) => (
    <circle
      key={"dot" + data[i].Place} // Unique key as required by React
      data-xvalue={data[i].Year} // Per FCC user story #5
      data-yvalue={data[i].Time} // Per FCC user story #5
      className="dot" // Per FCC user story #4
      cx={xScale(xValue(d))}  // Also tried cx={xScale(data[i].Year)}
      cy={yScale(yValue(d))}  // Also tried cy={yScale(data[i].Time)}
      r="7"
      fill={data[i].Doping ? "#FF4500" : "#228C22"}
      opacity="0.7"
    />
  ));

This is how I render the x axis in JSX (AxisBottom Component):

const AxisBottom = ({ xScale, innerHeight, tickOffset }) =>
  xScale.ticks().map((tickValue) => (
    <g
      key={tickValue}
      className="tick"
      transform={`translate(${xScale(tickValue)},0)`}
    >
      <line y2={innerHeight} stroke="#f1f2f3" />
      />
      <text
        style={{ textAnchor: "middle" }}
        dy=".71em"
        y={innerHeight + tickOffset}
      >
        {tickValue}   // For comparison, I render the y axis tick as {yAxisTickFormat(tickValue)} but I understand this label can be passed as is (integer for the year)
      </text>
    </g>
  ));

Any help is greatly appreciated. Thank you.

Challenge: Visualize Data with a Scatterplot Graph

Link to the challenge:

What is that broken closing tag doing there? Why did Codepen not catch it? That was it!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.