@decidables/prospectable-elements 0.5.1 → 0.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@decidables/prospectable-elements",
-  "version": "0.5.1",
+  "version": "0.6.0",
   "description": "prospectable-elements: Web Components for visualizing Cumulative Prospect Theory",
   "keywords": [
     "web component",
@@ -49,6 +49,7 @@
     "lib"
   ],
   "scripts": {
+    "clean": "gulp clean",
     "lint": "gulp lint",
     "test": "gulp test -X \"$@\"",
     "build": "gulp build"
@@ -57,15 +58,15 @@
     "gulp": "^5.0.1"
   },
   "dependencies": {
-    "@decidables/decidables-elements": "^0.5.6",
-    "@decidables/prospectable-math": "^0.3.5",
-    "@lit-labs/motion": "^1.0.9",
+    "@decidables/decidables-elements": "^0.6.0",
+    "@decidables/prospectable-math": "^0.3.6",
+    "@lit-labs/motion": "^1.1.0",
     "@observablehq/plot": "^0.6.17",
     "bayes.js": "https://github.com/akrawitz/bayes.js.git#commit=c7b091b75f85a86b6a3965a983b31e23d9ef456f",
     "color": "^5.0.3",
     "d3": "^7.9.0",
-    "d3-3d": "^1.0.0",
-    "lit": "^3.3.1"
+    "d3-3d": "^2.0.0",
+    "lit": "^3.3.2"
   },
-  "gitHead": "16663799cd51d3f2963d98c72ebb140c92c5dc79"
+  "gitHead": "72981c711111354170ece1e403d497073da7be96"
 }

package/src/components/cpt-parameters.js

