4.6 KiB
4.6 KiB
id | title | required | challengeType | |||
---|---|---|---|---|---|---|
587d7fa9367417b2b2512bd0 | Invert SVG Elements |
|
6 |
Description
x
coordinate of 0 places a shape on the left edge of the SVG area. A y
coordinate of 0 places a shape on the top edge of the SVG area. Higher x
values push the rectangle to the right. Higher y
values push the rectangle down.
To make the bars right-side-up, you need to change the way the y
coordinate is calculated. It needs to account for both the height of the bar and the total height of the SVG area.
The height of the SVG area is 100. If you have a data point of 0 in the set, you would want the bar to start at the bottom of the SVG area (not the top). To do this, the y
coordinate needs a value of 100. If the data point value were 1, you would start with a y
coordinate of 100 to set the bar at the bottom. Then you need to account for the height of the bar of 1, so the final y
coordinate would be 99.
The y
coordinate that is y = heightOfSVG - heightOfBar
would place the bars right-side-up.
Instructions
y
attribute to set the bars right-side-up. Remember that the height
of the bar is 3 times the data value d
.
NoteIn general, the relationship is
y = h - m * d
, where m
is the constant that scales the data points.
Tests
tests:
- text: The first <code>rect</code> should have a <code>y</code> value of 64.
testString: assert($('rect').eq(0).attr('y') == h - (dataset[0] * 3), 'The first <code>rect</code> should have a <code>y</code> value of 64.');
- text: The second <code>rect</code> should have a <code>y</code> value of 7.
testString: assert($('rect').eq(1).attr('y') == h - (dataset[1] * 3), 'The second <code>rect</code> should have a <code>y</code> value of 7.');
- text: The third <code>rect</code> should have a <code>y</code> value of 34.
testString: assert($('rect').eq(2).attr('y') == h - (dataset[2] * 3), 'The third <code>rect</code> should have a <code>y</code> value of 34.');
- text: The fourth <code>rect</code> should have a <code>y</code> value of 49.
testString: assert($('rect').eq(3).attr('y') == h - (dataset[3] * 3), 'The fourth <code>rect</code> should have a <code>y</code> value of 49.');
- text: The fifth <code>rect</code> should have a <code>y</code> value of 25.
testString: assert($('rect').eq(4).attr('y') == h - (dataset[4] * 3), 'The fifth <code>rect</code> should have a <code>y</code> value of 25.');
- text: The sixth <code>rect</code> should have a <code>y</code> value of 46.
testString: assert($('rect').eq(5).attr('y') == h - (dataset[5] * 3), 'The sixth <code>rect</code> should have a <code>y</code> value of 46.');
- text: The seventh <code>rect</code> should have a <code>y</code> value of 13.
testString: assert($('rect').eq(6).attr('y') == h - (dataset[6] * 3), 'The seventh <code>rect</code> should have a <code>y</code> value of 13.');
- text: The eighth <code>rect</code> should have a <code>y</code> value of 58.
testString: assert($('rect').eq(7).attr('y') == h - (dataset[7] * 3), 'The eighth <code>rect</code> should have a <code>y</code> value of 58.');
- text: The ninth <code>rect</code> should have a <code>y</code> value of 73.
testString: assert($('rect').eq(8).attr('y') == h - (dataset[8] * 3), 'The ninth <code>rect</code> should have a <code>y</code> value of 73.');
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);
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// Add your code below this line
// Add your code above this line
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
Solution
// solution required