preattentive symbols

src/index.js

@@ -7,14 +7,20 @@ export {default as lineRadial, default as radialLine} from "./lineRadial.js"; //
 export {default as pointRadial} from "./pointRadial.js";
 export {linkHorizontal, linkVertical, linkRadial} from "./link/index.js";
 
-export {default as symbol, symbols} from "./symbol.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";

src/math.js

@@ -1,15 +1,15 @@
-export var abs = Math.abs;
-export var atan2 = Math.atan2;
-export var cos = Math.cos;
-export var max = Math.max;
-export var min = Math.min;
-export var sin = Math.sin;
-export var sqrt = Math.sqrt;
+export const abs = Math.abs;
+export const atan2 = Math.atan2;
+export const cos = Math.cos;
+export const max = Math.max;
+export const min = Math.min;
+export const sin = Math.sin;
+export const sqrt = Math.sqrt;
 
-export var epsilon = 1e-12;
-export var pi = Math.PI;
-export var halfPi = pi / 2;
-export var tau = 2 * pi;
+export const epsilon = 1e-12;
+export const pi = Math.PI;
+export const halfPi = pi / 2;
+export const tau = 2 * pi;
 
 export function acos(x) {
   return x > 1 ? 0 : x < -1 ? pi : Math.acos(x);

src/symbol.js

@@ -1,14 +1,21 @@
 import {path} from "d3-path";
+import constant from "./constant.js";
+import asterisk from "./symbol/asterisk.js";
 import circle from "./symbol/circle.js";
 import cross from "./symbol/cross.js";
 import diamond from "./symbol/diamond.js";
-import star from "./symbol/star.js";
+import diamond2 from "./symbol/diamond2.js";
+import plus from "./symbol/plus.js";
 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 wye from "./symbol/wye.js";
-import constant from "./constant.js";
+import x from "./symbol/x.js";
 
-export var symbols = [
+// These symbols are designed to be filled.
+export const symbolsFill = [
   circle,
   cross,
   diamond,
@@ -18,13 +25,25 @@ export var symbols = [
   wye
 ];
 
-export default function(type, size) {
-  var context = null;
+// These symbols are designed to be stroked (with a width of 1.5px and round caps).
+export const symbolsStroke = [
+  circle,
+  plus,
+  x,
+  triangle2,
+  asterisk,
+  square2,
+  diamond2
+];
+
+export default function Symbol(type, size) {
+  let context = null;
+
   type = typeof type === "function" ? type : constant(type || circle);
   size = typeof size === "function" ? size : constant(size === undefined ? 64 : +size);
 
   function symbol() {
-    var buffer;
+    let buffer;
     if (!context) context = buffer = path();
     type.apply(this, arguments).draw(context, +size.apply(this, arguments));
     if (buffer) return context = null, buffer + "" || null;

src/symbol/asterisk.js

@@ -0,0 +1,17 @@
+import {min, sqrt} from "../math.js";
+
+const sqrt3 = sqrt(3);
+
+export default {
+  draw(context, size) {
+    const r = sqrt(size + min(size / 28, 0.75)) * 0.59436;
+    const t = r / 2;
+    const u = t * sqrt3;
+    context.moveTo(0, r);
+    context.lineTo(0, -r);
+    context.moveTo(-u, -t);
+    context.lineTo(u, t);
+    context.moveTo(-u, t);
+    context.lineTo(u, -t);
+  }
+};

src/symbol/circle.js

@@ -1,8 +1,8 @@
-import {pi, tau} from "../math.js";
+import {pi, sqrt, tau} from "../math.js";
 
 export default {
-  draw: function(context, size) {
-    var r = Math.sqrt(size / pi);
+  draw(context, size) {
+    const r = sqrt(size / pi);
     context.moveTo(r, 0);
     context.arc(0, 0, r, 0, tau);
   }

src/symbol/cross.js

@@ -1,6 +1,8 @@
+import {sqrt} from "../math.js";
+
 export default {
-  draw: function(context, size) {
-    var r = Math.sqrt(size / 5) / 2;
+  draw(context, size) {
+    const r = sqrt(size / 5) / 2;
     context.moveTo(-3 * r, -r);
     context.lineTo(-r, -r);
     context.lineTo(-r, -3 * r);

src/symbol/diamond.js

@@ -1,10 +1,12 @@
-var tan30 = Math.sqrt(1 / 3),
-    tan30_2 = tan30 * 2;
+import {sqrt} from "../math.js";
+
+const tan30 = sqrt(1 / 3);
+const tan30_2 = tan30 * 2;
 
 export default {
-  draw: function(context, size) {
-    var y = Math.sqrt(size / tan30_2),
-        x = y * tan30;
+  draw(context, size) {
+    const y = sqrt(size / tan30_2);
+    const x = y * tan30;
     context.moveTo(0, -y);
     context.lineTo(x, 0);
     context.lineTo(0, y);

src/symbol/diamond2.js

@@ -0,0 +1,12 @@
+import {sqrt} from "../math.js";
+
+export default {
+  draw(context, size) {
+    const r = sqrt(size) * 0.62625;
+    context.moveTo(0, -r);
+    context.lineTo(r, 0);
+    context.lineTo(0, r);
+    context.lineTo(-r, 0);
+    context.closePath();
+  }
+};

src/symbol/plus.js

@@ -0,0 +1,11 @@
+import {min, sqrt} from "../math.js";
+
+export default {
+  draw(context, size) {
+    const r = sqrt(size - min(size / 7, 2)) * 0.87559;
+    context.moveTo(-r, 0);
+    context.lineTo(r, 0);
+    context.moveTo(0, r);
+    context.lineTo(0, -r);
+  }
+};

src/symbol/square.js

@@ -1,7 +1,9 @@
+import {sqrt} from "../math.js";
+
 export default {
-  draw: function(context, size) {
-    var w = Math.sqrt(size),
-        x = -w / 2;
+  draw(context, size) {
+    const w = sqrt(size);
+    const x = -w / 2;
     context.rect(x, x, w, w);
   }
 };

src/symbol/square2.js

@@ -0,0 +1,12 @@
+import {sqrt} from "../math.js";
+
+export default {
+  draw(context, size) {
+    const r = sqrt(size) * 0.4431;
+    context.moveTo(r, r);
+    context.lineTo(r, -r);
+    context.lineTo(-r, -r);
+    context.lineTo(-r, r);
+    context.closePath();
+  }
+};

src/symbol/star.js

@@ -1,21 +1,21 @@
-import {pi, tau} from "../math.js";
+import {sin, cos, sqrt, pi, tau} from "../math.js";
 
-var ka = 0.89081309152928522810,
-    kr = Math.sin(pi / 10) / Math.sin(7 * pi / 10),
-    kx = Math.sin(tau / 10) * kr,
-    ky = -Math.cos(tau / 10) * kr;
+const ka = 0.89081309152928522810;
+const kr = sin(pi / 10) / sin(7 * pi / 10);
+const kx = sin(tau / 10) * kr;
+const ky = -cos(tau / 10) * kr;
 
 export default {
-  draw: function(context, size) {
-    var r = Math.sqrt(size * ka),
-        x = kx * r,
-        y = ky * r;
+  draw(context, size) {
+    const r = sqrt(size * ka);
+    const x = kx * r;
+    const y = ky * r;
     context.moveTo(0, -r);
     context.lineTo(x, y);
-    for (var i = 1; i < 5; ++i) {
-      var a = tau * i / 5,
-          c = Math.cos(a),
-          s = Math.sin(a);
+    for (let i = 1; i < 5; ++i) {
+      const a = tau * i / 5;
+      const c = cos(a);
+      const s = sin(a);
       context.lineTo(s * r, -c * r);
       context.lineTo(c * x - s * y, s * x + c * y);
     }

src/symbol/triangle.js

@@ -1,8 +1,10 @@
-var sqrt3 = Math.sqrt(3);
+import {sqrt} from "../math.js";
+
+const sqrt3 = sqrt(3);
 
 export default {
-  draw: function(context, size) {
-    var y = -Math.sqrt(size / (sqrt3 * 3));
+  draw(context, size) {
+    const y = -sqrt(size / (sqrt3 * 3));
     context.moveTo(0, y * 2);
     context.lineTo(-sqrt3 * y, -y);
     context.lineTo(sqrt3 * y, -y);

src/symbol/triangle2.js

@@ -0,0 +1,15 @@
+import {sqrt} from "../math.js";
+
+const sqrt3 = sqrt(3);
+
+export default {
+  draw(context, size) {
+    const s = sqrt(size) * 0.6824;
+    const t = s  / 2;
+    const u = (s * sqrt3) / 2; // cos(Math.PI / 6)
+    context.moveTo(0, -s);
+    context.lineTo(u, t);
+    context.lineTo(-u, t);
+    context.closePath();
+  },
+};

src/symbol/wye.js

@@ -1,17 +1,16 @@
-var c = -0.5,
-    s = Math.sqrt(3) / 2,
-    k = 1 / Math.sqrt(12),
-    a = (k / 2 + 1) * 3;
+import {sqrt} from "../math.js";
+
+const c = -0.5;
+const s = sqrt(3) / 2;
+const k = 1 / sqrt(12);
+const a = (k / 2 + 1) * 3;
 
 export default {
-  draw: function(context, size) {
-    var r = Math.sqrt(size / a),
-        x0 = r / 2,
-        y0 = r * k,
-        x1 = x0,
-        y1 = r * k + r,
-        x2 = -x1,
-        y2 = y1;
+  draw(context, size) {
+    const r = sqrt(size / a);
+    const x0 = r / 2, y0 = r * k;
+    const x1 = x0, y1 = r * k + r;
+    const x2 = -x1, y2 = y1;
     context.moveTo(x0, y0);
     context.lineTo(x1, y1);
     context.lineTo(x2, y2);

src/symbol/x.js

@@ -0,0 +1,11 @@
+import {min, sqrt} from "../math.js";
+
+export default {
+  draw(context, size) {
+    const r = sqrt(size - min(size / 6, 1.7)) * 0.6189;
+    context.moveTo(-r, -r);
+    context.lineTo(r, r);
+    context.moveTo(-r, r);
+    context.lineTo(r, -r);
+  }
+};