@@ -92,6 +92,7 @@ export default class CPTParameters extends ProspectableElement {
 
         decidables-slider {
           line-height: 1;
+
           text-align: center;
         }
 

package/src/components/cpt-probability.js

@@ -275,9 +275,9 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .curve.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve.interactive:hover {
@@ -295,7 +295,7 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .curve.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -304,9 +304,9 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -328,7 +328,7 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -362,8 +362,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve {
@@ -396,8 +396,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -409,8 +409,8 @@ export default class CPTProbability extends DecidablesMixinResizeable(Prospectab
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `,

package/src/components/cpt-space.js

@@ -327,6 +327,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -350,6 +351,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-size: 0.75rem;
 
           alignment-baseline: middle;
+
           text-anchor: end;
         }
 
@@ -390,6 +392,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           font-weight: 600;
 
           alignment-baseline: middle;
+
           text-anchor: middle;
         }
 
@@ -474,7 +477,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
     };
     const startRotationX = (-0.85 * Math.PI) / 8;
     const startRotationY = (3 * Math.PI) / 8;
-    const startRotationZ = 0;
+    const startRotationZ = 0.0000001; // Avoid d3-3d bug
 
     const lineStrips3D = d33d.lineStrips3D()
       .origin(startOrigin)
@@ -578,21 +581,24 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
         lineStrips3D
           .x((datum) => { return datum.x; })
           .y(() => { return yScale.range()[0]; })
-          .z(() => { return zScale.range()[0]; })(xAxis),
+          .z(() => { return zScale.range()[0]; })
+          .data(xAxis),
       );
     const axisYUpdate = svgMerge.selectAll('.axis-y')
       .data(
         lineStrips3D
           .x(() => { return xScale.range()[0]; })
           .y((datum) => { return datum.y; })
-          .z(() => { return zScale.range()[1]; })(yAxis),
+          .z(() => { return zScale.range()[1]; })
+          .data(yAxis),
       );
     const axisZUpdate = svgMerge.selectAll('.axis-z')
       .data(
         lineStrips3D
           .x(() => { return xScale.range()[0]; })
           .y(() => { return yScale.range()[0]; })
-          .z((datum) => { return datum.z; })(zAxis),
+          .z((datum) => { return datum.z; })
+          .data(zAxis),
       );
     //  ENTER
     const axisXEnter = axisXUpdate.enter().append('path')
@@ -622,7 +628,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
             return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
           })
           .y(() => { return yScale.range()[0] + this.rem * 1.75; })
-          .z(() => { return zScale.range()[0] + this.rem * 1.75; })(xAxis),
+          .z(() => { return zScale.range()[0] + this.rem * 1.75; })
+          .data(xAxis),
       );
     const titlePathYUpdate = svgMerge.selectAll('.title-path-y')
       .data(
@@ -631,7 +638,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .y((datum) => {
             return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
           })
-          .z(() => { return zScale.range()[1] - this.rem * 1.75; })(yAxis),
+          .z(() => { return zScale.range()[1] - this.rem * 1.75; })
+          .data(yAxis),
       );
     const titlePathZUpdate = svgMerge.selectAll('.title-path-z')
       .data(
@@ -640,21 +648,40 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .y(() => { return yScale.range()[0] + this.rem * 1.75; })
           .z((datum) => {
             return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
-          })(zAxis),
+          })
+          .data(zAxis),
       );
     const titleXUpdate = svgMerge.selectAll('.title-x')
       .data(
-        xAxis,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min' ? datum.x - this.rem * 20 : datum.x + this.rem * 20;
+          })
+          .y(() => { return yScale.range()[0] + this.rem * 1.75; })
+          .z(() => { return zScale.range()[0] + this.rem * 1.75; })
+          .data(xAxis),
         (datum) => { return datum[0].title; },
       );
     const titleYUpdate = svgMerge.selectAll('.title-y')
       .data(
-        yAxis,
+        lineStrips3D
+          .x(() => { return xScale.range()[0] - this.rem * 1.75; })
+          .y((datum) => {
+            return datum.id === 'min' ? datum.y + this.rem * 20 : datum.y - this.rem * 20;
+          })
+          .z(() => { return zScale.range()[1] - this.rem * 1.75; })
+          .data(yAxis),
         (datum) => { return datum[0].title; },
       );
     const titleZUpdate = svgMerge.selectAll('.title-z')
       .data(
-        zAxis,
+        lineStrips3D
+          .x(() => { return xScale.range()[0] - this.rem * 1.75; })
+          .y(() => { return yScale.range()[0] + this.rem * 1.75; })
+          .z((datum) => {
+            return datum.id === 'min' ? datum.z - this.rem * 20 : datum.z + this.rem * 20;
+          })
+          .data(zAxis),
         (datum) => { return datum[0].title; },
       );
     //  ENTER
@@ -741,7 +768,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           })
           .z((datum) => {
             return datum.id === 'min' ? zScale.range()[0] : zScale.range()[0] + this.rem * 0.35;
-          })(xTicks),
+          })
+          .data(xTicks),
       );
     const ticksYUpdate = svgMerge.selectAll('.tick-y')
       .data(
@@ -752,7 +780,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .y((datum) => { return datum.y; })
           .z((datum) => {
             return datum.id === 'min' ? zScale.range()[1] : zScale.range()[1] - this.rem * 0.35;
-          })(yTicks),
+          })
+          .data(yTicks),
       );
     const ticksZUpdate = svgMerge.selectAll('.tick-z')
       .data(
@@ -763,7 +792,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .y((datum) => {
             return datum.id === 'min' ? yScale.range()[0] : yScale.range()[0] + this.rem * 0.35;
           })
-          .z((datum) => { return datum.z; })(zTicks),
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
       );
     //  ENTER
     const ticksXEnter = ticksXUpdate.enter().append('path')
@@ -799,7 +829,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
             return datum.id === 'min'
               ? zScale.range()[0] + this.rem * 4
               : zScale.range()[0] + this.rem * 0.5;
-          })(xTicks),
+          })
+          .data(xTicks),
         (datum) => { return datum[0].label; },
       );
     const labelPathsYUpdate = svgMerge.selectAll('.label-path-y')
@@ -815,7 +846,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
             return datum.id === 'min'
               ? zScale.range()[1] - this.rem * 0.5
               : zScale.range()[1] - this.rem * 4;
-          })(yTicks),
+          })
+          .data(yTicks),
         (datum) => { return datum[0].label; },
       );
     const labelPathsZUpdate = svgMerge.selectAll('.label-path-z')
@@ -831,22 +863,59 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
               ? yScale.range()[0] + this.rem * 4
               : yScale.range()[0] + this.rem * 0.5;
           })
-          .z((datum) => { return datum.z; })(zTicks),
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsXUpdate = svgMerge.selectAll('.label-x')
       .data(
-        xTicks,
+        lineStrips3D
+          .x((datum) => { return datum.x; })
+          .y((datum) => {
+            return datum.id === 'min'
+              ? yScale.range()[0] + this.rem * 4
+              : yScale.range()[0] + this.rem * 0.5;
+          })
+          .z((datum) => {
+            return datum.id === 'min'
+              ? zScale.range()[0] + this.rem * 4
+              : zScale.range()[0] + this.rem * 0.5;
+          })
+          .data(xTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsYUpdate = svgMerge.selectAll('.label-y')
       .data(
-        yTicks,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min'
+              ? xScale.range()[0] - this.rem * 0.5
+              : xScale.range()[0] - this.rem * 4;
+          })
+          .y((datum) => { return datum.y; })
+          .z((datum) => {
+            return datum.id === 'min'
+              ? zScale.range()[1] - this.rem * 0.5
+              : zScale.range()[1] - this.rem * 4;
+          })
+          .data(yTicks),
         (datum) => { return datum[0].label; },
       );
     const labelsZUpdate = svgMerge.selectAll('.label-z')
       .data(
-        zTicks,
+        lineStrips3D
+          .x((datum) => {
+            return datum.id === 'min'
+              ? xScale.range()[0] - this.rem * 4
+              : xScale.range()[0] - this.rem * 0.5;
+          })
+          .y((datum) => {
+            return datum.id === 'min'
+              ? yScale.range()[0] + this.rem * 4
+              : yScale.range()[0] + this.rem * 0.5;
+          })
+          .z((datum) => { return datum.z; })
+          .data(zTicks),
         (datum) => { return datum[0].label; },
       );
     //  ENTER
@@ -908,7 +977,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
         points3d
           .x((datum) => { return xScale(datum.a); })
           .y((datum) => { return yScale(datum.g); })
-          .z((datum) => { return zScale(datum.l); })(
+          .z((datum) => { return zScale(datum.l); })
+          .data(
             this.point
               ? [{
                 a: this.a,
@@ -987,7 +1057,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
             .rows(d3.range(this.range.g.start, this.range.g.stop + 0.01, this.range.g.step).length)
             .x((datum) => { return xScale(datum.a); })
             .y((datum) => { return yScale(datum.g); })
-            .z((datum) => { return zScale(datum.l); })(this.boundary)
+            .z((datum) => { return zScale(datum.l); })
+            .data(this.boundary)
             .filter((datum) => {
               return (
                 (datum[0].a >= this.range.a.start && datum[0].a <= this.range.a.stop)
@@ -1024,7 +1095,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .rows(d3.range(this.range.g.start, this.range.g.stop + 0.01, this.range.g.step).length)
           .x((datum) => { return xScale(datum.a); })
           .y((datum) => { return yScale(datum.g); })
-          .z((datum) => { return zScale(datum.l); })(this.mapXY),
+          .z((datum) => { return zScale(datum.l); })
+          .data(this.mapXY),
       );
     const mapXZUpdate = svgMerge.selectAll('.map-xz')
       .data(
@@ -1032,7 +1104,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .rows(d3.range(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length)
           .x((datum) => { return xScale(datum.a); })
           .y((datum) => { return yScale(datum.g); })
-          .z((datum) => { return zScale(datum.l); })(this.mapXZ),
+          .z((datum) => { return zScale(datum.l); })
+          .data(this.mapXZ),
       );
     const mapYZUpdate = svgMerge.selectAll('.map-yz')
       .data(
@@ -1040,7 +1113,8 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
           .rows(d3.range(this.range.l.start, this.range.l.stop + 0.01, this.range.l.step).length)
           .x((datum) => { return xScale(datum.a); })
           .y((datum) => { return yScale(datum.g); })
-          .z((datum) => { return zScale(datum.l); })(this.mapYZ),
+          .z((datum) => { return zScale(datum.l); })
+          .data(this.mapYZ),
       );
     //  ENTER
     const mapXYEnter = mapXYUpdate.enter().append('path')
@@ -1089,7 +1163,7 @@ export default class CPTSpace extends DecidablesMixinResizeable(ProspectableElem
     mapYZUpdate.exit().remove();
 
     // Depth sorting
-    d3.select(this.renderRoot).selectAll('.d3-3d').sort(points3d.sort);
+    d3.select(this.renderRoot).selectAll('.d3-3d').sort(d33d.sort);
 
     // Color Legend
     //  DATA-JOIN

package/src/components/cpt-value.js

@@ -289,9 +289,9 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
         .curve-p.interactive,
         .curve-n.interactive {
           cursor: nwse-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
         }
 
         .curve-p.interactive:hover,
@@ -311,8 +311,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           transform: translateY(0);
         }
 
-        :host(.keyboard) .curve-p.interactive:focus,
-        :host(.keyboard) .curve-n.interactive:focus {
+        .curve-p.interactive:focus-visible,
+        .curve-n.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -321,9 +321,9 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         .point.interactive {
           cursor: nesw-resize;
+          outline: none;
 
           filter: url("#shadow-2");
-          outline: none;
 
           /* HACK: This gets Safari to correctly apply the filter! */
           stroke: #000000;
@@ -345,7 +345,7 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           stroke: #00ff00;
         }
 
-        :host(.keyboard) .point.interactive:focus {
+        .point.interactive:focus-visible {
           filter: url("#shadow-8");
 
           /* HACK: This gets Safari to correctly apply the filter! */
@@ -385,8 +385,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         .diagonal {
           stroke: var(---color-element-border);
-          stroke-dasharray: 4;
           stroke-width: 1;
+          stroke-dasharray: 4;
         }
 
         .curve-p,
@@ -420,8 +420,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
           font-size: 0.75rem;
 
           dominant-baseline: middle;
-          text-anchor: middle;
 
+          text-anchor: middle;
           fill: var(---color-text-inverse);
         }
 
@@ -433,8 +433,8 @@ export default class CPTValue extends DecidablesMixinResizeable(ProspectableElem
 
         @media (pointer: coarse) {
           .interactive .touch {
-            stroke-linecap: round;
             stroke-width: 12;
+            stroke-linecap: round;
           }
         }
       `,