Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

Rename shapeAngle, shapeRadius and shapeSize.

These properties replace angle, radius and size, respectively, for dots. The new
names avoid collision with forthcoming support for polar coordinates. The use of
the "shape" prefix is consistent with other mark-specific properties, such as
textAngle and textStyle.
  • Loading branch information...
commit 9888653484b92cca2b2c6a46730d5ca461518055 1 parent e90698e
@mbostock authored
Showing with 82 additions and 73 deletions.
  1. +2 −2 examples/antibiotics/antibiotics.html
  2. +1 −1  examples/barley/barley.html
  3. +2 −2 examples/eyes/eyes.html
  4. +1 −1  examples/eyes/matrix.html
  5. +2 −2 examples/flowers/flowers.html
  6. +2 −2 examples/tipsy/tipsy.js
  7. +1 −1  src/layout/Bullet.js
  8. +1 −1  src/layout/Pack.js
  9. +1 −1  src/layout/Rollup.js
  10. +32 −23 src/mark/Dot.js
  11. +1 −1  src/mark/Mark.js
  12. +4 −4 src/scene/SvgDot.js
  13. +1 −1  tests/behavior/drag-events.html
  14. +1 −1  tests/behavior/drag.html
  15. +1 −1  tests/data/histogram-discrete.html
  16. +1 −1  tests/layout/arc-radial.html
  17. +1 −1  tests/layout/arc.html
  18. +1 −1  tests/layout/cluster-radial-radius.html
  19. +1 −1  tests/layout/cluster-radial2.html
  20. +1 −1  tests/layout/cluster2.html
  21. +1 −1  tests/layout/force-toggle.html
  22. +1 −1  tests/layout/force.html
  23. +1 −1  tests/layout/force3.html
  24. +1 −1  tests/layout/indent2.html
  25. +1 −1  tests/layout/partition-radial-radius.html
  26. +1 −1  tests/layout/partition-radial2.html
  27. +1 −1  tests/layout/partition2.html
  28. +1 −1  tests/layout/tree-radial2.html
  29. +1 −1  tests/layout/tree-toggle.html
  30. +1 −1  tests/layout/tree2.html
  31. +1 −1  tests/mark/area-anchor.html
  32. +1 −1  tests/mark/bar-anchor.html
  33. +1 −1  tests/mark/dot-anchor.html
  34. +1 −1  tests/mark/dot-radius.html
  35. +2 −2 tests/mark/dot-stroke.html
  36. +1 −1  tests/mark/dot2.html
  37. +1 −1  tests/mark/line-anchor.html
  38. +3 −3 tests/mark/panel-fill.html
  39. +1 −1  tests/mark/panel-transform.html
  40. +1 −1  tests/physics/dorling.html
  41. +1 −1  tests/physics/simulation.html
