-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
95 lines (77 loc) · 2.46 KB
/
index.html
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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3 Playground</title>
<link rel="stylesheet" type="text/css" href="index.css">
<script type="text/javascript" src="d3/d3.js"></script>
</head>
<body>
<script type="text/javascript">
// Bar Chart with SVG
var datasetFour = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
var w = 500;
var h = 100;
var svg = d3.select("body").append("div").attr("width", w).attr("height", h);
svg.selectAll("rect")
.data(datasetFour)
.enter()
.append("rect")
.attr("x", function(d, i) {
return i * 21;
})
.attr("y", 0)
.attr("width", 20)
.attr("height", 100);
d3.select("body").selectAll("div")
.data(datasetFour)
.enter()
.append("div")
.attr("class", "bar")
.style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px";
});
d3.select("body").append("br")
// Making a circle chart with SVG
var w = 500;
var h = 50;
var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);
var datasetThree = [5, 10, 15, 20, 25];
var circles = svg.selectAll("circle").data(datasetThree).enter().append("circle");
circles.attr("cx", function(d, i) {
return (i * 50) + 25;
})
.attr("cy", h/2)
.attr("r", function(d) {
return d;
})
.attr("fill", "yellow")
.attr("stroke", "orange")
.attr("stroke-width", function(d) {
return d/2;
});
d3.select("body").append("br")
// Basic Bar Chart using data
var datasetTwo = [ 25, 7, 5, 26, 11, 8, 25, 14, 23, 19,
14, 11, 22, 29, 11, 13, 12, 17, 18, 10,
24, 18, 25, 9, 3 ];
d3.select("body").selectAll("div").data(datasetTwo).enter().append("div").attr("class", "bar").style("height", function(d) {
var barHeight = d * 5;
return barHeight + "px"; } )
// Basic display of texts depending on data
var datasetOne = [5, 10, 15, 20, 25]
var canCount = function (d) {
return "I can count up to " + d;
};
d3.select("body").selectAll("p").data(datasetOne).enter().append("p").text(canCount);
// Another way of doing it without creating a function
// d3.select("body").selectAll("p").data(datasetOne).enter().append("p").text(function(d) { return "I can count up to " + d; } );
// This is used to test a loading a csv
// d3.csv("food.csv", function(data) {
// console.log(data);
// });
</script>
</body>
</html>