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

fix(curriculum): Improve punctuation/formatting in "Add Axes to a Visualization" (#39261)

Browse Source 
* Improve punctuation

* Clean up axis identification

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

* Add block formatting to code sample

Co-authored-by: Randell Dawson <5313213+RandellDawson@users.noreply.github.com>
This commit is contained in:
Ty Mick
2020-07-27 03:22:47 -04:00
committed by GitHub
parent 92377cf71a
commit 516602cef8
1 changed files with 6 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -9,8 +9,12 @@ forumTopicId: 301472
## Description ## Description
<section id='description'> <section id='description'>
Another way to improve the scatter plot is to add an x-axis and a y-axis. Another way to improve the scatter plot is to add an x-axis and a y-axis.
D3 has two methods <code>axisLeft()</code> and <code>axisBottom()</code> to render the y and x axes, respectively. (Axes is the plural form of axis). Here's an example to create the x-axis based on the <code>xScale</code> in the previous challenges: D3 has two methods, <code>axisLeft()</code> and <code>axisBottom()</code>, to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the <code>xScale</code> in the previous challenges:
<code>const xAxis = d3.axisBottom(xScale);</code>
```js
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 <code>g</code> element. The <code>g</code> stands for group. The next step is to render the axis on the SVG canvas. To do so, you can use a general SVG component, the <code>g</code> element. The <code>g</code> stands for group.
Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works. Unlike <code>rect</code>, <code>circle</code>, and <code>text</code>, an axis is just a straight line when it's rendered. Because it is a simple shape, using <code>g</code> works.
The last step is to apply a <code>transform</code> 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. The last step is to apply a <code>transform</code> 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.