[beta] D3: Learn About SVG in D3 Constants and instructions #12853
Description
Challenge learn-about-svg-in-d3 has an issue.
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64; rv:50.0) Gecko/20100101 Firefox/50.0.
Please describe how to reproduce this issue, and include links to screenshots if possible.
The provided code for this challenge includes constants that, I assume, are to be used for the width and height attributes, but the instructions don't mention them anywhere:
Add an svg node to the body using append(). Give it a width attribute of 500 and a height
attribute of 100 using the attr() method for each. You'll see it in the output because
there's a background-color of pink applied to it in the style tag.
I strongly recommend rewording to instruct campers to set the width/height attributes to the values in the w and h constants instead of hard-coding the values into the D3 code:
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code above this line
</script>
</body>