Tell us what’s happening:
I could not pass the tests at first, because I typed everything at the top:
// Add your code below this line
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(" + padding + ",0)" )
.call(yAxis);
// Add your code above this line
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
// Add your code below this line
// Add your code above this line
And got an error:
// running tests
The y-axis g element should have a transform attribute to translate the axis by (60, 0).
// tests completed
I then noticed another place for my code at the bottom, and placed the exact same code for adding the yAxis
there. And now it works!
But why adding yAxis
before xAxis
resulted into error? The rendered result looks exactly the same! Is calling yAxis
before xAxis
invalid code?
Your code so far
<body>
<script>
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 60;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d[0]))
.attr("cy",(d) => yScale(d[1]))
.attr("r", (d) => 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => (d[0] + "," + d[1]))
.attr("x", (d) => xScale(d[0] + 10))
.attr("y", (d) => yScale(d[1]))
const xAxis = d3.axisBottom(xScale);
// Add your code below this line
const yAxis = d3.axisLeft(yScale);
// Add your code above this line
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
// Add your code below this line
svg.append("g")
.attr("transform", "translate(" + padding + ",0)" )
.call(yAxis);
// Add your code above this line
</script>
</body>
Your browser information:
User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:91.0) Gecko/20100101 Firefox/91.0
Challenge: Data Visualization with D3 - Add Axes to a Visualization
Link to the challenge: