Similar examples for area and area radial

09fdab53 · Kristofer Monisit · 41a8a86f · 09fdab53 · 09fdab53
Commit 09fdab53 authored Apr 04, 2012 by Kristofer Monisit
Hide whitespace changes
Inline Side-by-side

Showing with 165 additions and 0 deletions

examples/area-defined/area-radial.html examples/area-defined/area-radial.html +50 -0

examples/area-defined/area.html examples/area-defined/area.html +115 -0

No files found.
--- a/examples/area-defined/area-radial.html
+++ b/examples/area-defined/area-radial.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Area Chart (Radial)</title>
+    <script type="text/javascript" src="../../d3.v2.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 i % 10 ? .8 + Math.sin(i / 20 * Math.PI) / 6 : null; });
+
+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()
+    .defined(function(d) { return d; })
+    .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()
+    .defined(function(d) { return d; })
+    .radius(function(d) { return r * d; })
+    .angle(function(d, i) { return i / 180 * Math.PI; }));
+
+    </script>
+  </body>
+</html>
--- a/examples/area-defined/area.html
+++ b/examples/area-defined/area.html
+<!DOCTYPE html>
+<html>
+  <head>
+    <title>Area Chart</title>
+    <script type="text/javascript" src="../../d3.v2.js"></script>
+    <style type="text/css">
+
+body {
+  font: 10px sans-serif;
+}
+
+.rule line {
+  stroke: #eee;
+  shape-rendering: crispEdges;
+}
+
+.rule line.axis {
+  stroke: #000;
+}
+
+.area {
+  fill: lightsteelblue;
+}
+
+.line, circle.area {
+  fill: none;
+  stroke: steelblue;
+  stroke-width: 1.5px;
+}
+
+circle.area {
+  fill: #fff;
+}
+
+    </style>
+  </head>
+  <body>
+    <script type="text/javascript">
+
+var data = d3.range(20).map(function(i) {
+  return {x: i / 19, y: i % 5 ? (Math.sin(i / 3) + 1) / 2 : null};
+});
+
+var w = 450,
+    h = 275,
+    p = 20,
+    x = d3.scale.linear().domain([0, 1]).range([0, w]),
+    y = d3.scale.linear().domain([0, 1]).range([h, 0]);
+
+var vis = d3.select("body")
+  .append("svg")
+    .data([data])
+    .attr("width", w + p * 2)
+    .attr("height", h + p * 2)
+  .append("g")
+    .attr("transform", "translate(" + p + "," + p + ")");
+
+var rules = vis.selectAll("g.rule")
+    .data(x.ticks(10))
+  .enter().append("g")
+    .attr("class", "rule");
+
+rules.append("line")
+    .attr("x1", x)
+    .attr("x2", x)
+    .attr("y1", 0)
+    .attr("y2", h - 1);
+
+rules.append("line")
+    .attr("class", function(d) { return d ? null : "axis"; })
+    .attr("y1", y)
+    .attr("y2", y)
+    .attr("x1", 0)
+    .attr("x2", w + 1);
+
+rules.append("text")
+    .attr("x", x)
+    .attr("y", h + 3)
+    .attr("dy", ".71em")
+    .attr("text-anchor", "middle")
+    .text(x.tickFormat(10));
+
+rules.append("text")
+    .attr("y", y)
+    .attr("x", -3)
+    .attr("dy", ".35em")
+    .attr("text-anchor", "end")
+    .text(y.tickFormat(10));
+
+vis.append("path")
+    .attr("class", "area")
+    .attr("d", d3.svg.area()
+    .defined(function(d) { return d.y; })
+    .x(function(d) { return x(d.x); })
+    .y0(h - 1)
+    .y1(function(d) { return y(d.y); }));
+
+vis.append("path")
+    .attr("class", "line")
+    .attr("d", d3.svg.line()
+    .defined(function(d) { return d.y; })
+    .x(function(d) { return x(d.x); })
+    .y(function(d) { return y(d.y); }));
+
+vis.selectAll("circle.area")
+    .data(data.filter(function(d) { return d.y; }))
+  .enter().append("circle")
+    .attr("class", "area")
+    .attr("cx", function(d) { return x(d.x); })
+    .attr("cy", function(d) { return y(d.y); })
+    .attr("r", 3.5);
+
+    </script>
+  </body>
+</html>