Skip to content

GitLab

D
d3-library
Commit 3adff5ab authored by Mike Bostock's avatar Mike Bostock
Browse files
Options

Bring area & line examples up-to-date. 

Related #565.
parent 09fdab53
Hide whitespace changes
Inline Side-by-side
Showing with 549 additions and 464 deletions
examples/area-defined/area-radial.html deleted 100644 → 0
View file @ 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>
examples/area-defined/area.html deleted 100644 → 0
View file @ 09fdab53
<!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>
examples/area/area-defined.html 0 → 100644
View file @ 3adff5ab
<!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>
examples/area/area-radial-defined.html 0 → 100644
View file @ 3adff5ab
<!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>
examples/area/area-radial.html
View file @ 3adff5ab
<!DOCTYPE html>
<html>
<head>
<title>Area Chart (Radial)</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
<meta charset="utf-8">
<style>
.area {
fill: lightsteelblue;
......@@ -15,34 +12,50 @@
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
</style>
<body>
<script src="../../d3.v2.js"></script>
<script>
var r = 960 / 2,
data = d3.range(361).map(function(i) { return .8 + Math.sin(i / 20 * Math.PI) / 6; });
var data = d3.range(120).map(function(i) {
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")
.data([data])
.attr("width", r * 2)
.attr("height", r * 2)
.datum(data)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + r + "," + r + ")");
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");
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; }));
.attr("d", area);
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; }));
.attr("d", line);
</script>
</body>
</html>
</script>
examples/area/area.html
View file @ 3adff5ab
<!DOCTYPE html>
<html>
<head>
<title>Area Chart</title>
<script type="text/javascript" src="../../d3.v2.js"></script>
<style type="text/css">
<meta charset="utf-8">
<style>
body {
font: 10px sans-serif;
}
.rule line {
stroke: #eee;
shape-rendering: crispEdges;
}
.rule line.axis {
.axis path, .axis line {
fill: none;
stroke: #000;
shape-rendering: crispEdges;
}
.area {
fill: lightsteelblue;
}
.line, circle.area {
.line {
fill: none;
stroke: steelblue;
stroke-width: 1.5px;
}
circle.area {
fill: #fff;
.dot {
fill: white;
stroke: steelblue;
stroke-width: 1.5px;
}
</style>
</head>
<body>
<script type="text/javascript">
</style>
<body>
<script src="../../d3.v2.js"></script>
<script>
var data = d3.range(20).map(function(i) {
return {x: i / 19, y: (Math.sin(i / 3) + 1) / 2};
var data = d3.range(40).map(function(i) {
return {x: i / 39, y: (Math.sin(i / 3) + 2) / 4};
});
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)
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()
.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")
.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("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("path")
.attr("class", "area")
.attr("d", d3.svg.area()
.x(function(d) { return x(d.x); })
.y0(h - 1)
.y1(function(d) { return y(d.y); }));
.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);
vis.append("path")
svg.append("path")
.attr("class", "line")
.attr("d", d3.svg.line()
.x(function(d) { return x(d.x); })
.y(function(d) { return y(d.y); }));
.attr("d", line);
vis.selectAll("circle.area")
.data(data)
svg.selectAll(".dot")
.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("class", "dot")
.attr("cx", line.x())
.attr("cy", line.y())
.attr("r", 3.5);
</script>
</body>
</html>
</script>
examples/line-defined/line.css deleted 100644 → 0
View file @ 09fdab53
body {
font: 10px sans-serif;
}
.rule line {
stroke: #eee;
shape-rendering: crispEdges;
}
.rule line.axis {