greatbody
/
freeCodeCamp
mirror of https://github.com/freeCodeCamp/freeCodeCamp.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity
freeCodeCamp/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md

144 lines
3.7 KiB
Markdown
Raw Normal View History

feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
challengeType: 6
fix(curriculum): Added forumTopicId to remaining 1200 challeng… (#36558)
2019-08-05 16:17:33 +00:00
forumTopicId: 301488
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
---
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
# --description--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
You may have noticed the bar chart looked like it's upside-down, or inverted. This is because of how SVG uses (x, y) coordinates.
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
In SVG, the origin point for the coordinates is in the upper-left corner. An `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--
Change the callback function for the `y` attribute to set the bars right-side-up. Remember that the `height` of the bar is 3 times the data value `d`.
**Note**
In general, the relationship is `y = h - m * d`, where `m` is the constant that scales the data points.
# --hints--
The first `rect` should have a `y` value of 64.
```js
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
The second `rect` should have a `y` value of 7.
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
```js
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
```
The third `rect` should have a `y` value of 34.
```js
assert($('rect').eq(2).attr('y') == h - dataset[2] * 3);
```
The fourth `rect` should have a `y` value of 49.
```js
assert($('rect').eq(3).attr('y') == h - dataset[3] * 3);
```
The fifth `rect` should have a `y` value of 25.
```js
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
```
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
The sixth `rect` should have a `y` value of 46.
```js
assert($('rect').eq(5).attr('y') == h - dataset[5] * 3);
```
The seventh `rect` should have a `y` value of 13.
```js
assert($('rect').eq(6).attr('y') == h - dataset[6] * 3);
```
The eighth `rect` should have a `y` value of 58.
```js
assert($('rect').eq(7).attr('y') == h - dataset[7] * 3);
```
The ninth `rect` should have a `y` value of 73.
```js
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);
```
# --seed--
## --seed-contents--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```html
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
fix(challenge-md): Fix quotes that failed in the transform
2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
const w = 500;
const h = 100;
fix(challenge-md): Fix quotes that failed in the transform
2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
fix(challenge-md): Fix quotes that failed in the transform
2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => {
// Add your code below this line
fix(challenge-md): Fix quotes that failed in the transform
2018-10-08 00:01:53 +00:00
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
// Add your code above this line
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
```
Feat: add new Markdown parser (#39800) and change all the challenges to new `md` format.
2020-11-27 18:02:05 +00:00
# --solutions--
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
Add solution d3challenges (#38222) * added solutions to data visualization with D3 * Update add-a-tooltip-to-a-d3-element.english.md * Update add-attributes-to-the-circle-elements.english.md * Update add-axes-to-a-visualization.english.md * Update add-document-elements-with-d3.english.md * Update add-inline-styling-to-elements.english.md * Update add-labels-to-scatter-plot-circles.english.md * Update change-styles-based-on-data.english.md * Update change-the-color-of-an-svg-element.english.md * Update change-the-presentation-of-a-bar-chart.english.md * Update create-a-bar-for-each-data-point-in-the-set.english.md * Update create-a-linear-scale-with-d3.english.md * Update create-a-scatterplot-with-svg-circles.english.md * Update display-shapes-with-svg.english.md * Update dynamically-change-the-height-of-each-bar.english.md * Update dynamically-set-the-coordinates-for-each-bar.english.md * Update invert-svg-elements.english.md * Update learn-about-svg-in-d3.english.md * Update select-a-group-of-elements-with-d3.english.md * Update set-a-domain-and-a-range-on-a-scale.english.md * Update style-d3-labels.english.md * Update work-with-dynamic-data-in-d3.english.md * Update use-a-pre-defined-scale-to-place-elements.english.md * Update use-dynamic-scales.english.md * Update use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.english.md * Update work-with-data-in-d3.english.md
2020-04-24 11:34:53 +00:00
```html
<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) => h - 3 * d)
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
feat(challenge-md): Add initial markdown challenge files
2018-09-30 22:01:58 +00:00
```