2010-09-28 22:34:52 +04:00
|
|
|
<html>
|
|
|
|
|
<head>
|
|
|
|
|
<title>Dot Plot</title>
|
Simplify data join. Add insert & empty.
The data join is now specified as a single function of data, as with all other
properties. This allows the key to be computed on the previously-bound data,
rather than requiring the key to be serialized into the DOM (say, as an
attribute). In the case that there is no previously-bound data, it is still
possible to access the associated node as the `this` context.
The `enter` operator no longer performs an append. For symmetry with the `exit`
operator, you must call `append` after obtaining the entering selection. This
requires a tiny bit more code, but should make the code more clear. Also, it
provides an opportunity to use a different instantiation operator, such as the
new `insert` operator. This takes a second argument, which is a selector for the
insert-before reference element. For example, the selector ":first-child" will
prepend nodes.
The `empty` operator allows you to query whether a selection is empty (i.e.,
contains zero matching nodes).
2011-01-31 22:00:35 +03:00
|
|
|
<script type="text/javascript" src="../../d3.js"></script>
|
2010-09-28 22:34:52 +04:00
|
|
|
<style type="text/css">
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
font: 10px sans-serif;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
circle.dot {
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: steelblue;
|
|
|
|
|
stroke-width: 1.5px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
rect {
|
|
|
|
|
fill: none;
|
|
|
|
|
stroke: black;
|
|
|
|
|
shape-rendering: crispEdges;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.rule line {
|
|
|
|
|
stroke: #ccc;
|
|
|
|
|
shape-rendering: crispEdges;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<body>
|
|
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
2010-10-24 07:32:16 +04:00
|
|
|
var data = d3.range(100).map(function(i) {
|
2010-09-28 22:34:52 +04:00
|
|
|
return {x: i / 99, y: Math.random()};
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
var w = 450,
|
|
|
|
|
h = 450,
|
|
|
|
|
p = 20;
|
|
|
|
|
|
|
|
|
|
var vis = d3.select("body")
|
2010-10-02 22:00:31 +04:00
|
|
|
.append("svg:svg")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("width", w + p * 2)
|
|
|
|
|
.attr("height", h + p * 2)
|
2010-10-02 22:00:31 +04:00
|
|
|
.append("svg:g")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("transform", "translate(" + p + "," + p + ")");
|
|
|
|
|
|
|
|
|
|
var rules = vis.selectAll("g.rule")
|
2010-10-24 07:32:16 +04:00
|
|
|
.data(d3.range(11))
|
Simplify data join. Add insert & empty.
The data join is now specified as a single function of data, as with all other
properties. This allows the key to be computed on the previously-bound data,
rather than requiring the key to be serialized into the DOM (say, as an
attribute). In the case that there is no previously-bound data, it is still
possible to access the associated node as the `this` context.
The `enter` operator no longer performs an append. For symmetry with the `exit`
operator, you must call `append` after obtaining the entering selection. This
requires a tiny bit more code, but should make the code more clear. Also, it
provides an opportunity to use a different instantiation operator, such as the
new `insert` operator. This takes a second argument, which is a selector for the
insert-before reference element. For example, the selector ":first-child" will
prepend nodes.
The `empty` operator allows you to query whether a selection is empty (i.e.,
contains zero matching nodes).
2011-01-31 22:00:35 +03:00
|
|
|
.enter().append("svg:g")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("class", "rule");
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:line")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("x1", function(d) { return d / 10 * w; })
|
|
|
|
|
.attr("x2", function(d) { return d / 10 * w; })
|
|
|
|
|
.attr("y1", 0)
|
|
|
|
|
.attr("y2", h);
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:line")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y1", function(d) { return (1 - d / 10) * h; })
|
|
|
|
|
.attr("y2", function(d) { return (1 - d / 10) * h; })
|
|
|
|
|
.attr("x1", 0)
|
|
|
|
|
.attr("x2", w);
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:text")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("x", function(d) { return d / 10 * w; })
|
|
|
|
|
.attr("y", h + 3)
|
|
|
|
|
.attr("dy", ".71em")
|
|
|
|
|
.attr("text-anchor", "middle")
|
|
|
|
|
.text(function(d) { return (d / 10).toFixed(1); });
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
rules.append("svg:text")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("y", function(d) { return (1 - d / 10) * h; })
|
|
|
|
|
.attr("x", -3)
|
|
|
|
|
.attr("dy", ".35em")
|
|
|
|
|
.attr("text-anchor", "end")
|
|
|
|
|
.text(function(d) { return (d / 10).toFixed(1); });
|
|
|
|
|
|
2010-10-02 22:00:31 +04:00
|
|
|
vis.append("svg:rect")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("width", w)
|
|
|
|
|
.attr("height", h);
|
|
|
|
|
|
|
|
|
|
var dots = vis.selectAll("circle.dot")
|
|
|
|
|
.data(data)
|
Simplify data join. Add insert & empty.
The data join is now specified as a single function of data, as with all other
properties. This allows the key to be computed on the previously-bound data,
rather than requiring the key to be serialized into the DOM (say, as an
attribute). In the case that there is no previously-bound data, it is still
possible to access the associated node as the `this` context.
The `enter` operator no longer performs an append. For symmetry with the `exit`
operator, you must call `append` after obtaining the entering selection. This
requires a tiny bit more code, but should make the code more clear. Also, it
provides an opportunity to use a different instantiation operator, such as the
new `insert` operator. This takes a second argument, which is a selector for the
insert-before reference element. For example, the selector ":first-child" will
prepend nodes.
The `empty` operator allows you to query whether a selection is empty (i.e.,
contains zero matching nodes).
2011-01-31 22:00:35 +03:00
|
|
|
.enter().append("svg:circle")
|
2010-09-28 22:34:52 +04:00
|
|
|
.attr("class", "dot")
|
|
|
|
|
.attr("cx", function(d) { return d.x * w; })
|
|
|
|
|
.attr("cy", function(d) { return d.y * h; })
|
|
|
|
|
.attr("r", 27)
|
2010-10-24 07:46:17 +04:00
|
|
|
.attr("opacity", 1e-6)
|
2010-09-28 22:34:52 +04:00
|
|
|
.transition()
|
2010-10-24 07:46:17 +04:00
|
|
|
.delay(function(d, i) { return i * 3; })
|
2010-09-28 22:34:52 +04:00
|
|
|
.duration(750)
|
2010-10-24 07:46:17 +04:00
|
|
|
.attr("opacity", 1)
|
2010-10-24 07:32:16 +04:00
|
|
|
.attr("r", 4.5);
|
2010-09-28 22:34:52 +04:00
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|