From 659b038c51e36b7848943243bed13fbfa4bbdf72 Mon Sep 17 00:00:00 2001 From: al6862 <120232244+al6862@users.noreply.github.com> Date: Fri, 17 Mar 2023 13:02:12 -0400 Subject: [PATCH] fix(curriculum): update "SVG canvas" to "SVG" in D3 course (#49684) --- .../add-attributes-to-the-circle-elements.md | 6 +++--- .../add-axes-to-a-visualization.md | 4 ++-- .../add-labels-to-d3-elements.md | 2 +- .../add-labels-to-scatter-plot-circles.md | 2 +- .../create-a-linear-scale-with-d3.md | 8 ++++---- .../create-a-scatterplot-with-svg-circles.md | 2 +- .../set-a-domain-and-a-range-on-a-scale.md | 2 +- .../use-a-pre-defined-scale-to-place-elements.md | 6 +++--- .../data-visualization-with-d3/use-dynamic-scales.md | 8 ++++---- curriculum/dictionaries/english/comments.json | 2 +- 10 files changed, 21 insertions(+), 21 deletions(-) diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md index f8ad5729131..75ada157757 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.md @@ -8,11 +8,11 @@ dashedName: add-attributes-to-the-circle-elements # --description-- -The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG canvas. But D3 needs more information about the position and size of each `circle` to display them correctly. +The last challenge created the `circle` elements for each point in the `dataset`, and appended them to the SVG. But D3 needs more information about the position and size of each `circle` to display them correctly. -A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG canvas. The radius (`r` attribute) gives the size of the `circle`. +A `circle` in SVG has three main attributes. The `cx` and `cy` attributes are the coordinates. They tell D3 where to position the *center* of the shape on the SVG. The radius (`r` attribute) gives the size of the `circle`. -Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG canvas, not from the bottom. +Just like the `rect` `y` coordinate, the `cy` attribute for a `circle` is measured from the top of the SVG, not from the bottom. All three attributes can use a callback function to set their values dynamically. Remember that all methods chained after `data(dataset)` run once per item in `dataset`. The `d` parameter in the callback function refers to the current item in `dataset`, which is an array for each point. You use bracket notation, like `d[0]`, to access the values in that array. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md index 20dcceba1bd..e21e7e08f69 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.md @@ -16,7 +16,7 @@ D3 has two methods, `axisLeft()` and `axisBottom()`, to render the y-axis and x- const xAxis = d3.axisBottom(xScale); ``` -The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG canvas in the right place. Otherwise, the line would render along the border of SVG canvas and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example: +The next step is to render the axis on the SVG. To do so, you can use a general SVG component, the `g` element. The `g` stands for group. Unlike `rect`, `circle`, and `text`, an axis is just a straight line when it's rendered. Because it is a simple shape, using `g` works. The last step is to apply a `transform` attribute to position the axis on the SVG in the right place. Otherwise, the line would render along the border of the SVG and wouldn't be visible. SVG supports different types of `transforms`, but positioning an axis needs `translate`. When it's applied to the `g` element, it moves the whole group over and down by the given amounts. Here's an example: ```js const xAxis = d3.axisBottom(xScale); @@ -26,7 +26,7 @@ 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. 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-- diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md index d0da292c769..585ba735553 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.md @@ -10,7 +10,7 @@ dashedName: add-labels-to-d3-elements D3 lets you label a graph element, such as a bar, using the SVG `text` element. -Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG canvas. It also needs to access the data to display those values. +Like the `rect` element, a `text` element needs to have `x` and `y` attributes, to place it on the SVG. It also needs to access the data to display those values. D3 gives you a high level of control over how you label your bars. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md index 0ad9ff3fbac..9db06dbce87 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.md @@ -12,7 +12,7 @@ You can add text to create labels for the points in a scatter plot. The goal is to display the comma-separated values for the first (`x`) and second (`y`) fields of each item in `dataset`. -The `text` nodes need `x` and `y` attributes to position it on the SVG canvas. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point. +The `text` nodes need `x` and `y` attributes to position it on the SVG. In this challenge, the `y` value (which determines height) can use the same value that the `circle` uses for its `cy` attribute. The `x` value can be slightly larger than the `cx` value of the `circle`, so the label is visible. This will push the label to the right of the plotted point. # --instructions-- diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md index d118740df6c..4717db6fe9a 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.md @@ -8,13 +8,13 @@ dashedName: create-a-linear-scale-with-d3 # --description-- -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. +The bar and scatter plot charts both plotted data directly onto the SVG. 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. -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. +For example, say you have a 100x500-sized SVG 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. -It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your canvas width and height. +It's unlikely you would plot raw data as-is. Before plotting it, you set the scale for your entire data set, so that the `x` and `y` values fit your SVG width and height. D3 has several scale types. For a linear scale (usually used with quantitative data), there is the D3 method `scaleLinear()`: diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md index 5f4bd1e056f..f4c404b66ae 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.md @@ -14,7 +14,7 @@ SVG has a `circle` tag to create the circle shape. It works a lot like the `rect # --instructions-- -Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG canvas. +Use the `data()`, `enter()`, and `append()` methods to bind `dataset` to new `circle` elements that are appended to the SVG. **Note:** The circles won't be visible because we haven't set their attributes yet. We'll do that in the next challenge. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md index 5a678c5dd0d..3fa5116584f 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.md @@ -12,7 +12,7 @@ By default, scales use the identity relationship. This means the input value map Say a dataset has values ranging from 50 to 480. This is the input information for a scale, also known as the domain. -You want to map those points along the `x` axis on the SVG canvas, between 10 units and 500 units. This is the output information, also known as the range. +You want to map those points along the `x` axis on the SVG, between 10 units and 500 units. This is the output information, also known as the range. 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: diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md index e02248743c2..22964ba26fc 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.md @@ -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. 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: @@ -17,11 +17,11 @@ shape .attr("x", (d) => xScale(d[0])) ``` -Scales set shape coordinate attributes to place the data points onto the SVG canvas. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label. +Scales set shape coordinate attributes to place the data points onto the SVG. You don't need to apply scales when you display the actual data value, for example, in the `text()` method for a tooltip or label. # --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. 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`. diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md index 92889986bd6..b687b913259 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.md @@ -10,11 +10,11 @@ dashedName: use-dynamic-scales The D3 `min()` and `max()` methods are useful to help set the scale. -Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG canvas so it's visible on the web page. +Given a complex data set, one priority is to set the scale so the visualization fits the SVG container's width and height. You want all the data plotted inside the SVG so it's visible on the web page. The example below sets the x-axis scale for scatter plot data. The `domain()` method passes information to the scale about the raw data values for the plot. The `range()` method gives it information about the actual space on the web page for the visualization. -In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG canvas' width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG canvas. +In the example, the domain goes from 0 to the maximum in the set. It uses the `max()` method with a callback function based on the x values in the arrays. The range uses the SVG's width (`w`), but it includes some padding, too. This puts space between the scatter plot dots and the edge of the SVG. ```js const dataset = [ @@ -38,7 +38,7 @@ const xScale = d3.scaleLinear() .range([padding, w - padding]); ``` -The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG canvas). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500). +The padding may be confusing at first. Picture the x-axis as a horizontal line from 0 to 500 (the width value for the SVG). Including the padding in the `range()` method forces the plot to start at 30 along that line (instead of 0), and end at 470 (instead of 500). # --instructions-- @@ -89,7 +89,7 @@ assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30])); const w = 500; const h = 500; - // Padding between the SVG canvas boundary and the plot + // Padding between the SVG boundary and the plot const padding = 30; // Create an x and y scale diff --git a/curriculum/dictionaries/english/comments.json b/curriculum/dictionaries/english/comments.json index 388ffd833d8..30a1def647a 100644 --- a/curriculum/dictionaries/english/comments.json +++ b/curriculum/dictionaries/english/comments.json @@ -66,7 +66,7 @@ "cvh4x7": "Only change code below this line", "lvmnm7": "Open a new tab for cat memes", "avpx79": "Open your browser console.", - "0b5ps6": "Padding between the SVG canvas boundary and the plot", + "0b5ps6": "Padding between the SVG boundary and the plot", "uemoej": "Pushes n zeroes into the current row to create the columns", "lm86nf": "Pushes the current row, which now has n zeroes in it, to the array", "qscelx": "Redux methods are available from a Redux object",