From 953dd74db0894613fe439d100767d09372d12733 Mon Sep 17 00:00:00 2001 From: Heman Robinson Date: Sun, 28 Mar 2021 11:23:49 -0400 Subject: [PATCH 1/7] preattentive symbols Symbols with preattentive features aid pattern detection and reduce overlap. This symbol set implements ideas of Cleveland, Wilkinson, and others, and has been tested for popularity and discriminability, and adjusted for approximately equal weight. Many products support up to a dozen different symbol sets. This is analogous to multiple color schemes, such as Dr. Cindy Brewer's recently supported in d3. Not knowing d3's plans for symbol sets, I've only made a bare attempt at integrating these, but would be happy to continue this work along whatever lines are appropriate. --- .gitignore | 5 +++++ src/pSymbol/asterisk.js | 18 ++++++++++++++++++ src/pSymbol/circle.js | 8 ++++++++ src/pSymbol/diamond.js | 20 ++++++++++++++++++++ src/pSymbol/pSymbol.js | 31 +++++++++++++++++++++++++++++++ src/pSymbol/plus.js | 13 +++++++++++++ src/pSymbol/square.js | 12 ++++++++++++ src/pSymbol/triangle.js | 13 +++++++++++++ src/pSymbol/x.js | 14 ++++++++++++++ 9 files changed, 134 insertions(+) create mode 100644 src/pSymbol/asterisk.js create mode 100644 src/pSymbol/circle.js create mode 100644 src/pSymbol/diamond.js create mode 100644 src/pSymbol/pSymbol.js create mode 100644 src/pSymbol/plus.js create mode 100644 src/pSymbol/square.js create mode 100644 src/pSymbol/triangle.js create mode 100644 src/pSymbol/x.js diff --git a/.gitignore b/.gitignore index 8abcf6a..f6a57e0 100644 --- a/.gitignore +++ b/.gitignore @@ -3,3 +3,8 @@ dist/ node_modules npm-debug.log +d3-shape.xcodeproj/xcuserdata/hemanrobinson.xcuserdatad/xcschemes/xcschememanagement.plist +d3-shape.xcodeproj/project.xcworkspace/xcuserdata/hemanrobinson.xcuserdatad/UserInterfaceState.xcuserstate +d3-shape.xcodeproj/project.xcworkspace/xcshareddata/IDEWorkspaceChecks.plist +d3-shape.xcodeproj/project.xcworkspace/contents.xcworkspacedata +d3-shape.xcodeproj/project.pbxproj diff --git a/src/pSymbol/asterisk.js b/src/pSymbol/asterisk.js new file mode 100644 index 0000000..b398ce6 --- /dev/null +++ b/src/pSymbol/asterisk.js @@ -0,0 +1,18 @@ +/* Asterisk */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = Math.max( 1.5, r * Math.PI / 3 + 0.5 ); // +0.5 accounts for overlap. + let t = s * Math.sin( Math.PI / 6 ), + u = s * Math.cos( Math.PI / 6 ); + g.moveTo( 0, s ); + g.lineTo( 0, -s ); + g.closePath(); + g.moveTo( -u, -t ); + g.lineTo( u, t ); + g.closePath(); + g.moveTo( -u, t ); + g.lineTo( u, -t ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/circle.js b/src/pSymbol/circle.js new file mode 100644 index 0000000..13883d2 --- /dev/null +++ b/src/pSymbol/circle.js @@ -0,0 +1,8 @@ +/* Circle */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let s = Math.sqrt( size / Math.PI ); // radius + g.arc( 0, 0, s, 0, 2 * Math.PI ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/diamond.js b/src/pSymbol/diamond.js new file mode 100644 index 0000000..2b9266b --- /dev/null +++ b/src/pSymbol/diamond.js @@ -0,0 +1,20 @@ +/* Diamond */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = r * Math.PI / ( 2 * Math.SQRT2 ) + 0.5; // +0.5 accounts for overlap. + let t = 1 / ( 2 * Math.SQRT2 ); // t accounts for line width. + g.moveTo( -t, - s - t ); + g.lineTo( s + t, t ); + g.closePath(); + g.moveTo( s + t, -t ); + g.lineTo( -t, s + t ); + g.closePath(); + g.moveTo( t, s + t ); + g.lineTo( - s - t, -t ); + g.closePath(); + g.moveTo( - s - t, t ); + g.lineTo( t, - s - t ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/pSymbol.js b/src/pSymbol/pSymbol.js new file mode 100644 index 0000000..7824161 --- /dev/null +++ b/src/pSymbol/pSymbol.js @@ -0,0 +1,31 @@ +/** + * Popular symbols with preattentive features. + * + * Preattentive features aid pattern detection and reduce overlap. + * These symbols are adjusted to have approximately equal weight. + * + * Symbols are centered at (0,0). When translating, + * round to the center of the pixel to minimize anti-aliasing, e.g. + * .attr( "transform", "translate( " + ( Math.floor( x ) + 0.5 ) + ", " + ( Math.floor( y ) + 0.5 ) + " )" ) + */ +import circle from "./pSymbol/circle.js"; +import plus from "./pSymbol/plus.js"; +import x from "./pSymbol/x.js"; +import triangle from "./pSymbol/triangle.js"; +import asterisk from "./pSymbol/asterisk.js"; +import square from "./pSymbol/square.js"; +import diamond from "./pSymbol/diamond.js"; +export var pSymbols = [ + circle, + plus, + x, + triangle, + asterisk, + square, + diamond +]; + +/** + * Symbol sets. + */ +export var symbolSets = [ "geometric": symbols, "preattentive": pSymbols ]; diff --git a/src/pSymbol/plus.js b/src/pSymbol/plus.js new file mode 100644 index 0000000..651f28b --- /dev/null +++ b/src/pSymbol/plus.js @@ -0,0 +1,13 @@ +/* Plus */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = Math.max( 1.5, r * Math.PI / 2 - 0.25 ); // -0.25 accounts for center pixel. + g.moveTo( -s, 0 ); + g.lineTo( s, 0 ); + g.closePath(); + g.moveTo( 0, s ); + g.lineTo( 0, -s ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/square.js b/src/pSymbol/square.js new file mode 100644 index 0000000..cd0295d --- /dev/null +++ b/src/pSymbol/square.js @@ -0,0 +1,12 @@ +/* Square */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = r * Math.PI / 4 + 0.25; // +0.25 accounts for overlap. + g.moveTo( s, s ); + g.lineTo( s, -s ); + g.lineTo( -s, -s ); + g.lineTo( -s, s ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/triangle.js b/src/pSymbol/triangle.js new file mode 100644 index 0000000..19edb36 --- /dev/null +++ b/src/pSymbol/triangle.js @@ -0,0 +1,13 @@ +/* Triangle */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = r * Math.PI / 3 + 0.5; // +0.5 accounts for overlap. + let t = s * Math.sin( Math.PI / 6 ), + u = s * Math.cos( Math.PI / 6 ); + g.moveTo( 0, -s ); + g.lineTo( u, t ); + g.lineTo( -u, t ); + g.closePath(); + }} +}; diff --git a/src/pSymbol/x.js b/src/pSymbol/x.js new file mode 100644 index 0000000..e0816b3 --- /dev/null +++ b/src/pSymbol/x.js @@ -0,0 +1,14 @@ +/* X */ +export default { + draw: function( g, size ) { if( size > 0 ) { + let r = Math.sqrt( size / Math.PI ); // radius + let s = r * Math.PI / 2 + 0.25; // +0.25 accounts for center pixel and line width. + let t = Math.max( 1, s / Math.SQRT2 ); + g.moveTo( -t, -t ); + g.lineTo( t, t ); + g.closePath(); + g.moveTo( -t, t ); + g.lineTo( t, -t ); + g.closePath(); + }} +}; From 498897259be4e508166dd7ca3d1e5c027af39a48 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Thu, 6 Jan 2022 11:32:13 -0800 Subject: [PATCH 2/7] export new symbols --- src/index.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/index.js b/src/index.js index 99af57f..9f02306 100644 --- a/src/index.js +++ b/src/index.js @@ -8,13 +8,19 @@ export {default as pointRadial} from "./pointRadial.js"; export {linkHorizontal, linkVertical, linkRadial} from "./link/index.js"; export {default as symbol, symbolsStroke, symbolsFill, symbolsFill as symbols} from "./symbol.js"; +export {default as symbolAsterisk} from "./symbol/asterisk.js"; export {default as symbolCircle} from "./symbol/circle.js"; export {default as symbolCross} from "./symbol/cross.js"; export {default as symbolDiamond} from "./symbol/diamond.js"; +export {default as symbolDiamond2} from "./symbol/diamond2.js"; +export {default as symbolPlus} from "./symbol/plus.js"; export {default as symbolSquare} from "./symbol/square.js"; +export {default as symbolSquare2} from "./symbol/square2.js"; export {default as symbolStar} from "./symbol/star.js"; export {default as symbolTriangle} from "./symbol/triangle.js"; +export {default as symbolTriangle2} from "./symbol/triangle2.js"; export {default as symbolWye} from "./symbol/wye.js"; +export {default as symbolX} from "./symbol/x.js"; export {default as curveBasisClosed} from "./curve/basisClosed.js"; export {default as curveBasisOpen} from "./curve/basisOpen.js"; From c2c6e6185ab41ad038399694a97ad2f0f45f80d5 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Thu, 6 Jan 2022 17:07:12 -0800 Subject: [PATCH 3/7] add tests for new symbols --- src/symbol.js | 2 +- test/symbol-test.js | 38 +++++++++++++++++++++++++++++++++++++- test/symbols-test.js | 22 +++++++++++++++++++--- 3 files changed, 57 insertions(+), 5 deletions(-) diff --git a/src/symbol.js b/src/symbol.js index 3b0fc5d..2882cc0 100644 --- a/src/symbol.js +++ b/src/symbol.js @@ -10,7 +10,7 @@ import square from "./symbol/square.js"; import square2 from "./symbol/square2.js"; import star from "./symbol/star.js"; import triangle from "./symbol/triangle.js"; -import triangle2 from "./symbol/triangle.js"; +import triangle2 from "./symbol/triangle2.js"; import wye from "./symbol/wye.js"; import x from "./symbol/x.js"; diff --git a/test/symbol-test.js b/test/symbol-test.js index ba5deea..9c908c7 100644 --- a/test/symbol-test.js +++ b/test/symbol-test.js @@ -1,5 +1,5 @@ import assert from "assert"; -import {symbol, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "../src/index.js"; +import {symbol, symbolAsterisk, symbolCircle, symbolCross, symbolDiamond, symbolDiamond2, symbolPlus, symbolSquare, symbolSquare2, symbolStar, symbolTriangle, symbolTriangle2, symbolWye, symbolX} from "../src/index.js"; import {assertInDelta, assertPathEqual} from "./asserts.js"; import {polygonContext} from "./polygonContext.js"; @@ -44,6 +44,12 @@ it("symbol.size(size) observes the specified size constant", () => { assertPathEqual(s.size(4 * Math.PI)(), "M2,0A2,2,0,1,1,-2,0A2,2,0,1,1,2,0"); }); +it("symbol.type(symbolAsterisk) generates the expected path", () => { + const s = symbol().type(symbolAsterisk).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M0,2.705108L0,-2.705108M-2.342692,-1.352554L2.342692,1.352554M-2.342692,1.352554L2.342692,-1.352554"); +}); + it("symbol.type(symbolCircle) generates the expected path", () => { const s = symbol().type(symbolCircle).size(function(d) { return d; }); assertPathEqual(s(0), "M0,0"); @@ -74,6 +80,18 @@ it("symbol.type(symbolDiamond) generates the expected path", () => { assertPathEqual(s(10), "M0,-2.942831L1.699044,0L0,2.942831L-1.699044,0Z"); }); +it("symbol.type(symbolDiamond2) generates the expected path", () => { + const s = symbol().type(symbolDiamond2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M0,-2.800675L2.800675,0L0,2.800675L-2.800675,0Z"); +}); + +it("symbol.type(symbolPlus) generates the expected path", () => { + const s = symbol().type(symbolPlus).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M-3.714814,0L3.714814,0M0,3.714814L0,-3.714814"); +}); + it("symbol.type(symbolStar) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolStar).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -99,6 +117,12 @@ it("symbol.type(symbolSquare) generates the expected path", () => { assertPathEqual(s(16), "M-2,-2h4v4h-4Z"); }); +it("symbol.type(symbolSquare2) generates the expected path", () => { + const s = symbol().type(symbolSquare2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M1.981603,1.981603L1.981603,-1.981603L-1.981603,-1.981603L-1.981603,1.981603Z"); +}); + it("symbol.type(symbolTriangle) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolTriangle).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -111,6 +135,12 @@ it("symbol.type(symbolTriangle) generates the expected path", () => { assertPathEqual(s(10), "M0,-2.774528L2.402811,1.387264L-2.402811,1.387264Z"); }); +it("symbol.type(symbolTriangle2) generates the expected path", () => { + const s = symbol().type(symbolTriangle2).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0L0,0Z"); + assertPathEqual(s(20), "M0,-3.051786L2.642924,1.525893L-2.642924,1.525893Z"); +}); + it("symbol.type(symbolWye) generates a polygon with the specified size", () => { const p = polygonContext(), s = symbol().type(symbolWye).context(p); s.size(1)(); assertInDelta(p.area(), 1); @@ -123,6 +153,12 @@ it("symbol.type(symbolWye) generates the expected path", () => { assertPathEqual(s(10), "M0.853360,0.492688L0.853360,2.199408L-0.853360,2.199408L-0.853360,0.492688L-2.331423,-0.360672L-1.478063,-1.838735L0,-0.985375L1.478063,-1.838735L2.331423,-0.360672Z"); }); +it("symbol.type(symbolX) generates the expected path", () => { + const s = symbol().type(symbolX).size(function(d) { return d; }); + assertPathEqual(s(0), "M0,0L0,0M0,0L0,0"); + assertPathEqual(s(20), "M-2.647561,-2.647561L2.647561,2.647561M-2.647561,2.647561L2.647561,-2.647561"); +}); + it("symbol(type, size) is equivalent to symbol().type(type).size(size)", () => { const s0 = symbol().type(symbolCross).size(16); const s1 = symbol(symbolCross, 16); diff --git a/test/symbols-test.js b/test/symbols-test.js index 3c66cf7..500cc2d 100644 --- a/test/symbols-test.js +++ b/test/symbols-test.js @@ -1,8 +1,12 @@ import assert from "assert"; -import {symbols, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye} from "../src/index.js"; +import {symbols, symbolsFill, symbolsStroke, symbolCircle, symbolCross, symbolDiamond, symbolSquare, symbolStar, symbolTriangle, symbolWye, symbolPlus, symbolX, symbolTriangle2, symbolAsterisk, symbolSquare2, symbolDiamond2} from "../src/index.js"; -it("symbols is the array of symbol types", () => { - assert.deepStrictEqual(symbols, [ +it("symbols is a deprecated alias for symbolsFill", () => { + assert.strictEqual(symbols, symbolsFill); +}); + +it("symbolsFill is the array of symbol types", () => { + assert.deepStrictEqual(symbolsFill, [ symbolCircle, symbolCross, symbolDiamond, @@ -12,3 +16,15 @@ it("symbols is the array of symbol types", () => { symbolWye ]); }); + +it("symbolsStroke is the array of symbol types", () => { + assert.deepStrictEqual(symbolsStroke, [ + symbolCircle, + symbolPlus, + symbolX, + symbolTriangle2, + symbolAsterisk, + symbolSquare2, + symbolDiamond2 + ]); +}); From ea7b9a23146c1c53c8f914d6995f5a63ebe5cf40 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Thu, 6 Jan 2022 17:08:33 -0800 Subject: [PATCH 4/7] PreTieR --- src/symbol/triangle2.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/symbol/triangle2.js b/src/symbol/triangle2.js index 273134e..6b189e4 100644 --- a/src/symbol/triangle2.js +++ b/src/symbol/triangle2.js @@ -11,5 +11,5 @@ export default { context.lineTo(u, t); context.lineTo(-u, t); context.closePath(); - }, + } }; From ea1c92ea77da9496fbddc04cca8bdf7cf8e73455 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Thu, 6 Jan 2022 17:15:38 -0800 Subject: [PATCH 5/7] Update README --- README.md | 68 +++++++++++++++++++++++++++++++++++++++---------------- 1 file changed, 48 insertions(+), 20 deletions(-) diff --git a/README.md b/README.md index e246389..847721f 100644 --- a/README.md +++ b/README.md @@ -929,11 +929,11 @@ Symbols provide a categorical shape encoding as is commonly used in scatterplots Constructs a new symbol generator of the specified [type](#symbol_type) and [size](#symbol_size). If not specified, *type* defaults to a circle, and *size* defaults to 64. -# symbol(arguments…) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol(arguments…) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) Generates a symbol for the given *arguments*. The *arguments* are arbitrary; they are simply propagated to the symbol generator’s accessor functions along with the `this` object. For example, with the default settings, no arguments are needed to produce a circle with area 64 square pixels. If the symbol generator has a [context](#symbol_context), then the symbol is rendered to this context as a sequence of [path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls and this function returns void. Otherwise, a [path data](http://www.w3.org/TR/SVG/paths.html#PathData) string is returned. -# symbol.type([type]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol.type([type]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) If *type* is specified, sets the symbol type to the specified function or symbol type and returns this symbol generator. If *type* is a function, the symbol generator’s arguments and *this* are passed through. (See [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) if you are using d3-selection.) If *type* is not specified, returns the current symbol type accessor, which defaults to: @@ -943,9 +943,9 @@ function type() { } ``` -See [symbols](#symbols) for the set of built-in symbol types. To implement a custom symbol type, pass an object that implements [*symbolType*.draw](#symbolType_draw). +See [symbolsFill](#symbolsFill) and [symbolsStroke](#symbolsStroke) for built-in symbol types. To implement a custom symbol type, pass an object that implements [*symbolType*.draw](#symbolType_draw). -# symbol.size([size]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# symbol.size([size]) · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) If *size* is specified, sets the size to the specified function or number and returns this symbol generator. If *size* is a function, the symbol generator’s arguments and *this* are passed through. (See [*selection*.attr](https://github.com/d3/d3-selection/blob/master/README.md#selection_attr) if you are using d3-selection.) If *size* is not specified, returns the current size accessor, which defaults to: @@ -961,37 +961,65 @@ Specifying the size as a function is useful for constructing a scatterplot with If *context* is specified, sets the context and returns this symbol generator. If *context* is not specified, returns the current context, which defaults to null. If the context is not null, then the [generated symbol](#_symbol) is rendered to this context as a sequence of [path method](http://www.w3.org/TR/2dcontext/#canvaspathmethods) calls. Otherwise, a [path data](http://www.w3.org/TR/SVG/paths.html#PathData) string representing the generated symbol is returned. -# d3.symbols · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolsFill · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -An array containing the set of all built-in symbol types: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. +An array containing a set symbol types designed for filling: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. -# d3.symbolCircle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/circle.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolsStroke · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -The circle symbol type. +An array containing a set symbol types designed for stroking: [circle](#symbolCircle), [plus](#symbolPlus), [x](#symbolX), [triangle2](#symbolTriangle2), [asterisk](#symbolAsterisk), [square2](#symbolSquare2), and [diamond2](#symbolDiamond2). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. -# d3.symbolCross · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/cross.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolAsterisk · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/asterisk.js) -The Greek cross symbol type, with arms of equal length. +The asterisk symbol type; intended for stroking. -# d3.symbolDiamond · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolCircle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/circle.js) -The rhombus symbol type. +The circle symbol type; intended for either filling or stroking. -# d3.symbolSquare · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolCross · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/cross.js) -The square symbol type. +The Greek cross symbol type, with arms of equal length; intended for filling. -# d3.symbolStar · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/star.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolDiamond · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js) -The pentagonal star (pentagram) symbol type. +The rhombus symbol type; intended for filling. -# d3.symbolTriangle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolDiamond2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/diamond.js) -The up-pointing triangle symbol type. +The rotated square symbol type; intended for stroking. -# d3.symbolWye · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/wye.js), [Examples](https://observablehq.com/@d3/fitted-symbols) +# d3.symbolPlus · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/plus.js) -The Y-shape symbol type. +The plus symbol type; intended for stroking. + +# d3.symbolSquare · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square.js) + +The square symbol type; intended for filling. + +# d3.symbolSquare2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/square2.js) + +The square2 symbol type; intended for stroking. + +# d3.symbolStar · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/star.js) + +The pentagonal star (pentagram) symbol type; intended for filling. + +# d3.symbolTriangle · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle.js) + +The up-pointing triangle symbol type; intended for filling. + +# d3.symbolTriangle2 · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/triangle2.js) + +The up-pointing triangle symbol type; intended for stroking. + +# d3.symbolWye · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/wye.js) + +The Y-shape symbol type; intended for filling. + +# d3.symbolX · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/x.js) + +The X-shape symbol type; intended for stroking. # d3.pointRadial(angle, radius) · [Source](https://github.com/d3/d3-shape/blob/master/src/pointRadial.js), [Examples](https://observablehq.com/@d3/radial-area-chart) From fdaa481d70789692135a197980887df019023ee4 Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Fri, 7 Jan 2022 05:52:20 -0800 Subject: [PATCH 6/7] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index 847721f..afbe78b 100644 --- a/README.md +++ b/README.md @@ -963,7 +963,7 @@ If *context* is specified, sets the context and returns this symbol generator. I # d3.symbolsFill · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -An array containing a set symbol types designed for filling: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. +An array containing a set of symbol types designed for filling: [circle](#symbolCircle), [cross](#symbolCross), [diamond](#symbolDiamond), [square](#symbolSquare), [star](#symbolStar), [triangle](#symbolTriangle), and [wye](#symbolWye). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. # d3.symbolsStroke · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) From f9e16e2e107c86b54c7f9a8eb0133cfe0f455eea Mon Sep 17 00:00:00 2001 From: Mike Bostock Date: Fri, 7 Jan 2022 05:52:25 -0800 Subject: [PATCH 7/7] Update README.md MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Philippe Rivière --- README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/README.md b/README.md index afbe78b..8cf062e 100644 --- a/README.md +++ b/README.md @@ -967,7 +967,7 @@ An array containing a set of symbol types designed for filling: [circle](#symbol # d3.symbolsStroke · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol.js) -An array containing a set symbol types designed for stroking: [circle](#symbolCircle), [plus](#symbolPlus), [x](#symbolX), [triangle2](#symbolTriangle2), [asterisk](#symbolAsterisk), [square2](#symbolSquare2), and [diamond2](#symbolDiamond2). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. +An array containing a set of symbol types designed for stroking: [circle](#symbolCircle), [plus](#symbolPlus), [x](#symbolX), [triangle2](#symbolTriangle2), [asterisk](#symbolAsterisk), [square2](#symbolSquare2), and [diamond2](#symbolDiamond2). Useful for constructing the range of an [ordinal scale](https://github.com/d3/d3-scale#ordinal-scales) should you wish to use a shape encoding for categorical data. # d3.symbolAsterisk · [Source](https://github.com/d3/d3-shape/blob/master/src/symbol/asterisk.js)