React D3 Scatter Plot failing test 11

JavaScript
#1

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:

#2

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

#3

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