View
4 examples/antibiotics/antibiotics.html
@@ -88,7 +88,7 @@
.fillStyle(null)
.strokeStyle("#eee")
.lineWidth(1)
- .size(function(i) Math.pow(radius(Math.pow(10, i)), 2))
+ .shapeSize(function(i) Math.pow(radius(Math.pow(10, i)), 2))
.anchor("top").add(pv.Label)
.visible(function(i) i < 3)
.textBaseline("middle")
@@ -127,7 +127,7 @@
.bottom(function() -60 + this.index * 18)
.fillStyle(function(d) gramColor[d])
.strokeStyle(null)
- .size(30)
+ .shapeSize(30)
.anchor("right").add(pv.Label)
.textMargin(6)
.textAlign("left")
View
2  examples/barley/barley.html
@@ -67,7 +67,7 @@
.data(function(year) year.values)
.left(function(d) x(d.yield))
.top(function() this.index * 11)
- .size(10)
+ .shapeSize(10)
.lineWidth(2)
.strokeStyle(function(d) c(d.year));
View
4 examples/eyes/eyes.html
@@ -36,13 +36,13 @@
.add(pv.Dot)
.fillStyle("#fff")
.strokeStyle(null)
- .radius(function(d) d.r)
+ .shapeRadius(function(d) d.r)
.add(pv.Dot)
.def("v", function(d) this.mouse().norm().times(d.r / 2))
.fillStyle("#aaa")
.left(function(d) this.v().x)
.top(function(d) this.v().y)
- .radius(function(d) d.r / 2);
+ .shapeRadius(function(d) d.r / 2);
vis.render();
View
2  examples/eyes/matrix.html
@@ -33,7 +33,7 @@
.add(pv.Dot)
.fillStyle("#fff")
.strokeStyle(null)
- .size(function() this.mouse().length());
+ .shapeSize(function() this.mouse().length());
vis.render();
View
4 examples/flowers/flowers.html
@@ -82,7 +82,7 @@
.data(flowers)
.left(function(d, t) position[t.x](d[t.x]))
.bottom(function(d, t) position[t.y](d[t.y]))
- .size(8)
+ .shapeSize(8)
.strokeStyle(null)
.fillStyle(function(d) color(d.species));
@@ -97,7 +97,7 @@
.data(species)
.bottom(5)
.left(function() 15 + this.index * 65)
- .size(8)
+ .shapeSize(8)
.strokeStyle(null)
.fillStyle(color)
.anchor("right").add(pv.Label);
View
4 examples/tipsy/tipsy.js
@@ -44,8 +44,8 @@ pv.Behavior.tipsy = function(opts) {
if (this.properties.width) {
tip.style.width = Math.ceil(this.width() * t.k) + 1 + "px";
tip.style.height = Math.ceil(this.height() * t.k) + 1 + "px";
- } else if (this.properties.radius) {
- var r = this.radius();
+ } else if (this.properties.shapeRadius) {
+ var r = this.shapeRadius();
t.x -= r;
t.y -= r;
tip.style.height = tip.style.width = Math.ceil(2 * r * t.k) + "px";
View
2  src/layout/Bullet.js
@@ -87,7 +87,7 @@ pv.Layout.Bullet = function() {
.bottom(function(d) { return orient == "bottom" ? scale(d) : null; })
.strokeStyle("black")
.shape("bar")
- .angle(function() { return horizontal ? 0 : Math.PI / 2; })
+ .shapeAngle(function() { return horizontal ? 0 : Math.PI / 2; })
.parent = that;
(this.tick = new pv.Mark())
View
2  src/layout/Pack.js
@@ -38,7 +38,7 @@ pv.Layout.Pack = function() {
pv.Layout.Hierarchy.call(this);
this.node
- .radius(function(n) { return n.radius; })
+ .shapeRadius(function(n) { return n.radius; })
.strokeStyle("rgb(31, 119, 180)")
.fillStyle("rgba(31, 119, 180, .25)");
View
2  src/layout/Rollup.js
@@ -70,7 +70,7 @@ pv.Layout.Rollup = function() {
/* Render rollup nodes. */
this.node
.data(function() { return nodes; })
- .size(function(d) { return d.nodes.length * 20; });
+ .shapeSize(function(d) { return d.nodes.length * 20; });
/* Render rollup links. */
this.link
View
55 src/mark/Dot.js
@@ -19,10 +19,10 @@ pv.Dot = function() {
};
pv.Dot.prototype = pv.extend(pv.Mark)
- .property("size", Number)
- .property("radius", Number)
.property("shape", String)
- .property("angle", Number)
+ .property("shapeAngle", Number)
+ .property("shapeRadius", Number)
+ .property("shapeSize", Number)
.property("lineWidth", Number)
.property("strokeStyle", pv.color)
.property("fillStyle", pv.color);
@@ -30,22 +30,23 @@ pv.Dot.prototype = pv.extend(pv.Mark)
pv.Dot.prototype.type = "dot";
/**
- * The size of the dot, in square pixels. Square pixels are used such that the
- * area of the dot is linearly proportional to the value of the size property,
- * facilitating representative encodings.
+ * The size of the shape, in square pixels. Square pixels are used such that the
+ * area of the shape is linearly proportional to the value of the
+ * <tt>shapeSize</tt> property, facilitating representative encodings. This is
+ * an alternative to using {@link #shapeRadius}.
*
- * @see #radius
+ * @see #shapeRadius
* @type number
- * @name pv.Dot.prototype.size
+ * @name pv.Dot.prototype.shapeSize
*/
/**
- * The radius of the dot, in pixels. This is an alternative to using
- * {@link #size}.
+ * The radius of the shape, in pixels. This is an alternative to using
+ * {@link #shapeSize}.
*
- * @see #size
+ * @see #shapeSize
* @type number
- * @name pv.Dot.prototype.radius
+ * @name pv.Dot.prototype.shapeRadius
*/
/**
@@ -74,11 +75,11 @@ pv.Dot.prototype.type = "dot";
*/
/**
- * The rotation angle, in radians. Used to rotate shapes, such as to turn a
- * cross into a plus.
+ * The shape rotation angle, in radians. Used to rotate shapes, such as to turn
+ * a cross into a plus.
*
* @type number
- * @name pv.Dot.prototype.angle
+ * @name pv.Dot.prototype.shapeAngle
*/
/**
@@ -111,13 +112,12 @@ pv.Dot.prototype.type = "dot";
/**
* Default properties for dots. By default, there is no fill and the stroke
- * style is a categorical color. The default shape is "circle" with size 20.
+ * style is a categorical color. The default shape is "circle" with radius 4.5.
*
* @type pv.Dot
*/
pv.Dot.prototype.defaults = new pv.Dot()
.extend(pv.Mark.prototype.defaults)
- .size(20)
.shape("circle")
.lineWidth(1.5)
.strokeStyle(pv.Colors.category10().by(pv.parent));
@@ -155,11 +155,11 @@ pv.Dot.prototype.anchor = function(name) {
case "center": return s.left;
case "left": return null;
}
- return s.left + s.radius;
+ return s.left + s.shapeRadius;
})
.right(function() {
var s = this.scene.target[this.index];
- return this.name() == "left" ? s.right + s.radius : null;
+ return this.name() == "left" ? s.right + s.shapeRadius : null;
})
.top(function() {
var s = this.scene.target[this.index];
@@ -169,11 +169,11 @@ pv.Dot.prototype.anchor = function(name) {
case "center": return s.top;
case "top": return null;
}
- return s.top + s.radius;
+ return s.top + s.shapeRadius;
})
.bottom(function() {
var s = this.scene.target[this.index];
- return this.name() == "top" ? s.bottom + s.radius : null;
+ return this.name() == "top" ? s.bottom + s.shapeRadius : null;
})
.textAlign(function() {
switch (this.name()) {
@@ -197,7 +197,16 @@ pv.Dot.prototype.anchor = function(name) {
/** @private Sets radius based on size or vice versa. */
pv.Dot.prototype.buildImplied = function(s) {
- if (s.radius == null) s.radius = Math.sqrt(s.size);
- else if (s.size == null) s.size = s.radius * s.radius;
+ var r = s.shapeRadius, z = s.shapeSize;
+ if (r == null) {
+ if (z == null) {
+ s.shapeSize = 20.25;
+ s.shapeRadius = 4.5;
+ } else {
+ s.shapeRadius = Math.sqrt(z);
+ }
+ } else if (z == null) {
+ s.shapeSize = r * r;
+ }
pv.Mark.prototype.buildImplied.call(this, s);
};
View
2  src/mark/Mark.js
@@ -276,7 +276,7 @@ pv.Mark.prototype.index = -1;
* scale can be used to create scale-independent graphics. For example, to
* define a dot that has a radius of 10 irrespective of any zooming, say:
*
- * <pre>dot.radius(function() 10 / this.scale)</pre>
+ * <pre>dot.shapeRadius(function() 10 / this.scale)</pre>
*
* Note that the stroke width and font size are defined irrespective of scale
* (i.e., in screen space) already. Also note that when a transform is applied
View
8 src/scene/SvgDot.js
@@ -9,7 +9,7 @@ pv.SvgScene.dot = function(scenes) {
if (!fill.opacity && !stroke.opacity) continue;
/* points */
- var radius = s.radius, path = null;
+ var radius = s.shapeRadius, path = null;
switch (s.shape) {
case "cross": {
path = "M" + -radius + "," + -radius
@@ -44,11 +44,11 @@ pv.SvgScene.dot = function(scenes) {
break;
}
case "tick": {
- path = "M0,0L0," + -s.size;
+ path = "M0,0L0," + -s.shapeSize;
break;
}
case "bar": {
- path = "M0," + (s.size / 2) + "L0," + -(s.size / 2);
+ path = "M0," + (s.shapeSize / 2) + "L0," + -(s.shapeSize / 2);
break;
}
}
@@ -66,7 +66,7 @@ pv.SvgScene.dot = function(scenes) {
};
if (path) {
svg.transform = "translate(" + s.left + "," + s.top + ")";
- if (s.angle) svg.transform += " rotate(" + 180 * s.angle / Math.PI + ")";
+ if (s.angle) svg.transform += " rotate(" + 180 * s.shapeAngle / Math.PI + ")";
svg.d = path;
e = this.expect(e, "path", svg);
} else {
View
2  tests/behavior/drag-events.html
@@ -20,7 +20,7 @@
.data([{x:100, y:100}])
.left(function(d) d.x)
.top(function(d) d.y)
- .radius(10)
+ .shapeRadius(10)
.fillStyle("#aec7e8")
.cursor("move")
.event("mousedown", pv.Behavior.drag())
View
2  tests/behavior/drag.html
@@ -20,7 +20,7 @@
.data([{x:200, y:200}])
.left(function(d) d.x)
.top(function(d) d.y)
- .radius(10)
+ .shapeRadius(10)
.fillStyle(function(d) d.fix ? "#ff7f0e" : "#aec7e8")
.cursor("move")
.event("mousedown", pv.Behavior.drag());
View
2  tests/data/histogram-discrete.html
@@ -27,7 +27,7 @@
.left(function(d) x(d.x))
.add(pv.Dot)
.data(function(d) d.sort())
- .radius(5)
+ .shapeRadius(5)
.bottom(function(d) this.index * 11.5 + 6.5)
.fillStyle(pv.ramp("brown", "steelblue").by(function(d, b) (d - b.x) / b.dx))
.strokeStyle(function() this.fillStyle().darker());
View
2  tests/layout/arc-radial.html
@@ -23,7 +23,7 @@
layout.link.add(pv.Line);
layout.node.add(pv.Dot)
- .size(function(d) d.linkDegree + 4)
+ .shapeSize(function(d) d.linkDegree + 4)
.fillStyle(pv.Colors.category19().by(function(d) d.group))
.strokeStyle(function() this.fillStyle().darker());
View
2  tests/layout/arc.html
@@ -20,7 +20,7 @@
layout.link.add(pv.Line);
layout.node.add(pv.Dot)
- .size(function(d) d.linkDegree + 4)
+ .shapeSize(function(d) d.linkDegree + 4)
.fillStyle(pv.Colors.category19().by(function(d) d.group))
.strokeStyle(function() this.fillStyle().darker());
View
2  tests/layout/cluster-radial-radius.html
@@ -20,7 +20,7 @@
.orient("radial");
layout.link.add(pv.Line);
-layout.node.add(pv.Dot).radius(3);
+layout.node.add(pv.Dot).shapeRadius(3);
layout.label.add(pv.Label).textMargin(5);
vis.render();
View
2  tests/layout/cluster-radial2.html
@@ -20,7 +20,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/cluster2.html
@@ -19,7 +19,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/force-toggle.html
@@ -33,7 +33,7 @@
layout.node.add(pv.Dot)
.title(function(n) n.nodeName)
- .size(function(n) (n.nodeValue / 100) || 10)
+ .shapeSize(function(n) (n.nodeValue / 100) || 10)
.fillStyle(function(n) n.toggled ? "#1f77b4" : n.firstChild ? "#aec7e8" : "#ff7f0e")
.event("mousedown", pv.Behavior.drag())
.event("drag", layout)
View
2  tests/layout/force.html
@@ -31,7 +31,7 @@
layout.link.add(pv.Line);
layout.node.add(pv.Dot)
- .size(function(d) (d.linkDegree + 4) * Math.pow(this.scale, -1.5))
+ .shapeSize(function(d) (d.linkDegree + 4) * Math.pow(this.scale, -1.5))
.fillStyle(function(d) d.fix ? "brown" : color(d))
.strokeStyle(function() this.fillStyle().darker())
.title(function(d) d.nodeName)
View
2  tests/layout/force3.html
@@ -29,7 +29,7 @@
layout.node.add(pv.Dot)
.title(function(d) d.nodeName)
- .size(function(d) (d.nodeValue / 100) || 10)
+ .shapeSize(function(d) (d.nodeValue / 100) || 10)
.fillStyle(function(d) d.fix ? "orange" : (d.firstChild ? "steelblue" : "white"))
.event("mousedown", pv.Behavior.drag())
.event("drag", layout);
View
2  tests/layout/indent2.html
@@ -20,7 +20,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/partition-radial-radius.html
@@ -19,7 +19,7 @@
.orient("radial");
layout.link.add(pv.Line);
-layout.node.add(pv.Dot).radius(3);
+layout.node.add(pv.Dot).shapeRadius(3);
layout.label.add(pv.Label).textMargin(5);
vis.render();
View
2  tests/layout/partition-radial2.html
@@ -20,7 +20,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/partition2.html
@@ -19,7 +19,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/tree-radial2.html
@@ -21,7 +21,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/layout/tree-toggle.html
@@ -24,7 +24,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle("#aaa")
.fillStyle(function(d) d.toggled ? "#aaa" : "#ddd")
.event("click", function(d) (d.toggle(), layout.reset().parent));
View
2  tests/layout/tree2.html
@@ -22,7 +22,7 @@
.strokeStyle("#aaa");
layout.node.add(pv.Dot)
- .size(100)
+ .shapeSize(100)
.strokeStyle(function(d) d.active ? "#f00" : "#aaa")
.fillStyle(function(d) d.active ? "#fdd" : "#ddd")
.event("mouseover", function(d) (d.active = true, this))
View
2  tests/mark/area-anchor.html
@@ -29,7 +29,7 @@
.height(function(d) y(d.y));
area.anchor(function(d, p) p).add(pv.Dot)
- .size(6)
+ .shapeSize(6)
.strokeStyle("black")
.fillStyle("white");
View
2  tests/mark/bar-anchor.html
@@ -30,7 +30,7 @@
.width(x.range().band);
bar.anchor(function(d, p) p).add(pv.Dot)
- .size(6)
+ .shapeSize(6)
.strokeStyle("black")
.fillStyle("white");
View
2  tests/mark/dot-anchor.html
@@ -18,7 +18,7 @@
var dot = vis.add(pv.Dot)
.top(w / 2)
.left(w / 2)
- .radius(w >> 2);
+ .shapeRadius(w >> 2);
dot.anchor("top").add(pv.Label).text("top");
dot.anchor("left").add(pv.Label).text("left");
View
2  tests/mark/dot-radius.html
@@ -13,7 +13,7 @@
vis.add(pv.Dot)
.def("left", 100)
.def("top", 100)
- .def("radius", 90);
+ .def("shapeRadius", 90);
vis.render();
View
4 tests/mark/dot-stroke.html
@@ -14,8 +14,8 @@
.bottom(100);
vis.anchor("top").add(pv.Dot)
- .size(3000)
.shape("circle")
+ .shapeSize(3000)
.fillStyle("lightcoral")
.strokeStyle("hsla(240,50%,50%,.5)")
.lineWidth(10)
@@ -24,8 +24,8 @@
.text("DO NOT PUSH");
vis.anchor("bottom").add(pv.Dot)
- .size(1000)
.shape("square")
+ .shapeSize(1000)
.fillStyle("lightcoral")
.strokeStyle("hsla(240,50%,50%,.5)")
.lineWidth(10)
View
2  tests/mark/dot2.html
@@ -51,7 +51,7 @@
.bottom(function(d) y(d.y))
.strokeStyle(function(d) c(d.z))
.fillStyle(function() this.strokeStyle().alpha(.2))
- .size(function(d) d.z)
+ .shapeSize(function(d) d.z)
.title(function(d) d.z);
vis.render();
View
2  tests/mark/line-anchor.html
@@ -28,7 +28,7 @@
.bottom(function(d) y(d.y));
line.add(pv.Dot)
- .size(6)
+ .shapeSize(6)
.strokeStyle("black")
.fillStyle("white");
View
6 tests/mark/panel-fill.html
@@ -15,7 +15,7 @@
.right(100);
vis.anchor("top").add(pv.Dot)
- .size(1000)
+ .shapeSize(1000)
.fillStyle("#ccc")
.strokeStyle(null)
.anchor("center").add(pv.Label)
@@ -27,7 +27,7 @@
.lineWidth(20);
panel.anchor("bottom").add(pv.Dot)
- .size(1000)
+ .shapeSize(1000)
.fillStyle("#ccc")
.strokeStyle(null)
.anchor("center").add(pv.Label)
@@ -37,7 +37,7 @@
.text("This is a red panel with a translucent blue border.");
vis.anchor("right").add(pv.Dot)
- .size(1000)
+ .shapeSize(1000)
.fillStyle("#ccc")
.strokeStyle(null)
.anchor("center").add(pv.Label)
View
2  tests/mark/panel-transform.html
@@ -44,7 +44,7 @@
.left(function(d) d.x * w)
.top(function(d) d.y * h)
.fillStyle(pv.rgb(255, 255, 255, .5))
- .radius(function() 5 / this.scale);
+ .shapeRadius(function() 5 / this.scale);
/* Hack! Need a way get the transform as it is set. */
view.transform = function() {
View
2  tests/physics/dorling.html
@@ -54,7 +54,7 @@
.data(nodes)
.left(function(d) d.x)
.top(function(d) d.y)
- .radius(function(d) d.r)
+ .shapeRadius(function(d) d.r)
.fillStyle(pv.color("steelblue").alpha(.8))
.strokeStyle("black");
View
2  tests/physics/simulation.html
@@ -35,7 +35,7 @@
.data(nodes)
.left(function(d) d.x)
.top(function(d) d.y)
- .radius(function(d) d.r)
+ .shapeRadius(function(d) d.r)
.strokeStyle(pv.ramp("steelblue", "brown").by(function(d) d.vx * d.vx + d.vy * d.vy));
vis.add(pv.Panel)
Please sign in to comment.
Something went wrong with that request. Please try again.