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
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 2 deletions
Show Stats 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
<section id='description'>
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:
<code>const xAxis = d3.axisBottom(xScale);</code>
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:
```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.
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.