gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore: audit data visualisation challenges (#41336)

Browse Source 
* chore(learn): audit d3 projects

* chore: audit data vis

* chore: audit json apis

* Update curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: apply suggestions

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

* fix: no colour backticks

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Update curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>

* Apply suggestions from code review

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>

Co-authored-by: Shaun Hamilton <51722130+ShaunSHamilton@users.noreply.github.com>
Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Nicholas Carrigan (he/him)
2021-03-05 11:25:29 -08:00
committed by GitHub
parent 5075f14248
commit 16e420021c
41 changed files with 221 additions and 237 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.md
View File

@ -20,17 +20,17 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T
**User Story #3:** My chart should have a `g` element y-axis with a corresponding `id="y-axis"`.
**User Story #4:** Both axes should contain multiple tick labels, each with the corresponding `class="tick"`.
**User Story #4:** Both axes should contain multiple tick labels, each with a corresponding `class="tick"`.
**User Story #5:** My chart should have a `rect` element for each data point with a corresponding `class="bar"` displaying the data.
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing date and GDP values.
**User Story #6:** Each bar should have the properties `data-date` and `data-gdp` containing `date` and `GDP` values.
**User Story #7:** The bar elements' `data-date` properties should match the order of the provided data.
**User Story #8:** The bar elements' `data-gdp` properties should match the order of the provided data.
**User Story #9:** Each bar element's height should accurately represent the data's corresponding GDP.
**User Story #9:** Each bar element's height should accurately represent the data's corresponding `GDP`.
**User Story #10:** The `data-date` attribute and its corresponding bar element should align with the corresponding value on the x-axis.

4
curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-choropleth-map.md
View File

@ -22,11 +22,11 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R
**User Story #4:** There should be at least 4 different fill colors used for the counties.
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding fips and education values.
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
**User Story #6:** My choropleth should have a county for each provided data point.
**User Story #7:** The counties should have data-fips and data-education values that match the sample data.
**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.

2
curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-heat-map.md
View File

@ -26,7 +26,7 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. R
**User Story #6:** There should be at least 4 different fill colors used for the cells.
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding month, year, and temperature values.
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.

4
curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-scatterplot-graph.md
View File

@ -22,9 +22,9 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding x and y values.
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or Date objects are acceptable for test evaluation. For `data-yvalue` (minutes), use Date objects.
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.

4
curriculum/challenges/english/04-data-visualization/data-visualization-projects/visualize-data-with-a-treemap-diagram.md
View File

@ -22,9 +22,9 @@ You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. T
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding name, category, and value.
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
**User Story #6:** The area of each tile should correspond to the data-value amount: tiles with a larger data-value should have a bigger area.
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.

18
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.md
View File

@ -24,55 +24,55 @@ Your code should have 9 `title` elements.
assert($('title').length == 9);
```
The first `title` element should have tooltip text of 12.
The first `title` element should have tooltip text of `12`.
```js
assert($('title').eq(0).text() == '12');
```
The second `title` element should have tooltip text of 31.
The second `title` element should have tooltip text of `31`.
```js
assert($('title').eq(1).text() == '31');
```
The third `title` element should have tooltip text of 22.
The third `title` element should have tooltip text of `22`.
```js
assert($('title').eq(2).text() == '22');
```
The fourth `title` element should have tooltip text of 17.
The fourth `title` element should have tooltip text of `17`.
```js
assert($('title').eq(3).text() == '17');
```
The fifth `title` element should have tooltip text of 25.
The fifth `title` element should have tooltip text of `25`.
```js
assert($('title').eq(4).text() == '25');
```
The sixth `title` element should have tooltip text of 18.
The sixth `title` element should have tooltip text of `18`.
```js
assert($('title').eq(5).text() == '18');
```
The seventh `title` element should have tooltip text of 29.
The seventh `title` element should have tooltip text of `29`.
```js
assert($('title').eq(6).text() == '29');
```
The eighth `title` element should have tooltip text of 14.
The eighth `title` element should have tooltip text of `14`.
```js
assert($('title').eq(7).text() == '14');
```
The ninth `title` element should have tooltip text of 9.
The ninth `title` element should have tooltip text of `9`.
```js
assert($('title').eq(8).text() == '9');

22
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md
View File

@ -18,7 +18,7 @@ All three attributes can use a callback function to set their values dynamically
# --instructions--
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be 5 for all circles.
Add `cx`, `cy`, and `r` attributes to the `circle` elements. The `cx` value should be the first number in the array for each item in `dataset`. The `cy` value should be based off the second number in the array, but make sure to show the chart right-side-up and not inverted. The `r` value should be `5` for all circles.
# --hints--
@ -28,7 +28,7 @@ Your code should have 10 `circle` elements.
assert($('circle').length == 10);
```
The first `circle` element should have a `cx` value of 34, a `cy` value of 422, and an `r` value of 5.
The first `circle` element should have a `cx` value of `34`, a `cy` value of `422`, and an `r` value of `5`.
```js
assert(
@ -38,7 +38,7 @@ assert(
);
```
The second `circle` element should have a `cx` value of 109, a `cy` value of 220, and an `r` value of 5.
The second `circle` element should have a `cx` value of `109`, a `cy` value of `220`, and an `r` value of `5`.
```js
assert(
@ -48,7 +48,7 @@ assert(
);
```
The third `circle` element should have a `cx` value of 310, a `cy` value of 380, and an `r` value of 5.
The third `circle` element should have a `cx` value of `310`, a `cy` value of `380`, and an `r` value of `5`.
```js
assert(
@ -58,7 +58,7 @@ assert(
);
```
The fourth `circle` element should have a `cx` value of 79, a `cy` value of 89, and an `r` value of 5.
The fourth `circle` element should have a `cx` value of `79`, a `cy` value of `89`, and an `r` value of `5`.
```js
assert(
@ -68,7 +68,7 @@ assert(
);
```
The fifth `circle` element should have a `cx` value of 420, a `cy` value of 280, and an `r` value of 5.
The fifth `circle` element should have a `cx` value of `420`, a `cy` value of `280`, and an `r` value of `5`.
```js
assert(
@ -78,7 +78,7 @@ assert(
);
```
The sixth `circle` element should have a `cx` value of 233, a `cy` value of 355, and an `r` value of 5.
The sixth `circle` element should have a `cx` value of `233`, a `cy` value of `355`, and an `r` value of `5`.
```js
assert(
@ -88,7 +88,7 @@ assert(
);
```
The seventh `circle` element should have a `cx` value of 333, a `cy` value of 404, and an `r` value of 5.
The seventh `circle` element should have a `cx` value of `333`, a `cy` value of `404`, and an `r` value of `5`.
```js
assert(
@ -98,7 +98,7 @@ assert(
);
```
The eighth `circle` element should have a `cx` value of 222, a `cy` value of 167, and an `r` value of 5.
The eighth `circle` element should have a `cx` value of `222`, a `cy` value of `167`, and an `r` value of `5`.
```js
assert(
@ -108,7 +108,7 @@ assert(
);
```
The ninth `circle` element should have a `cx` value of 78, a `cy` value of 180, and an `r` value of 5.
The ninth `circle` element should have a `cx` value of `78`, a `cy` value of `180`, and an `r` value of `5`.
```js
assert(
@ -118,7 +118,7 @@ assert(
);
```
The tenth `circle` element should have a `cx` value of 21, a `cy` value of 377, and an `r` value of 5.
The tenth `circle` element should have a `cx` value of `21`, a `cy` value of `377`, and an `r` value of `5`.
```js
assert(

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md
View File

@ -26,11 +26,11 @@ svg.append("g")
.call(xAxis);
```
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form (x, 0). Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
The above code places the x-axis at the bottom of the SVG canvas. Then it's passed as an argument to the `call()` method. The y-axis works in the same way, except the `translate` argument is in the form `(x, 0)`. Because `translate` is a string in the `attr()` method above, you can use concatenation to include variable values for its arguments.
# --instructions--
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and 0 units down. Remember to `call()` the axis.
The scatter plot now has an x-axis. Create a y-axis in a variable named `yAxis` using the `axisLeft()` method. Then render the axis using a `g` element. Make sure to use a `transform` attribute to translate the axis by the amount of padding units right, and `0` units down. Remember to `call()` the axis.
# --hints--
@ -40,7 +40,7 @@ Your code should use the `axisLeft()` method with `yScale` passed as the argumen
assert(code.match(/\.axisLeft\(yScale\)/g));
```
The y-axis `g` element should have a `transform` attribute to translate the axis by (60, 0).
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)`.
```js
assert(

4
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.md
View File

@ -10,11 +10,11 @@ dashedName: add-classes-with-d3
Using a lot of inline styles on HTML elements gets hard to manage, even for smaller apps. It's easier to add a class to elements and style that class one time using CSS rules. D3 has the `attr()` method to add any HTML attribute to an element, including a class name.
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of "container" to a selection:
The `attr()` method works the same way that `style()` does. It takes comma-separated values, and can use a callback function. Here's an example to add a class of `container` to a selection:
`selection.attr("class", "container");`
Note that the "class" parameter will remain the same whenever you need to add a class and only the "container" parameter will change.
Note that the `class` parameter will remain the same whenever you need to add a class and only the `container` parameter will change.
# --instructions--

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.md
View File

@ -14,7 +14,7 @@ The `select()` method selects one element from the document. It takes an argumen
`const anchor = d3.select("a");`
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The "d3" part of the example is a reference to the D3 object, which is how you access D3 methods.
The above example finds the first anchor tag on the page and saves an HTML node for it in the variable `anchor`. You can use the selection with other methods. The `d3` part of the example is a reference to the D3 object, which is how you access D3 methods.
Two other useful methods are `append()` and `text()`.
@ -34,7 +34,7 @@ D3 allows you to chain several methods together with periods to perform a number
# --instructions--
Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text "Learning D3" into the `h1` element.
Use the `select` method to select the `body` tag in the document. Then `append` an `h1` tag to it, and add the text `Learning D3` into the `h1` element.
# --hints--
@ -44,7 +44,7 @@ The `body` should have one `h1` element.
assert($('body').children('h1').length == 1);
```
The `h1` element should have the text "Learning D3" in it.
The `h1` element should have the text `Learning D3` in it.
```js
assert($('h1').text() == 'Learning D3');

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.md
View File

@ -20,7 +20,7 @@ Add the `style()` method to the code in the editor to make all the displayed tex
# --hints--
Your `h2` elements should have a `font-family` of verdana.
Your `h2` elements should have a `font-family` of `verdana`.
```js
assert($('h2').css('font-family') == 'verdana');

21
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md
View File

@ -18,60 +18,59 @@ D3 gives you a high level of control over how you label your bars.
The code in the editor already binds the data to each new `text` element. First, append `text` nodes to the `svg`. Next, add attributes for the `x` and `y` coordinates. They should be calculated the same way as the `rect` ones, except the `y` value for the `text` should make the label sit 3 units higher than the bar. Finally, use the D3 `text()` method to set the label equal to the data point value.
**Note**
For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
**Note:** For the label to sit higher than the bar, decide if the `y` value for the `text` should be 3 greater or 3 less than the `y` value for the bar.
# --hints--
The first `text` element should have a label of 12 and a `y` value of 61.
The first `text` element should have a label of `12` and a `y` value of `61`.
```js
assert($('text').eq(0).text() == '12' && $('text').eq(0).attr('y') == '61');
```
The second `text` element should have a label of 31 and a `y` value of 4.
The second `text` element should have a label of `31` and a `y` value of `4`.
```js
assert($('text').eq(1).text() == '31' && $('text').eq(1).attr('y') == '4');
```
The third `text` element should have a label of 22 and a `y` value of 31.
The third `text` element should have a label of `22` and a `y` value of `31`.
```js
assert($('text').eq(2).text() == '22' && $('text').eq(2).attr('y') == '31');
```
The fourth `text` element should have a label of 17 and a `y` value of 46.
The fourth `text` element should have a label of `17` and a `y` value of `46`.
```js
assert($('text').eq(3).text() == '17' && $('text').eq(3).attr('y') == '46');
```
The fifth `text` element should have a label of 25 and a `y` value of 22.
The fifth `text` element should have a label of `25` and a `y` value of `22`.
```js
assert($('text').eq(4).text() == '25' && $('text').eq(4).attr('y') == '22');
```
The sixth `text` element should have a label of 18 and a `y` value of 43.
The sixth `text` element should have a label of `18` and a `y` value of `43`.
```js
assert($('text').eq(5).text() == '18' && $('text').eq(5).attr('y') == '43');
```
The seventh `text` element should have a label of 29 and a `y` value of 10.
The seventh `text` element should have a label of `29` and a `y` value of `10`.
```js
assert($('text').eq(6).text() == '29' && $('text').eq(6).attr('y') == '10');
```
The eighth `text` element should have a label of 14 and a `y` value of 55.
The eighth `text` element should have a label of `14` and a `y` value of `55`.
```js
assert($('text').eq(7).text() == '14' && $('text').eq(7).attr('y') == '55');
```
The ninth `text` element should have a label of 9 and a `y` value of 70.
The ninth `text` element should have a label of `9` and a `y` value of `70`.
```js
assert($('text').eq(8).text() == '9' && $('text').eq(8).attr('y') == '70');

22
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md
View File

@ -16,7 +16,7 @@ The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. I
# --instructions--
Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is "34, 78". Set the `x` attribute so it's 5 units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
Label each point on the scatter plot using the `text` elements. The text of the label should be the two values separated by a comma and a space. For example, the label for the first point is `34, 78`. Set the `x` attribute so it's `5` units more than the value you used for the `cx` attribute on the `circle`. Set the `y` attribute the same way that's used for the `cy` value on the `circle`.
# --hints--
@ -26,7 +26,7 @@ Your code should have 10 `text` elements.
assert($('text').length == 10);
```
The first label should have text of "34, 78", an `x` value of 39, and a `y` value of 422.
The first label should have text of `34, 78`, an `x` value of `39`, and a `y` value of `422`.
```js
assert(
@ -36,7 +36,7 @@ assert(
);
```
The second label should have text of "109, 280", an `x` value of 114, and a `y` value of 220.
The second label should have text of `109, 280`, an `x` value of `114`, and a `y` value of `220`.
```js
assert(
@ -46,7 +46,7 @@ assert(
);
```
The third label should have text of "310, 120", an `x` value of 315, and a `y` value of 380.
The third label should have text of `310, 120`, an `x` value of `315`, and a `y` value of `380`.
```js
assert(
@ -56,7 +56,7 @@ assert(
);
```
The fourth label should have text of "79, 411", an `x` value of 84, and a `y` value of 89.
The fourth label should have text of `79, 411`, an `x` value of `84`, and a `y` value of `89`.
```js
assert(
@ -66,7 +66,7 @@ assert(
);
```
The fifth label should have text of "420, 220", an `x` value of 425, and a `y` value of 280.
The fifth label should have text of `420, 220`, an `x` value of `425`, and a `y` value of `280`.
```js
assert(
@ -76,7 +76,7 @@ assert(
);
```
The sixth label should have text of "233, 145", an `x` value of 238, and a `y` value of 355.
The sixth label should have text of `233, 145`, an `x` value of `238`, and a `y` value of `355`.
```js
assert(
@ -86,7 +86,7 @@ assert(
);
```
The seventh label should have text of "333, 96", an `x` value of 338, and a `y` value of 404.
The seventh label should have text of `333, 96`, an `x` value of `338`, and a `y` value of `404`.
```js
assert(
@ -96,7 +96,7 @@ assert(
);
```
The eighth label should have text of "222, 333", an `x` value of 227, and a `y` value of 167.
The eighth label should have text of `222, 333`, an `x` value of `227`, and a `y` value of `167`.
```js
assert(
@ -106,7 +106,7 @@ assert(
);
```
The ninth label should have text of "78, 320", an `x` value of 83, and a `y` value of 180.
The ninth label should have text of `78, 320`, an `x` value of `83`, and a `y` value of `180`.
```js
assert(
@ -116,7 +116,7 @@ assert(
);
```
The tenth label should have text of "21, 123", an `x` value of 26, and a `y` value of 377.
The tenth label should have text of `21, 123`, an `x` value of `26`, and a `y` value of `377`.
```js
assert(

7
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.md
View File

@ -14,7 +14,7 @@ For example, you may want to color a data point blue if it has a value less than
```js
selection.style("color", (d) => {
/* Logic that returns the color based on a condition */
});
```
@ -22,10 +22,9 @@ The `style()` method is not limited to setting the `color` - it can be used with
# --instructions--
Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns "red", otherwise it returns "green".
Add the `style()` method to the code in the editor to set the `color` of the `h2` elements conditionally. Write the callback function so if the data value is less than 20, it returns red, otherwise it returns green.
**Note**
You can use if-else logic, or the ternary operator.
**Note:** You can use if-else logic, or the ternary operator.
# --hints--

2
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.md
View File

@ -14,7 +14,7 @@ In SVG, a `rect` shape is colored with the `fill` attribute. It supports hex cod
# --instructions--
Add an `attr()` method to set the "fill" of all the bars to the color "navy".
Add an `attr()` method to set the `fill` of all the bars to the color navy.
# --hints--

23
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.md
View File

@ -16,14 +16,13 @@ The last challenge created a bar chart, but there are a couple of formatting cha
# --instructions--
First, add a `margin` of 2px to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value 10 times the original data value (plus the "px").
First, add a `margin` of `2px` to the `bar` class in the `style` tag. Next, change the callback function in the `style()` method so it returns a value `10` times the original data value (plus the `px`).
**Note**
Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
**Note:** Multiplying each data point by the *same* constant only alters the scale. It's like zooming in, and it doesn't change the meaning of the underlying data.
# --hints--
The first `div` should have a `height` of 120 pixels and a `margin` of 2 pixels.
The first `div` should have a `height` of `120` pixels and a `margin` of `2` pixels.
```js
assert(
@ -32,7 +31,7 @@ assert(
);
```
The second `div` should have a `height` of 310 pixels and a `margin` of 2 pixels.
The second `div` should have a `height` of `310` pixels and a `margin` of `2` pixels.
```js
assert(
@ -41,7 +40,7 @@ assert(
);
```
The third `div` should have a `height` of 220 pixels and a `margin` of 2 pixels.
The third `div` should have a `height` of `220` pixels and a `margin` of `2` pixels.
```js
assert(
@ -50,7 +49,7 @@ assert(
);
```
The fourth `div` should have a `height` of 170 pixels and a `margin` of 2 pixels.
The fourth `div` should have a `height` of `170` pixels and a `margin` of `2` pixels.
```js
assert(
@ -59,7 +58,7 @@ assert(
);
```
The fifth `div` should have a `height` of 250 pixels and a `margin` of 2 pixels.
The fifth `div` should have a `height` of `250` pixels and a `margin` of `2` pixels.
```js
assert(
@ -68,7 +67,7 @@ assert(
);
```
The sixth `div` should have a `height` of 180 pixels and a `margin` of 2 pixels.
The sixth `div` should have a `height` of `180` pixels and a `margin` of `2` pixels.
```js
assert(
@ -77,7 +76,7 @@ assert(
);
```
The seventh `div` should have a `height` of 290 pixels and a `margin` of 2 pixels.
The seventh `div` should have a `height` of `290` pixels and a `margin` of `2` pixels.
```js
assert(
@ -86,7 +85,7 @@ assert(
);
```
The eighth `div` should have a `height` of 140 pixels and a `margin` of 2 pixels.
The eighth `div` should have a `height` of `140` pixels and a `margin` of `2` pixels.
```js
assert(
@ -95,7 +94,7 @@ assert(
);
```
The ninth `div` should have a `height` of 90 pixels and a `margin` of 2 pixels.
The ninth `div` should have a `height` of `90` pixels and a `margin` of `2` pixels.
```js
assert(

8
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md
View File

@ -10,7 +10,7 @@ dashedName: create-a-linear-scale-with-d3
The bar and scatter plot charts both plotted data directly onto the SVG canvas. However, if the height of a bar or one of the data points were larger than the SVG height or width values, it would go outside the SVG area.
In D3, there are scales to help plot data. `Scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
In D3, there are scales to help plot data. `scales` are functions that tell the program how to map a set of raw data points onto the pixels of the SVG canvas.
For example, say you have a 100x500-sized SVG canvas and you want to plot Gross Domestic Product (GDP) for a number of countries. The set of numbers would be in the billion or trillion-dollar range. You provide D3 a type of scale to tell it how to place the large GDP values into that 100x500-sized area.
@ -24,11 +24,11 @@ By default, a scale uses the identity relationship. The value of the input is th
# --instructions--
Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of 50.
Change the `scale` variable to create a linear scale. Then set the `output` variable to the scale called with an input argument of `50`.
# --hints--
The text in the `h2` should be 50.
The text in the `h2` should be `50`.
```js
assert($('h2').text() == '50');
@ -40,7 +40,7 @@ Your code should use the `scaleLinear()` method.
assert(code.match(/\.scaleLinear/g));
```
The `output` variable should call `scale` with an argument of 50.
The `output` variable should call `scale` with an argument of `50`.
```js
assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g));

3
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md
View File

@ -16,8 +16,7 @@ SVG has a `circle` tag to create the circle shape. It works a lot like the `rect
Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas.
**Note**
The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
**Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge.
# --hints--

10
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.md
View File

@ -20,7 +20,7 @@ An SVG `rect` has four attributes. There are the `x` and `y` coordinates for whe
# --instructions--
Add a `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.
Add a `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`.
# --hints--
@ -30,25 +30,25 @@ Your document should have 1 `rect` element.
assert($('rect').length == 1);
```
The `rect` element should have a `width` attribute set to 25.
The `rect` element should have a `width` attribute set to `25`.
```js
assert($('rect').attr('width') == '25');
```
The `rect` element should have a `height` attribute set to 100.
The `rect` element should have a `height` attribute set to `100`.
```js
assert($('rect').attr('height') == '100');
```
The `rect` element should have an `x` attribute set to 0.
The `rect` element should have an `x` attribute set to `0`.
```js
assert($('rect').attr('x') == '0');
```
The `rect` element should have a `y` attribute set to 0.
The `rect` element should have a `y` attribute set to `0`.
```js
assert($('rect').attr('y') == '0');

28
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.md
View File

@ -12,71 +12,69 @@ The height of each bar can be set to the value of the data point in the array, s
```js
selection.attr("property", (d, i) => {
/*
* d is the data point value
* i is the index of the data point in the array
*/
})
```
Here `d` would be the data point value, and `i` would be the index of the data point in the array.
# --instructions--
Change the callback function for the `height` attribute to return the data value times 3.
**Note**
Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
**Note:** Remember that multiplying all data points by the same constant scales the data (like zooming in). It helps to see the differences between bar values in this example.
# --hints--
The first `rect` should have a `height` of 36.
The first `rect` should have a `height` of `36`.
```js
assert($('rect').eq(0).attr('height') == '36');
```
The second `rect` should have a `height` of 93.
The second `rect` should have a `height` of `93`.
```js
assert($('rect').eq(1).attr('height') == '93');
```
The third `rect` should have a `height` of 66.
The third `rect` should have a `height` of `66`.
```js
assert($('rect').eq(2).attr('height') == '66');
```
The fourth `rect` should have a `height` of 51.
The fourth `rect` should have a `height` of `51`.
```js
assert($('rect').eq(3).attr('height') == '51');
```
The fifth `rect` should have a `height` of 75.
The fifth `rect` should have a `height` of `75`.
```js
assert($('rect').eq(4).attr('height') == '75');
```
The sixth `rect` should have a `height` of 54.
The sixth `rect` should have a `height` of `54`.
```js
assert($('rect').eq(5).attr('height') == '54');
```
The seventh `rect` should have a `height` of 87.
The seventh `rect` should have a `height` of `87`.
```js
assert($('rect').eq(6).attr('height') == '87');
```
The eighth `rect` should have a `height` of 42.
The eighth `rect` should have a `height` of `42`.
```js
assert($('rect').eq(7).attr('height') == '42');
```
The ninth `rect` should have a `height` of 27.
The ninth `rect` should have a `height` of `27`.
```js
assert($('rect').eq(8).attr('height') == '27');

28
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.md
View File

@ -12,16 +12,13 @@ The last challenge created and appended a rectangle to the `svg` element for eac
The placement of a rectangle is handled by the `x` and `y` attributes. They tell D3 where to start drawing the shape in the `svg` area. The last challenge set them each to 0, so every bar was placed in the upper-left corner.
For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the x value should increase.
For a bar chart, all of the bars should sit on the same vertical level, which means the `y` value stays the same (at 0) for all bars. The `x` value, however, needs to change as you add new bars. Remember that larger `x` values push items farther to the right. As you go through the array elements in `dataset`, the `x` value should increase.
The `attr()` method in D3 accepts a callback function to dynamically set that attribute. The callback function takes two arguments, one for the data point itself (usually `d`) and one for the index of the data point in the array. The second argument for the index is optional. Here's the format:
```js
selection.attr("property", (d, i) => {
/*
* d is the data point value
* i is the index of the data point in the array
*/
})
```
@ -31,60 +28,59 @@ It's important to note that you do NOT need to write a `for` loop or use `forEac
Change the `x` attribute callback function so it returns the index times 30.
**Note**
Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
**Note:** Each bar has a width of 25, so increasing each `x` value by 30 adds some space between the bars. Any value greater than 25 would work in this example.
# --hints--
The first `rect` should have an `x` value of 0.
The first `rect` should have an `x` value of `0`.
```js
assert($('rect').eq(0).attr('x') == '0');
```
The second `rect` should have an `x` value of 30.
The second `rect` should have an `x` value of `30`.
```js
assert($('rect').eq(1).attr('x') == '30');
```
The third `rect` should have an `x` value of 60.
The third `rect` should have an `x` value of `60`.
```js
assert($('rect').eq(2).attr('x') == '60');
```
The fourth `rect` should have an `x` value of 90.
The fourth `rect` should have an `x` value of `90`.
```js
assert($('rect').eq(3).attr('x') == '90');
```
The fifth `rect` should have an `x` value of 120.
The fifth `rect` should have an `x` value of `120`.
```js
assert($('rect').eq(4).attr('x') == '120');
```
The sixth `rect` should have an `x` value of 150.
The sixth `rect` should have an `x` value of `150`.
```js
assert($('rect').eq(5).attr('x') == '150');
```
The seventh `rect` should have an `x` value of 180.
The seventh `rect` should have an `x` value of `180`.
```js
assert($('rect').eq(6).attr('x') == '180');
```
The eighth `rect` should have an `x` value of 210.
The eighth `rect` should have an `x` value of `210`.
```js
assert($('rect').eq(7).attr('x') == '210');
```
The ninth `rect` should have an `x` value of 240.
The ninth `rect` should have an `x` value of `240`.
```js
assert($('rect').eq(8).attr('x') == '240');

21
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/invert-svg-elements.md
View File

@ -22,60 +22,59 @@ The `y` coordinate that is `y = heightOfSVG - heightOfBar` would place the bars
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.
**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.
The first `rect` should have a `y` value of `64`.
```js
assert($('rect').eq(0).attr('y') == h - dataset[0] * 3);
```
The second `rect` should have a `y` value of 7.
The second `rect` should have a `y` value of `7`.
```js
assert($('rect').eq(1).attr('y') == h - dataset[1] * 3);
```
The third `rect` should have a `y` value of 34.
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.
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.
The fifth `rect` should have a `y` value of `25`.
```js
assert($('rect').eq(4).attr('y') == h - dataset[4] * 3);
```
The sixth `rect` should have a `y` value of 46.
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.
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.
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.
The ninth `rect` should have a `y` value of `73`.
```js
assert($('rect').eq(8).attr('y') == h - dataset[8] * 3);

7
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.md
View File

@ -20,8 +20,7 @@ CSS can be scalable when styles use relative units (such as `vh`, `vw`, or perce
Add an `svg` node to the `body` using `append()`. Give it a `width` attribute set to the provided `w` constant and a `height` attribute set to the provided `h` constant using the `attr()` or `style()` methods for each. You'll see it in the output because there's a `background-color` of pink applied to it in the `style` tag.
**Note**
When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
**Note:** When using `attr()` width and height attributes do not have units. This is the building block of scaling - the element will always have a 5:1 width to height ratio, no matter what the zoom level is.
# --hints--
@ -31,13 +30,13 @@ Your document should have 1 `svg` element.
assert($('svg').length == 1);
```
The `svg` element should have a `width` attribute set to 500 or styled to have a width of 500px.
The `svg` element should have a `width` attribute set to `500` or styled to have a width of `500px`.
```js
assert($('svg').attr('width') == '500' || $('svg').css('width') == '500px');
```
The `svg` element should have a `height` attribute set to 100 or styled to have a height of 100px.
The `svg` element should have a `height` attribute set to `100` or styled to have a height of `100px`.
```js
assert($('svg').attr('height') == '100' || $('svg').css('height') == '100px');

4
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.md
View File

@ -16,11 +16,11 @@ Like the `select()` method, `selectAll()` supports method chaining, and you can
# --instructions--
Select all of the `li` tags in the document, and change their text to "list item" by chaining the `.text()` method.
Select all of the `li` tags in the document, and change their text to the string `list item` by chaining the `.text()` method.
# --hints--
There should be 3 `li` elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.
There should be 3 `li` elements on the page, and the text in each one should say `list item`. Capitalization and spacing should match exactly.
```js
assert(

23
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md
View File

@ -17,27 +17,24 @@ You want to map those points along the `x` axis on the SVG canvas, between 10 un
The `domain()` and `range()` methods set these values for the scale. Both methods take an array of at least two elements as an argument. Here's an example:
```js
// Set a domain
// The domain covers the set of input values
scale.domain([50, 480]);
// Set a range
// The range covers the set of output values
scale.range([10, 500]);
scale(50) // Returns 10
scale(480) // Returns 500
scale(325) // Returns 323.37
scale(750) // Returns 807.67
scale(50)
scale(480)
scale(325)
scale(750)
d3.scaleLinear()
```
In order, the following values would be displayed in the console: `10`, `500`, `323.37`, and `807.67`.
Notice that the scale uses the linear relationship between the domain and range values to figure out what the output should be for a given number. The minimum value in the domain (50) maps to the minimum value (10) in the range.
# --instructions--
Create a scale and set its domain to `[250, 500]` and range to `[10, 150]`.
**Note**
You can chain the `domain()` and `range()` methods onto the `scale` variable.
**Note:** You can chain the `domain()` and `range()` methods onto the `scale` variable.
# --hints--
@ -47,7 +44,7 @@ Your code should use the `domain()` method.
assert(code.match(/\.domain/g));
```
The `domain()` of the scale should be set to `[250, 500]`.
The `domain()` of the `scale` should be set to `[250, 500]`.
```js
assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]));
@ -59,13 +56,13 @@ Your code should use the `range()` method.
assert(code.match(/\.range/g));
```
The `range()` of the scale should be set to `[10, 150]`.
The `range()` of the `scale` should be set to `[10, 150]`.
```js
assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]));
```
The text in the `h2` should be -102.
The text in the `h2` should be `-102`.
```js
assert($('h2').text() == '-102');

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
View File

@ -8,11 +8,11 @@ dashedName: style-d3-labels
# --description--
D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as "font-family" or "font-size".
D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`.
# --instructions--
Set the `font-size` of the `text` elements to 25px, and the color of the text to red.
Set the `font-size` of the `text` elements to `25px`, and the color of the text to red.
# --hints--
@ -22,7 +22,7 @@ The labels should all have a `fill` color of red.
assert($('text').css('fill') == 'rgb(255, 0, 0)');
```
The labels should all have a `font-size` of 25 pixels.
The labels should all have a `font-size` of `25` pixels.
```js
assert($('text').css('font-size') == '25px');

20
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.md
View File

@ -20,59 +20,59 @@ Recall the format to set a style using a callback function:
# --instructions--
Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string "px" added to it.
Add the `style()` method to the code in the editor to set the `height` property for each element. Use a callback function to return the value of the data point with the string `px` added to it.
# --hints--
The first `div` should have a `height` of 12 pixels.
The first `div` should have a `height` of `12` pixels.
```js
assert($('div').eq(0)[0].style.height === '12px');
```
The second `div` should have a `height` of 31 pixels.
The second `div` should have a `height` of `31` pixels.
```js
assert($('div').eq(1)[0].style.height === '31px');
```
The third `div` should have a `height` of 22 pixels.
The third `div` should have a `height` of `22` pixels.
```js
assert($('div').eq(2)[0].style.height === '22px');
```
The fourth `div` should have a `height` of 17 pixels.
The fourth `div` should have a `height` of `17` pixels.
```js
assert($('div').eq(3)[0].style.height === '17px');
```
The fifth `div` should have a `height` of 25 pixels.
The fifth `div` should have a `height` of `25` pixels.
```js
assert($('div').eq(4)[0].style.height === '25px');
```
The sixth `div` should have a `height` of 18 pixels.
The sixth `div` should have a `height` of `18` pixels.
```js
assert($('div').eq(5)[0].style.height === '18px');
```
The seventh `div` should have a `height` of 29 pixels.
The seventh `div` should have a `height` of `29` pixels.
```js
assert($('div').eq(6)[0].style.height === '29px');
```
The eighth `div` should have a `height` of 14 pixels.
The eighth `div` should have a `height` of `14` pixels.
```js
assert($('div').eq(7)[0].style.height === '14px');
```
The ninth `div` should have a `height` of 9 pixels.
The ninth `div` should have a `height` of `9` pixels.
```js
assert($('div').eq(8)[0].style.height === '9px');

46
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md
View File

@ -8,7 +8,7 @@ dashedName: use-a-pre-defined-scale-to-place-elements
# --description--
With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the x and y raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
With the scales set up, it's time to map the scatter plot again. The scales are like processing functions that turn the `x` and `y` raw data into values that fit and render correctly on the SVG canvas. They keep the data within the screen's plotting area.
You set the coordinate attribute values for an SVG shape with the scaling function. This includes `x` and `y` attributes for `rect` or `text` elements, or `cx` and `cy` for `circles`. Here's an example:
@ -21,9 +21,9 @@ Scales set shape coordinate attributes to place the data points onto the SVG can
# --instructions--
Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of 5 units, too.
Use `xScale` and `yScale` to position both the `circle` and `text` shapes onto the SVG canvas. For the `circles`, apply the scales to set the `cx` and `cy` attributes. Give them a radius of `5` units, too.
For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the `xScale`.
For the `text` elements, apply the scales to set the `x` and `y` attributes. The labels should be offset to the right of the dots. To do this, add `10` units to the `x` data value before passing it to the `xScale`.
# --hints--
@ -33,7 +33,7 @@ Your code should have 10 `circle` elements.
assert($('circle').length == 10);
```
The first `circle` element should have a `cx` value of approximately 91 and a `cy` value of approximately 368 after applying the scales. It should also have an `r` value of 5.
The first `circle` element should have a `cx` value of approximately `91` and a `cy` value of approximately `368` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -43,7 +43,7 @@ assert(
);
```
The second `circle` element should have a `cx` value of approximately 159 and a `cy` value of approximately 181 after applying the scales. It should also have an `r` value of 5.
The second `circle` element should have a `cx` value of approximately `159` and a `cy` value of approximately `181` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -53,7 +53,7 @@ assert(
);
```
The third `circle` element should have a `cx` value of approximately 340 and a `cy` value of approximately 329 after applying the scales. It should also have an `r` value of 5.
The third `circle` element should have a `cx` value of approximately `340` and a `cy` value of approximately `329` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -63,7 +63,7 @@ assert(
);
```
The fourth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 60 after applying the scales. It should also have an `r` value of 5.
The fourth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `60` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -73,7 +73,7 @@ assert(
);
```
The fifth `circle` element should have a `cx` value of approximately 440 and a `cy` value of approximately 237 after applying the scales. It should also have an `r` value of 5.
The fifth `circle` element should have a `cx` value of approximately `440` and a `cy` value of approximately `237` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -83,7 +83,7 @@ assert(
);
```
The sixth `circle` element should have a `cx` value of approximately 271 and a `cy` value of approximately 306 after applying the scales. It should also have an `r` value of 5.
The sixth `circle` element should have a `cx` value of approximately `271` and a `cy` value of approximately `306` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -93,7 +93,7 @@ assert(
);
```
The seventh `circle` element should have a `cx` value of approximately 361 and a `cy` value of approximately 351 after applying the scales. It should also have an `r` value of 5.
The seventh `circle` element should have a `cx` value of approximately `361` and a `cy` value of approximately `351` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -103,7 +103,7 @@ assert(
);
```
The eighth `circle` element should have a `cx` value of approximately 261 and a `cy` value of approximately 132 after applying the scales. It should also have an `r` value of 5.
The eighth `circle` element should have a `cx` value of approximately `261` and a `cy` value of approximately `132` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -113,7 +113,7 @@ assert(
);
```
The ninth `circle` element should have a `cx` value of approximately 131 and a `cy` value of approximately 144 after applying the scales. It should also have an `r` value of 5.
The ninth `circle` element should have a `cx` value of approximately `131` and a `cy` value of approximately `144` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -123,7 +123,7 @@ assert(
);
```
The tenth `circle` element should have a `cx` value of approximately 79 and a `cy` value of approximately 326 after applying the scales. It should also have an `r` value of 5.
The tenth `circle` element should have a `cx` value of approximately `79` and a `cy` value of approximately `326` after applying the scales. It should also have an `r` value of `5`.
```js
assert(
@ -139,7 +139,7 @@ Your code should have 10 `text` elements.
assert($('text').length == 10);
```
The first label should have an `x` value of approximately 100 and a `y` value of approximately 368 after applying the scales.
The first label should have an `x` value of approximately `100` and a `y` value of approximately `368` after applying the scales.
```js
assert(
@ -148,7 +148,7 @@ assert(
);
```
The second label should have an `x` value of approximately 168 and a `y` value of approximately 181 after applying the scales.
The second label should have an `x` value of approximately `168` and a `y` value of approximately `181` after applying the scales.
```js
assert(
@ -157,7 +157,7 @@ assert(
);
```
The third label should have an `x` value of approximately 350 and a `y` value of approximately 329 after applying the scales.
The third label should have an `x` value of approximately `350` and a `y` value of approximately `329` after applying the scales.
```js
assert(
@ -166,7 +166,7 @@ assert(
);
```
The fourth label should have an `x` value of approximately 141 and a `y` value of approximately 60 after applying the scales.
The fourth label should have an `x` value of approximately `141` and a `y` value of approximately `60` after applying the scales.
```js
assert(
@ -175,7 +175,7 @@ assert(
);
```
The fifth label should have an `x` value of approximately 449 and a `y` value of approximately 237 after applying the scales.
The fifth label should have an `x` value of approximately `449` and a `y` value of approximately `237` after applying the scales.
```js
assert(
@ -184,7 +184,7 @@ assert(
);
```
The sixth label should have an `x` value of approximately 280 and a `y` value of approximately 306 after applying the scales.
The sixth label should have an `x` value of approximately `280` and a `y` value of approximately `306` after applying the scales.
```js
assert(
@ -193,7 +193,7 @@ assert(
);
```
The seventh label should have an `x` value of approximately 370 and a `y` value of approximately 351 after applying the scales.
The seventh label should have an `x` value of approximately `370` and a `y` value of approximately `351` after applying the scales.
```js
assert(
@ -202,7 +202,7 @@ assert(
);
```
The eighth label should have an `x` value of approximately 270 and a `y` value of approximately 132 after applying the scales.
The eighth label should have an `x` value of approximately `270` and a `y` value of approximately `132` after applying the scales.
```js
assert(
@ -211,7 +211,7 @@ assert(
);
```
The ninth label should have an `x` value of approximately 140 and a `y` value of approximately 144 after applying the scales.
The ninth label should have an `x` value of approximately `140` and a `y` value of approximately `144` after applying the scales.
```js
assert(
@ -220,7 +220,7 @@ assert(
);
```
The tenth label should have an `x` value of approximately 88 and a `y` value of approximately 326 after applying the scales.
The tenth label should have an `x` value of approximately `88` and a `y` value of approximately `326` after applying the scales.
```js
assert(

8
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md
View File

@ -32,7 +32,6 @@ const dataset = [
const w = 500;
const h = 500;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
@ -43,14 +42,13 @@ The padding may be confusing at first. Picture the x-axis as a horizontal line f
# --instructions--
Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum y value in the set. The range should use the SVG height (`h`) and include padding.
Use the `yScale` variable to create a linear y-axis scale. The domain should start at zero and go to the maximum `y` value in the set. The range should use the SVG height (`h`) and include padding.
**Note**
Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
**Note:** Remember to keep the plot right-side-up. When you set the range for the y coordinates, the higher value (height minus padding) is the first argument, and the lower value is the second argument.
# --hints--
The text in the `h2` should be 30.
The text in the `h2` should be `30`.
```js
assert(output == 30 && $('h2').text() == '30');

12
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.md
View File

@ -19,26 +19,26 @@ D3 has two methods - `min()` and `max()` to return this information. Here's an e
```js
const exampleData = [34, 234, 73, 90, 6, 52];
d3.min(exampleData) // Returns 6
d3.max(exampleData) // Returns 234
d3.min(exampleData)
d3.max(exampleData)
```
A dataset may have nested arrays, like the \[x, y] coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the x or y value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
A dataset may have nested arrays, like the `[x, y]` coordinate pairs that were in the scatter plot example. In that case, you need to tell D3 how to calculate the maximum and minimum. Fortunately, both the `min()` and `max()` methods take a callback function. In this example, the callback function's argument `d` is for the current inner array. The callback needs to return the element from the inner array (the `x` or `y` value) over which you want to compute the maximum or minimum. Here's an example for how to find the min and max values with an array of arrays:
```js
const locationData = [[1, 7],[6, 3],[8, 3]];
// Returns the smallest number out of the first elements
const minX = d3.min(locationData, (d) => d[0]);
// minX compared 1, 6, and 8 and is set to 1
```
`minX` would have the value `1`.
# --instructions--
The `positionData` array holds sub arrays of x, y, and z coordinates. Use a D3 method to find the maximum value of the z coordinate (the third value) from the arrays and save it in the `output` variable.
# --hints--
The text in the `h2` should be 8.
The text in the `h2` should be `8`.
```js
assert(output == 8 && $('h2').text() == '8');

6
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.md
View File

@ -32,11 +32,11 @@ Here is an example that selects a `ul` element and creates a new list item based
</body>
```
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text "New item".
It may seem confusing to select elements that don't exist yet. This code is telling D3 to first select the `ul` on the page. Next, select all list items, which returns an empty selection. Then the `data()` method reviews the dataset and runs the following code three times, once for each item in the array. The `enter()` method sees there are no `li` elements on the page, but it needs 3 (one for each piece of data in `dataset`). New `li` elements are appended to the `ul` and have the text `New item`.
# --instructions--
Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say "New Title". Your code should use the `data()` and `enter()` methods.
Select the `body` node, then select all `h2` elements. Have D3 create and append an `h2` tag for each item in the `dataset` array. The text in the `h2` should say `New Title`. Your code should use the `data()` and `enter()` methods.
# --hints--
@ -46,7 +46,7 @@ Your document should have 9 `h2` elements.
assert($('h2').length == 9);
```
The text in the `h2` elements should say "New Title". The capitalization and spacing should match exactly.
The text in the `h2` elements should say `New Title`. The capitalization and spacing should match exactly.
```js
assert(

22
curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.md
View File

@ -10,7 +10,7 @@ dashedName: work-with-dynamic-data-in-d3
The last two challenges cover the basics of displaying data dynamically with D3 using the `data()` and `enter()` methods. These methods take a data set and, together with the `append()` method, create a new DOM element for each entry in the data set.
In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, "New Title". This is because you have not made use of the data that is bound to each of the `h2` elements.
In the previous challenge, you created a new `h2` element for each item in the `dataset` array, but they all contained the same text, `New Title`. This is because you have not made use of the data that is bound to each of the `h2` elements.
The D3 `text()` method can take a string or a callback function as an argument:
@ -22,59 +22,59 @@ Using the current example as context, the first `h2` element is bound to 12, the
# --instructions--
Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and "USD". For example, the first heading should be "12 USD".
Change the `text()` method so that each `h2` element displays the corresponding value from the `dataset` array with a single space and the string `USD`. For example, the first heading should be `12 USD`.
# --hints--
The first `h2` should have the text "12 USD".
The first `h2` should have the text `12 USD`.
```js
assert($('h2').eq(0).text() == '12 USD');
```
The second `h2` should have the text "31 USD".
The second `h2` should have the text `31 USD`.
```js
assert($('h2').eq(1).text() == '31 USD');
```
The third `h2` should have the text "22 USD".
The third `h2` should have the text `22 USD`.
```js
assert($('h2').eq(2).text() == '22 USD');
```
The fourth `h2` should have the text "17 USD".
The fourth `h2` should have the text `17 USD`.
```js
assert($('h2').eq(3).text() == '17 USD');
```
The fifth `h2` should have the text "25 USD".
The fifth `h2` should have the text `25 USD`.
```js
assert($('h2').eq(4).text() == '25 USD');
```
The sixth `h2` should have the text "18 USD".
The sixth `h2` should have the text `18 USD`.
```js
assert($('h2').eq(5).text() == '18 USD');
```
The seventh `h2` should have the text "29 USD".
The seventh `h2` should have the text `29 USD`.
```js
assert($('h2').eq(6).text() == '29 USD');
```
The eighth `h2` should have the text "14 USD".
The eighth `h2` should have the text `14 USD`.
```js
assert($('h2').eq(7).text() == '14 USD');
```
The ninth `h2` should have the text "9 USD".
The ninth `h2` should have the text `9 USD`.
```js
assert($('h2').eq(8).text() == '9 USD');

15
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/access-the-json-data-from-an-api.md
View File

@ -16,28 +16,29 @@ Now you'll take a closer look at the returned data to better understand the JSON
Understanding the structure of the data that an API returns is important because it influences how you retrieve the values you need.
On the right, click the "Get Message" button to load the freeCodeCamp Cat Photo API JSON into the HTML.
On the right, click the `Get Message` button to load the freeCodeCamp Cat Photo API JSON into the HTML.
The first and last character you see in the JSON data are square brackets `[ ]`. This means that the returned data is an array. The second character in the JSON data is a curly `{` bracket, which starts an object. Looking closely, you can see that there are three separate objects. The JSON data is an array of three objects, where each object contains information about a cat photo.
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where "id" is a key and 0 is its corresponding value. Similarly, there are keys for "imageLink", "altText", and "codeNames". Each cat photo object has these same keys, but with different values.
You learned earlier that objects contain "key-value pairs" that are separated by commas. In the Cat Photo example, the first object has `"id":0` where `id` is a key and `0` is its corresponding value. Similarly, there are keys for `imageLink`, `altText`, and `codeNames`. Each cat photo object has these same keys, but with different values.
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here "codeNames" is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
Another interesting "key-value pair" in the first object is `"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]`. Here `codeNames` is the key and its value is an array of three strings. It's possible to have arrays of objects as well as a key with an array as a value.
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the "altText" of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
Remember how to access data in arrays and objects. Arrays use bracket notation to access a specific index of an item. Objects use either bracket or dot notation to access the value of a given property. Here's an example that prints the `altText` property of the first cat photo - note that the parsed JSON data in the editor is saved in a variable called `json`:
```js
console.log(json[0].altText);
// Prints "A white cat wearing a green helmet shaped melon on its head."
```
The console would display the string `A white cat wearing a green helmet shaped melon on its head.`.
# --instructions--
For the cat with the "id" of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
For the cat with the `id` of 2, print to the console the second value in the `codeNames` array. You should use bracket and dot notation on the object (which is saved in the variable `json`) to access the value.
# --hints--
Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.
Your code should use bracket and dot notation to access the proper code name, and print `Loki` to the console.
```js
assert(

4
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/change-text-with-click-events.md
View File

@ -10,7 +10,7 @@ dashedName: change-text-with-click-events
When the click event happens, you can use JavaScript to update an HTML element.
For example, when a user clicks the "Get Message" button, it changes the text of the element with the class `message` to say "Here is the message".
For example, when a user clicks the `Get Message` button, it changes the text of the element with the class `message` to say `Here is the message`.
This works by adding the following code within the click event:
@ -18,7 +18,7 @@ This works by adding the following code within the click event:
# --instructions--
Add code inside the `onclick` event handler to change the text inside the `message` element to say "Here is the message".
Add code inside the `onclick` event handler to change the text inside the `message` element to say `Here is the message`.
# --hints--

4
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/convert-json-data-to-html.md
View File

@ -30,13 +30,13 @@ json.forEach(function(val) {
});
```
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to Cross-site scripting attacks.
**Note:** For this challenge, you need to add new HTML elements to the page, so you cannot rely on `textContent`. Instead, you need to use `innerHTML`, which can make a site vulnerable to cross-site scripting attacks.
# --instructions--
Add a `forEach` method to loop over the JSON data and create the HTML elements to display it.
Here is some example JSON
Here is some example JSON:
```json
[

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-geolocation-data-to-find-a-users-gps-coordinates.md
View File

@ -52,7 +52,7 @@ Your code should use `position.coords.longitude` to display the user's longitudi
assert(code.match(/position\.coords\.longitude/g));
```
You should display the user's position within the `data` div element.
You should display the user's position within the `div` element with `id="data"`.
```js
assert(

8
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-fetch-method.md
View File

@ -8,7 +8,7 @@ dashedName: get-json-with-the-javascript-fetch-method
# --description--
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to XMLHttpRequest, but the syntax is considered easier to understand.
Another way to request external data is to use the JavaScript `fetch()` method. It is equivalent to `XMLHttpRequest`, but the syntax is considered easier to understand.
Here is the code for making a GET request to `/json/cats.json`
@ -24,7 +24,7 @@ fetch('/json/cats.json')
Take a look at each piece of this code.
The first line is the one that makes the request. So, `fetch(URL)` makes a GET request to the URL specified. The method returns a Promise.
The first line is the one that makes the request. So, `fetch(URL)` makes a `GET` request to the URL specified. The method returns a Promise.
After a Promise is returned, if the request was successful, the `then` method is executed, which takes the response and converts it to JSON format.
@ -34,11 +34,11 @@ Now, it selects the element that will receive the data by using `document.getEle
# --instructions--
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. But this time, using the `fetch` method instead of `XMLHttpRequest`.
# --hints--
Your code should make a GET request with `fetch`.
Your code should make a `GET` request with `fetch`.
```js
assert(code.match(/fetch\s*\(\s*('|")\/json\/cats\.json\1\s*\)/g));

6
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/get-json-with-the-javascript-xmlhttprequest-method.md
View File

@ -32,11 +32,11 @@ req.onload = function(){
};
```
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a "GET" request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
Here's a review of what each piece is doing. The JavaScript `XMLHttpRequest` object has a number of properties and methods that are used to transfer data. First, an instance of the `XMLHttpRequest` object is created and saved in the `req` variable. Next, the `open` method initializes a request - this example is requesting data from an API, therefore is a `GET` request. The second argument for `open` is the URL of the API you are requesting data from. The third argument is a Boolean value where `true` makes it an asynchronous request. The `send` method sends the request. Finally, the `onload` event handler parses the returned data and applies the `JSON.stringify` method to convert the JavaScript object into a string. This string is then inserted as the message text.
# --instructions--
Update the code to create and send a "GET" request to the freeCodeCamp Cat Photo API. Then click the "Get Message" button. Your AJAX function will replace the "The message will go here" text with the raw JSON output from the API.
Update the code to create and send a `GET` request to the freeCodeCamp Cat Photo API. Then click the `Get Message` button. Your AJAX function will replace the `The message will go here` text with the raw JSON output from the API.
# --hints--
@ -46,7 +46,7 @@ Your code should create a new `XMLHttpRequest`.
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
```
Your code should use the `open` method to initialize a "GET" request to the freeCodeCamp Cat Photo API.
Your code should use the `open` method to initialize a `GET` request to the freeCodeCamp Cat Photo API.
```js
assert(

8
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/post-data-with-the-javascript-xmlhttprequest-method.md
View File

@ -26,11 +26,11 @@ const body = JSON.stringify({ userName: userName, suffix: ' loves cats!' });
xhr.send(body);
```
You've seen several of these methods before. Here the `open` method initializes the request as a "POST" to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of 4 means the operation is complete, and a `status` of 201 means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
You've seen several of these methods before. Here the `open` method initializes the request as a `POST` to the given URL of the external resource, and uses the `true` Boolean to make it asynchronous. The `setRequestHeader` method sets the value of an HTTP request header, which contains information about the sender and the request. It must be called after the `open` method, but before the `send` method. The two parameters are the name of the header and the value to set as the body of that header. Next, the `onreadystatechange` event listener handles a change in the state of the request. A `readyState` of `4` means the operation is complete, and a `status` of `201` means it was a successful request. The document's HTML can be updated. Finally, the `send` method sends the request with the `body` value, which the `userName` key was given by the user in the `input` field.
# --instructions--
Update the code so it makes a "POST" request to the API endpoint. Then type your name in the input field and click "Send Message". Your AJAX function should replace "Reply from Server will be here." with data from the server. Format the response to display your name appended with " loves cats".
Update the code so it makes a `POST` request to the API endpoint. Then type your name in the input field and click `Send Message`. Your AJAX function should replace `Reply from Server will be here.` with data from the server. Format the response to display your name appended with the text ` loves cats`.
# --hints--
@ -40,7 +40,7 @@ Your code should create a new `XMLHttpRequest`.
assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g));
```
Your code should use the `open` method to initialize a "POST" request to the server.
Your code should use the `open` method to initialize a `POST` request to the server.
```js
assert(code.match(/\.open\(\s*?('|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g));
@ -62,7 +62,7 @@ Your code should have an `onreadystatechange` event handler set to a function.
assert(code.match(/\.onreadystatechange\s*?=/g));
```
Your code should get the element with class `message` and change its `textContent` to "`userName` loves cats"
Your code should get the element with class `message` and change its `textContent` to `userName loves cats`
```js
assert(

4
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/pre-filter-json-to-get-the-data-you-need.md
View File

@ -10,7 +10,7 @@ dashedName: pre-filter-json-to-get-the-data-you-need
If you don't want to render every cat photo you get from the freeCodeCamp Cat Photo API, you can pre-filter the JSON before looping through it.
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose "id" key has a value of 1.
Given that the JSON data is stored in an array, you can use the `filter` method to filter out the cat whose `id` key has a value of `1`.
Here's the code to do this:
@ -22,7 +22,7 @@ json = json.filter(function(val) {
# --instructions--
Add code to `filter` the json data to remove the cat with the "id" value of 1.
Add code to `filter` the json data to remove the cat with the `id` value of `1`.
# --hints--

2
curriculum/challenges/english/04-data-visualization/json-apis-and-ajax/render-images-from-data-sources.md
View File

@ -28,7 +28,7 @@ You should use the `imageLink` property to display the images.
assert(code.match(/val\.imageLink/g));
```
You should use the `altText` for the alt attribute values of the images.
You should use the `altText` for the `alt` attribute values of the images.
```js
assert(code.match(/val\.altText/g));