forked from d3/d3
-
Notifications
You must be signed in to change notification settings - Fork 0
/
area-radial.html
48 lines (40 loc) · 1.04 KB
/
area-radial.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
<!DOCTYPE html>
<html>
<head>
<title>Area Chart (Radial)</title>
<script type="text/javascript" src="../../d3.js"></script>
<style type="text/css">
.area {
fill: lightsteelblue;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
var r = 960 / 2,
data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });
var svg = d3.select("body").append("svg")
.data([data])
.attr("width", r * 2)
.attr("height", r * 2)
.append("g")
.attr("transform", "translate(" + r + "," + r + ")");
svg.append("path")
.attr("class", "area")
.attr("d", d3.svg.area.radial()
.innerRadius(r / 2)
.outerRadius(function(d) { return r * d; })
.angle(function(d, i) { return i / 180 * Math.PI; }));
svg.append("path")
.attr("class", "line")
.attr("d", d3.svg.line.radial()
.radius(function(d) { return r * d; })
.angle(function(d, i) { return i / 180 * Math.PI; }));
</script>
</body>
</html>