-
Notifications
You must be signed in to change notification settings - Fork 34
/
scales_and_axes.Rmd
101 lines (56 loc) · 3 KB
/
scales_and_axes.Rmd
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
# Scales and Axes <i class="fa fa-arrows"></i>
## Scales
### Lecture slides <i class="fa fa-television"></i>
<script src="https://d3js.org/d3.v7.js"></script>
[Scales](pdfs/scales.pdf){target="_blank"}
### Practice
See: *IDVW2*, Chapter 7: Scales
Practice creating an ordinal scale in the Console:
> <i class="fa fa-hand-o-right"></i> *Open the JavaScript Console* <i class="fa fa-terminal"></i>
``` js
const myscale = d3.scaleBand()
.domain([0, 1, 2, 3, 4])
.range([0, 100]);
```
``` js
myscale(1);
```
Try other numbers: `myscale(3);`, `myscale(2.5);`, `myscale(7);`, etc.
Add inner padding and try again.
More on band scales here: [https://d3js.org/d3-scale/band](https://d3js.org/d3-scale/band)
> <i class="far fa-lightbulb"></i> *Be sure to use `d3.scaleBand()`, not `d3.scaleOrdinal()` for this use case.
### Exercise <i class="fas fa-dumbbell"></i>: vertical bar chart
#### `d3.scaleBand()` {-}
*IDVW2* Chapter 9, pp. 150-153
Create the vertical bar chart shown below by filling in the lines marked ADD [in this file](https://raw.githubusercontent.com/jtr13/d3book/main/code/d3.scaleBand_exercise.html){target="_blank"} and uncommenting them. (Note that we are not yet employing a linear scale for the y-axis.)
<iframe src="code/d3.scaleBand.html" width="450" height="350" frameBorder="0"></iframe>
[Solution](https://raw.githubusercontent.com/jtr13/d3book/main/code/d3.scaleBand.html){target="_blank"}
#### `d3.scaleLinear()` {-}
In the next graph, `d3.scaleLinear()` is added to create a `yScale` function to convert bar heights to pixels. Change the data and observe how the bars are resized to fit on the SVG.
<iframe src="code/d3.scaleLinear.html" width="450" height="350" frameBorder="0"></iframe>
[Code for download](https://raw.githubusercontent.com/jtr13/d3book/main/code/d3.scaleLinear.html){target="_blank"}
## Margins
### Lecture slides <i class="fa fa-television"></i>
[Margins](pdfs/margins.pdf){target="_blank"}
"Margin convention"
``` js
const w = 500;
const h = 400;
const margin = {top: 25, right: 0, bottom: 25, left: 25};
const innerWidth = w - margin.left - margin.right;
const innerHeight = h - margin.top - margin.bottom;
```
### Bar chart with margins
<iframe src="code/margins.html" width="450" height="350" frameBorder="0"></iframe>
[Code for download](https://raw.githubusercontent.com/jtr13/d3book/main/code/margins.html){target="_blank"}
## Axes
See: *IDVW2*, Chapter 8: Axes
### Lecture slides <i class="fa fa-television"></i>
[Axes](pdfs/axes.pdf){target="_blank"}
### Bar chart with axes
<iframe src="code/axes.html" width="450" height="350" frameBorder="0"></iframe>
[Code for download](https://raw.githubusercontent.com/jtr13/d3book/main/code/axes.html){target="_blank"}
Practice changing the data and seeing what happens.
## Bar chart with categorical labels
<iframe src="code/axes_cat_labels.html" width="450" height="350" frameBorder="0"></iframe>
[Code for download](https://raw.githubusercontent.com/jtr13/d3book/main/code/axes_cat_labels.html){target="_blank"}