3.5 KiB
3.5 KiB
id, title, required, challengeType
| id | title | required | challengeType | |||
|---|---|---|---|---|---|---|
| 587d7fa8367417b2b2512bcc | Display Shapes with SVG |
|
6 |
Description
svg element with a given width and height, which was visible because it had a background-color applied to it in the style tag. The code made space for the given width and height.
The next step is to create a shape to put in the svg area. There are a number of supported shapes in SVG, such as rectangles and circles. They are used to display data. For example, a rectangle (<rect>) SVG shape could create a bar in a bar chart.
When you place a shape into the svg area, you can specify where it goes with x and y coordinates. The origin point of (0, 0) is in the upper-left corner. Positive values for x push the shape to the right, and positive values for y push the shape down from the origin point.
To place a shape in the middle of the 500 (width) x 100 (height) svg from last challenge, the x coordinate would be 250 and the y coordinate would be 50.
An SVG rect has four attributes. There are the x and y coordinates for where it is placed in the svg area. It also has a height and width to specify the size.
Instructions
rect shape to the svg using append(), and give it a width attribute of 25 and height attribute of 100. Also, give the rect x and y attributes each set to 0.
Tests
tests:
- text: Your document should have 1 <code>rect</code> element.
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
- text: The <code>rect</code> element should have a <code>width</code> attribute set to 25.
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
- text: The <code>rect</code> element should have a <code>height</code> attribute set to 100.
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
- text: The <code>rect</code> element should have an <code>x</code> attribute set to 0.
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
- text: The <code>rect</code> element should have a <code>y</code> attribute set to 0.
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
Challenge Seed
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h)
// Add your code below this line
// Add your code above this line
</script>
</body>
Solution
// solution required