From 516602cef851a30e09c6199a495de7c1885e1726 Mon Sep 17 00:00:00 2001 From: Ty Mick Date: Mon, 27 Jul 2020 03:22:47 -0400 Subject: [PATCH] fix(curriculum): Improve punctuation/formatting in "Add Axes to a Visualization" (#39261) * 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> --- .../add-axes-to-a-visualization.english.md | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md index b5ab88fb3d..55d8bfd973 100644 --- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md +++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.english.md @@ -9,8 +9,12 @@ forumTopicId: 301472 ## Description
Another way to improve the scatter plot is to add an x-axis and a y-axis. -D3 has two methods axisLeft() and axisBottom() 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 xScale in the previous challenges: -const xAxis = d3.axisBottom(xScale); +D3 has two methods, axisLeft() and axisBottom(), to render the y-axis and x-axis, respectively. Here's an example to create the x-axis based on the xScale 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 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.