forked from jtr13/d3book
-
Notifications
You must be signed in to change notification settings - Fork 0
/
scripts.Rmd
52 lines (38 loc) · 1.29 KB
/
scripts.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
# D3 scripts <i class="fas fa-code"></i> {#d3scripts}
To follow along with the code in this section, download and open a fresh copy of [six_blue_circles.html](https://raw.githubusercontent.com/jtr13/d3book/master/code/six_blue_circles.html){target="_blank"}, or use the [online
version](https://jtr13.github.io/D3/SixBlueCircles.html){target="_blank"}.
## Adding D3 to `html` file
``` html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Change the title!</title>
<script src="https://d3js.org/d3.v5.min.js"></script> <!-- link to D3 library -->
</head>
<body>
<script>
// JavaScript / D3 will go here
</script>
</body>
</html>
```
## Add svg
``` js
<script>
d3.select("body").append("svg").attr("width", "500").attr("height", "400");
</script>
```
## Add a circle
``` js
<script>
d3.select("body").append("svg").attr("width", "500").attr("height", "400");
d3.select("svg").append("circle").attr("cx", "200").attr("cy", "250")
.attr("r", "20").attr("fill", "red");
</script>
```
## Practice 2
Start with bare minimum `html` (w/ D3 link):
[D3template.html](https://raw.githubusercontent.com/jtr13/D3/master/D3template.html).
Open the file in your text editor. Then add code to the `<script>`
section to create an svg and then add `svg` elements to it.