Commit 3adff5ab authored by Mike Bostock's avatar Mike Bostock

Bring area & line examples up-to-date.

Related #565.
parent 09fdab53
<!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>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.area {
fill: lightsteelblue;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
.dot {
fill: white;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="../../d3.v2.js"></script>
<script>
var data = d3.range(40).map(function(i) {
return {x: i / 39, y: i % 5 ? (Math.sin(i / 3) + 2) / 4 : null};
});
var margin = {top: 10, right: 10, bottom: 20, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var x = d3.scale.linear()
.domain([0, 1])
.range([0, width]);
var y = d3.scale.linear()
.domain([0, 1])
.range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.defined(function(d) { return d.y != null; })
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var area = d3.svg.area()
.defined(line.defined())
.x(line.x())
.y1(line.y())
.y0(y(0));
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.attr("class", "area")
.attr("d", area);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
svg.append("path")
.attr("class", "line")
.attr("d", line);
svg.selectAll(".dot")
.data(data.filter(function(d) { return d.y; }))
.enter().append("circle")
.attr("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5);
</script>
<!DOCTYPE html>
<meta charset="utf-8">
<style>
.area {
fill: lightsteelblue;
}
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
<body>
<script src="../../d3.v2.js"></script>
<script>
var data = d3.range(120).map(function(i) {
return i % 10
? .8 + Math.sin(i / 3 * Math.PI) / 6
: null;
});
var width = 960,
height = 500;
var radius = d3.scale.linear()
.domain([0, 1])
.range([height / 3, height / 2]);
var angle = d3.scale.linear()
.domain([0, data.length])
.range([0, 2 * Math.PI]);
var line = d3.svg.line.radial()
.defined(function(d) { return d != null; })
.interpolate("basis")
.radius(radius)
.angle(function(d, i) { return angle(i); });
var area = d3.svg.area.radial()
.defined(line.defined())
.interpolate(line.interpolate())
.innerRadius(radius(0))
.outerRadius(line.radius())
.angle(line.angle());
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.append("path")
.attr("class", "area")
.attr("d", area);
svg.append("path")
.attr("class", "line")
.attr("d", line);
</script>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <style>
<title>Area Chart (Radial)</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
.area { .area {
fill: lightsteelblue; fill: lightsteelblue;
...@@ -15,34 +12,50 @@ ...@@ -15,34 +12,50 @@
stroke-width: 1.5px; stroke-width: 1.5px;
} }
</style> </style>
</head> <body>
<body> <script src="../../d3.v2.js"></script>
<script type="text/javascript"> <script>
var r = 960 / 2, var data = d3.range(120).map(function(i) {
data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; }); return .8 + Math.sin(i / 3 * Math.PI) / 6;
});
var width = 960,
height = 500;
var radius = d3.scale.linear()
.domain([0, 1])
.range([height / 3, height / 2]);
var angle = d3.scale.linear()
.domain([0, data.length])
.range([0, 2 * Math.PI]);
var line = d3.svg.line.radial()
.interpolate("basis-closed")
.radius(radius)
.angle(function(d, i) { return angle(i); });
var area = d3.svg.area.radial()
.interpolate(line.interpolate())
.innerRadius(radius(0))
.outerRadius(line.radius())
.angle(line.angle());
var svg = d3.select("body").append("svg") var svg = d3.select("body").append("svg")
.data([data]) .datum(data)
.attr("width", r * 2) .attr("width", width)
.attr("height", r * 2) .attr("height", height)
.append("g") .append("g")
.attr("transform", "translate(" + r + "," + r + ")"); .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
svg.append("path") svg.append("path")
.attr("class", "area") .attr("class", "area")
.attr("d", d3.svg.area.radial() .attr("d", area);
.innerRadius(r / 2)
.outerRadius(function(d) { return r * d; })
.angle(function(d, i) { return i / 180 * Math.PI; }));
svg.append("path") svg.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", d3.svg.line.radial() .attr("d", line);
.radius(function(d) { return r * d; })
.angle(function(d, i) { return i / 180 * Math.PI; }));
</script> </script>
</body>
</html>
<!DOCTYPE html> <!DOCTYPE html>
<html> <meta charset="utf-8">
<head> <style>
<title>Area Chart</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
body { body {
font: 10px sans-serif; font: 10px sans-serif;
} }
.rule line { .axis path, .axis line {
stroke: #eee; fill: none;
shape-rendering: crispEdges;
}
.rule line.axis {
stroke: #000; stroke: #000;
shape-rendering: crispEdges;
} }
.area { .area {
fill: lightsteelblue; fill: lightsteelblue;
} }
.line, circle.area { .line {
fill: none; fill: none;
stroke: steelblue; stroke: steelblue;
stroke-width: 1.5px; stroke-width: 1.5px;
} }
circle.area { .dot {
fill: #fff; fill: white;
stroke: steelblue;
stroke-width: 1.5px;
} }
</style> </style>
</head> <body>
<body> <script src="../../d3.v2.js"></script>
<script type="text/javascript"> <script>
var data = d3.range(20).map(function(i) { var data = d3.range(40).map(function(i) {
return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2}; return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
}); });
var w = 450, var margin = {top: 10, right: 10, bottom: 20, left: 40},
h = 275, width = 960 - margin.left - margin.right,
p = 20, height = 500 - margin.top - margin.bottom;
x = d3.scale.linear().domain([0, 1]).range([0, w]),
y = d3.scale.linear().domain([0, 1]).range([h, 0]); var x = d3.scale.linear()
.domain([0, 1])
var vis = d3.select("body") .range([0, width]);
.append("svg")
.data([data]) var y = d3.scale.linear()
.attr("width", w + p * 2) .domain([0, 1])
.attr("height", h + p * 2) .range([height, 0]);
var xAxis = d3.svg.axis()
.scale(x)
.orient("bottom");
var yAxis = d3.svg.axis()
.scale(y)
.orient("left");
var line = d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); });
var area = d3.svg.area()
.x(line.x())
.y1(line.y())
.y0(y(0));
var svg = d3.select("body").append("svg")
.datum(data)
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g") .append("g")
.attr("transform", "translate(" + p + "," + p + ")"); .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
var rules = vis.selectAll("g.rule") svg.append("path")
.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("class", "area")
.attr("d", d3.svg.area() .attr("d", area);
.x(function(d) { return x(d.x); })
.y0(h - 1) svg.append("g")
.y1(function(d) { return y(d.y); })); .attr("class", "x axis")
.attr("transform", "translate(0," + height + ")")
.call(xAxis);
svg.append("g")
.attr("class", "y axis")
.call(yAxis);
vis.append("path") svg.append("path")
.attr("class", "line") .attr("class", "line")
.attr("d", d3.svg.line() .attr("d", line);
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); }));
vis.selectAll("circle.area") svg.selectAll(".dot")
.data(data) .data(data.filter(function(d) { return d.y; }))
.enter().append("circle") .enter().append("circle")
.attr("class", "area") .attr("class", "dot")