2018-09-30 23:01:58 +01:00
---
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
challengeType: 6
2019-08-05 09:17:33 -07:00
forumTopicId: 301472
2021-01-13 03:31:00 +01:00
dashedName: add-axes-to-a-visualization
2018-09-30 23:01:58 +01:00
---
2020-11-27 19:02:05 +01:00
# --description--
2018-09-30 23:01:58 +01:00
Another way to improve the scatter plot is to add an x-axis and a y-axis.
2020-11-27 19:02:05 +01:00
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:
2020-07-27 03:22:47 -04:00
```js
const xAxis = d3.axisBottom(xScale);
```
2020-11-27 19:02:05 +01:00
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:
2019-05-14 05:04:05 -07:00
```js
const xAxis = d3.axisBottom(xScale);
svg.append("g")
.attr("transform", "translate(0, " + (h - padding) + ")")
.call(xAxis);
```
2021-03-05 11:25:29 -08:00
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.
2020-11-27 19:02:05 +01:00
# --instructions--
2018-09-30 23:01:58 +01:00
2021-03-05 11:25:29 -08:00
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.
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
# --hints--
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
Your code should use the `axisLeft()` method with `yScale` passed as the argument.
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert(code.match(/\.axisLeft\(yScale\)/g));
2018-09-30 23:01:58 +01:00
```
2021-03-05 11:25:29 -08:00
The y-axis `g` element should have a `transform` attribute to translate the axis by `(60, 0)` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert(
$('g')
.eq(10)
.attr('transform')
.match(/translate\(60\s*?,\s*?0\)/g)
);
```
Your code should call the `yAxis` .
2018-09-30 23:01:58 +01:00
2020-11-27 19:02:05 +01:00
```js
assert(code.match(/\.call\(\s*yAxis\s*\)/g));
```
# --seed--
## --seed-contents--
2018-09-30 23:01:58 +01:00
```html
< body >
< script >
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
const w = 500;
const h = 500;
const padding = 60;
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d[0]))
.attr("cy",(d) => yScale(d[1]))
.attr("r", (d) => 5);
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => (d[0] + "," + d[1]))
.attr("x", (d) => xScale(d[0] + 10))
.attr("y", (d) => yScale(d[1]))
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
const xAxis = d3.axisBottom(xScale);
// Add your code below this line
const yAxis = undefined;
// Add your code above this line
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
// Add your code below this line
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
// Add your code above this line
2018-10-08 01:01:53 +01:00
2018-09-30 23:01:58 +01:00
< / script >
< / body >
```
2020-11-27 19:02:05 +01:00
# --solutions--
2018-09-30 23:01:58 +01:00
2020-04-24 17:04:53 +05:30
```html
< body >
< script >
const dataset = [
[ 34, 78 ],
[ 109, 280 ],
[ 310, 120 ],
[ 79, 411 ],
[ 420, 220 ],
[ 233, 145 ],
[ 333, 96 ],
[ 222, 333 ],
[ 78, 320 ],
[ 21, 123 ]
];
const w = 500;
const h = 500;
const padding = 60;
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[1])])
.range([h - padding, padding]);
const svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d) => xScale(d[0]))
.attr("cy",(d) => yScale(d[1]))
.attr("r", (d) => 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => (d[0] + "," + d[1]))
.attr("x", (d) => xScale(d[0] + 10))
.attr("y", (d) => yScale(d[1]))
const xAxis = d3.axisBottom(xScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(" + padding + ",0)")
.call(yAxis)
< / script >
< / body >
2018-09-30 23:01:58 +01:00
```
