D3_Tutorial_Udemy/basics.html at master · avimhael/D3_Tutorial_Udemy · GitHub

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
<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="description" content="Drawing Shapes"/>
    <meta charset="utf-8">
    <title>Drawing Shapes</title>
    <script src="https://d3js.org/d3.v4.min.js" charset="utf-8"></script>
</head>
<body>
    <h3>SVG Bar</h3>
    <svg>
        <rect width="50" height="200" style="fill:blue"/>
    </svg>
    <h3>D3 Bar</h3>
<script>
    d3.select("body")
    .append("svg")
    .append("rect")
    .attr("width",50)
    .attr("height",200)
    .style("fill","blue");

</script>
<h3>SVG Circle</h3>
<svg width="50" height="50">
    <circle cx="25" cy="25" r="25" style="fill:blue"/>
</svg>
<h3>D3 Circle</h3>
<script>
d3.select("body")
.append("svg")
.attr("width",50)
.attr("height",50)
.append("circle")
.attr("cx",25)
.attr("cy",25)
.attr("r",25)

.style("fill","purple");

</script>
<svg width="250" height="50">
    <text x="0" y="25">Easy Peasy</text>
</svg>
<script>
    d3.select("body")
    .append("svg")
    .attr("width",250)
    .attr("height",50)
    .append("text")
    .text("Easy Peasy")
    .attr("y",25)
    .attr("x",0)

    .style("fill","purple");

    </script>
</body>
</html>