Commit 09fdab53 authored by Kristofer Monisit's avatar Kristofer Monisit

Similar examples for area and area radial

parent 41a8a86f
<!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>
<!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>
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment