equal
deleted
inserted
replaced
|
1 <!DOCTYPE html> |
|
2 <html> |
|
3 <head> |
|
4 <title>Area Chart (Radial)</title> |
|
5 <script type="text/javascript" src="../../d3.js"></script> |
|
6 <style type="text/css"> |
|
7 |
|
8 .area { |
|
9 fill: lightsteelblue; |
|
10 } |
|
11 |
|
12 .line { |
|
13 fill: none; |
|
14 stroke: steelblue; |
|
15 stroke-width: 1.5px; |
|
16 } |
|
17 |
|
18 </style> |
|
19 </head> |
|
20 <body> |
|
21 <script type="text/javascript"> |
|
22 |
|
23 var r = 960 / 2, |
|
24 data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; }); |
|
25 |
|
26 var svg = d3.select("body").append("svg:svg") |
|
27 .data([data]) |
|
28 .attr("width", r * 2) |
|
29 .attr("height", r * 2) |
|
30 .append("svg:g") |
|
31 .attr("transform", "translate(" + r + "," + r + ")"); |
|
32 |
|
33 svg.append("svg:path") |
|
34 .attr("class", "area") |
|
35 .attr("d", d3.svg.area.radial() |
|
36 .innerRadius(r / 2) |
|
37 .outerRadius(function(d) { return r * d; }) |
|
38 .angle(function(d, i) { return i / 180 * Math.PI; })); |
|
39 |
|
40 svg.append("svg:path") |
|
41 .attr("class", "line") |
|
42 .attr("d", d3.svg.line.radial() |
|
43 .radius(function(d) { return r * d; }) |
|
44 .angle(function(d, i) { return i / 180 * Math.PI; })); |
|
45 |
|
46 </script> |
|
47 </body> |
|
48 </html> |