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

@@ -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

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();
+    }}
+};

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();
+    }}
+};

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();
+    }}
+};

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 ];

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();
+    }}
+};

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();
+    }}
+};

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();
+    }}
+};

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();
+    }}
+};