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: