chore: audit data visualisation challenges (#41336)
* 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:
committed by
GitHub
parent
5075f14248
commit
16e420021c
@ -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');
|
||||
|
@ -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(
|
||||
|
@ -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(
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -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(
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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(
|
||||
|
@ -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));
|
||||
|
@ -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--
|
||||
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -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);
|
||||
|
@ -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');
|
||||
|
@ -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(
|
||||
|
@ -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');
|
||||
|
@ -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,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');
|
||||
|
@ -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(
|
||||
|
@ -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');
|
||||
|
@ -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');
|
||||
|
@ -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(
|
||||
|
@ -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');
|
||||
|
Reference in New Issue
Block a user