@decidables/discountable-elements 0.5.0 → 0.6.0

package/src/components/htd-curves.js

@@ -249,54 +249,90 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           /* shape-rendering: crispEdges; */
         }
 
-        .curve {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        .option .interactive {
+          filter: url("#shadow-2");
         }
 
-        .curve.interactive {
-          cursor: nwse-resize;
-          
-          filter: url("#shadow-2");
-          outline: none;
+        .option .interactive:hover {
+          filter: url("#shadow-4");
         }
 
-        .curve.interactive:hover {
+        .option .body.interactive:has(~ .point:hover) {
           filter: url("#shadow-4");
         }
 
-        .curve.interactive:active {
+        .option .interactive:active {
           filter: url("#shadow-8");
         }
 
-        :host(.keyboard) .curve.interactive:focus {
+        .option .body.interactive:has(~ .point:active) {
           filter: url("#shadow-8");
         }
 
-        .bar {
-          fill: none;
-          stroke: var(---color-element-emphasis);
-          stroke-width: 2;
+        :host(.keyboard) .option .interactive:focus-within {
+          filter: url("#shadow-8");
         }
 
-        .bar.interactive {
-          cursor: ew-resize;
-          
-          filter: url("#shadow-2");
+        :host(.keyboard) .option .body.interactive:has(~ .point:focus-within) {
+          filter: url("#shadow-8");
+        }
+
+        .gradient.sooner stop {
+          stop-color: var(---color-sooner);
+        }
+
+        .gradient.later stop {
+          stop-color: var(---color-later);
+        }
+
+        .stop-0,
+        .stop-before {
+          stop-opacity: 0;
+        }
+
+        .stop-after,
+        .stop-100 {
+          stop-opacity: 1;
+        }
+
+        .fill {
+          fill: var(---color-element-enabled);
+          fill-opacity: 0.5;
+          stroke: none;
+        }
+
+        .interactive .fill {
+          cursor: move;
+
           outline: none;
         }
 
-        .bar.interactive:hover {
-          filter: url("#shadow-4");
+        .sooner .fill {
+          fill: var(---color-sooner);
         }
 
-        .bar.interactive:active {
-          filter: url("#shadow-8");
+        .later .fill {
+          fill: var(---color-later);
         }
 
-        :host(.keyboard) .bar.interactive:focus {
-          filter: url("#shadow-8");
+        .trial.sooner .fill {
+          fill: url("#sooner-gradient");
+        }
+
+        .trial.later .fill {
+          fill: url("#later-gradient");
+        }
+
+        .bar {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
+        }
+
+        .interactive .bar {
+          cursor: ew-resize;
+
+          outline: none;
         }
 
         .point .mark {
@@ -314,38 +350,22 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           fill: var(---color-text-inverse);
         }
 
-        .point.interactive {
+        .point.interact {
           cursor: ns-resize;
 
-          filter: url("#shadow-2");
           outline: none;
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          /* https://github.com/emilbjorklund/svg-weirdness/issues/27 */
-          stroke: #000000;
-          stroke-opacity: 0;
-          stroke-width: 0;
         }
 
-        .point.interactive:hover {
-          filter: url("#shadow-4");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #ff0000;
-        }
-
-        .point.interactive:active {
-          filter: url("#shadow-8");
-
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #00ff00;
+        .curve {
+          fill: none;
+          stroke: var(---color-element-emphasis);
+          stroke-width: 2;
         }
 
-        :host(.keyboard) .point.interactive:focus {
-          filter: url("#shadow-8");
+        .curve.interactive {
+          cursor: nwse-resize;
 
-          /* HACK: This gets Safari to correctly apply the filter! */
-          stroke: #0000ff;
+          outline: none;
         }
 
         /* Make larger targets for touch users */
@@ -434,6 +454,38 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     const svgEnter = svgUpdate.enter().append('svg')
       .classed('main', true);
     svgEnter.html(DiscountableElement.svgDefs);
+    // Gradients for fill animations
+    const svgDefs = svgEnter.append('defs');
+    const soonerGradient = svgDefs.append('linearGradient')
+      .classed('gradient sooner', true)
+      .attr('id', 'sooner-gradient');
+    soonerGradient.append('stop')
+      .classed('stop-0', true)
+      .attr('offset', '0');
+    soonerGradient.append('stop')
+      .classed('stop-before animation', true)
+      .attr('offset', '1');
+    soonerGradient.append('stop')
+      .classed('stop-after animation', true)
+      .attr('offset', '1');
+    soonerGradient.append('stop')
+      .classed('stop-100', true)
+      .attr('offset', '1');
+    const laterGradient = svgDefs.append('linearGradient')
+      .classed('gradient later', true)
+      .attr('id', 'later-gradient');
+    laterGradient.append('stop')
+      .classed('stop-0', true)
+      .attr('offset', '0');
+    laterGradient.append('stop')
+      .classed('stop-before animation', true)
+      .attr('offset', '1');
+    laterGradient.append('stop')
+      .classed('stop-after animation', true)
+      .attr('offset', '1');
+    laterGradient.append('stop')
+      .classed('stop-100', true)
+      .attr('offset', '1');
     //  MERGE
     const svgMerge = svgEnter.merge(svgUpdate)
       .attr('viewBox', `0 0 ${elementWidth} ${elementHeight}`);
@@ -554,13 +606,27 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
       );
     //  ENTER
     const optionEnter = optionUpdate.enter().append('g')
-      .classed('option', true);
-    // Curve
-    const curveEnter = optionEnter.append('g')
-      .classed('curve', true)
-      .attr('clip-path', 'url(#clip-htd-curves)');
-    curveEnter.append('path')
-      .classed('path', true)
+      .attr('class', (datum) => {
+        const labelClass = datum.label === 's' ? 'sooner' : datum.label === 'l' ? 'later' : '';
+        const trialClass = datum.trial ? 'trial' : '';
+        return `option ${labelClass} ${trialClass}`;
+      });
+    // Body (Fill, Bar, Point)
+    const bodyEnter = optionEnter.append('g')
+      .classed('body', true);
+    // Fill
+    const fillEnter = bodyEnter.append('g')
+      .classed('fill', true)
+      .attr('clip-path', 'url(#clip-htd-curves)')
+      .each((datum) => {
+        if (datum.trial) {
+          svgMerge
+            .selectAll('.gradient .animation')
+            .attr('offset', 1);
+        }
+      });
+    fillEnter.append('path')
+      .classed('region', true)
       .attr('d', (datum) => {
         const curve = d3.range(xScale(datum.d), xScale(0), -1).map((range) => {
           return {
@@ -572,8 +638,20 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
             ),
           };
         });
-        return line(curve);
-      })
+        return line([...curve, {d: 0, v: 0}, {d: datum.d, v: 0}]);
+      });
+    // Bar
+    const barEnter = bodyEnter.append('g')
+      .classed('bar', true);
+    barEnter.append('line')
+      .classed('line', true);
+    barEnter.append('line')
+      .classed('line touch', true);
+    barEnter.selectAll('.line')
+      .attr('x1', (datum) => { return xScale(datum.d); })
+      .attr('x2', (datum) => { return xScale(datum.d); })
+      .attr('y1', yScale(0))
+      .attr('y2', (datum) => { return yScale(datum.a); })
       .attr('stroke-dasharray', (datum, index, nodes) => {
         if (datum.trial) {
           const length = nodes[index].getTotalLength();
@@ -581,8 +659,20 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }
         return 'none';
       });
+    // Point
+    const pointEnter = bodyEnter.append('g')
+      .classed('point', true);
+    pointEnter.append('circle')
+      .classed('mark touch', true);
+    // Curve
+    const curveEnter = optionEnter.append('g')
+      .classed('curve', true)
+      .attr('clip-path', 'url(#clip-htd-curves)');
     curveEnter.append('path')
-      .classed('path touch', true)
+      .classed('path', true);
+    curveEnter.append('path')
+      .classed('path touch', true);
+    curveEnter.selectAll('.path')
       .attr('d', (datum) => {
         const curve = d3.range(xScale(datum.d), xScale(0), -1).map((range) => {
           return {
@@ -603,38 +693,14 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }
         return 'none';
       });
-    // Bar
-    const barEnter = optionEnter.append('g')
-      .classed('bar', true);
-    barEnter.append('line')
-      .classed('line', true)
-      .attr('x1', (datum) => { return xScale(datum.d); })
-      .attr('x2', (datum) => { return xScale(datum.d); })
-      .attr('y1', yScale(0))
-      .attr('y2', (datum) => { return yScale(datum.a); })
-      .attr('stroke-dasharray', (datum, index, nodes) => {
-        if (datum.trial) {
-          const length = nodes[index].getTotalLength();
-          return `0,${length}`;
-        }
-        return 'none';
-      });
-    barEnter.append('line')
-      .classed('line touch', true)
-      .attr('x1', (datum) => { return xScale(datum.d); })
-      .attr('x2', (datum) => { return xScale(datum.d); })
-      .attr('y1', yScale(0))
-      .attr('y2', (datum) => { return yScale(datum.a); })
-      .attr('stroke-dasharray', (datum, index, nodes) => {
-        if (datum.trial) {
-          const length = nodes[index].getTotalLength();
-          return `0,${length}`;
-        }
-        return 'none';
-      });
-    // Point
-    const pointEnter = optionEnter.append('g')
-      .classed('point', true)
+    // Point (again)
+    const topPointEnter = optionEnter.append('g')
+      .classed('point top-point', true);
+    topPointEnter.append('circle')
+      .classed('mark touch', true);
+    topPointEnter.append('text')
+      .classed('label', true);
+    optionEnter.selectAll('.point')
       .attr('transform', (datum) => {
         return `translate(${xScale(datum.d)}, ${yScale(datum.a)})`;
       })
@@ -644,28 +710,27 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }
         return 1;
       });
-    pointEnter.append('circle')
-      .classed('mark touch', true);
-    pointEnter.append('text')
-      .classed('label', true);
+
     //  MERGE
     const optionMerge = optionEnter.merge(optionUpdate);
 
     // Interactive options
-    // Curve
-    optionMerge
+    // Body (Fill, Bar, Point)
+    const bodyMergeInteractive = optionMerge
       .filter((datum, index, nodes) => {
-        return (this.interactive && !d3.select(nodes[index]).select('.curve').classed('interactive'));
+        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.body').classed('interactive'));
       })
-      .select('.curve')
-      .classed('interactive', true)
+      .select('.body');
+    bodyMergeInteractive.classed('interactive', true);
+    // Fill
+    bodyMergeInteractive.select('.fill')
       .attr('tabindex', 0)
       // Drag interaction
       .call(d3.drag()
-        .subject((event) => {
+        .subject((event, datum) => {
           return {
-            x: event.x,
-            y: event.y,
+            x: xScale(datum.d),
+            y: yScale(datum.a),
           };
         })
         .on('start', (event) => {
@@ -674,24 +739,22 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         })
         .on('drag', (event, datum) => {
           this.drag = true;
-          const dragD = datum.d - xScale.invert(event.x);
-          const d = (dragD < 0)
-            ? 0
-            : (dragD > datum.d)
-              ? datum.d
-              : dragD;
-          const dragV = yScale.invert(event.y);
-          const v = (dragV <= 0)
-            ? 0.001
-            : (dragV > datum.a)
-              ? datum.a
-              : dragV;
-          const k = HTDMath.adv2k(datum.a, d, v);
-          this.k = (k < HTDMath.k.MIN)
-            ? HTDMath.k.MIN
-            : (k > HTDMath.k.MAX)
-              ? HTDMath.k.MAX
-              : k;
+          const d = xScale.invert(event.x);
+          const a = yScale.invert(event.y);
+          datum.d = (d < this.scale.time.min)
+            ? this.scale.time.min
+            : (d > this.scale.time.max)
+              ? this.scale.time.max
+              : this.scale.time.round(d);
+          datum.a = (a < this.scale.value.min)
+            ? this.scale.value.min
+            : (a > this.scale.value.max)
+              ? this.scale.value.max
+              : this.scale.value.round(a);
+          if (datum.name === 'default') {
+            this.d = datum.d;
+            this.a = datum.a;
+          }
           this.alignState();
           this.requestUpdate();
           this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -711,27 +774,42 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }))
       // Keyboard interaction
       .on('keydown', (event, datum) => {
-        if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
-          let {k} = this;
+        if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(event.key)) {
+          let keyA = datum.a;
+          let keyD = datum.d;
           switch (event.key) {
             case 'ArrowUp':
-            case 'ArrowLeft':
-              k *= event.shiftKey ? 0.95 : 0.85;
+              keyA += event.shiftKey ? 1 : 5;
               break;
             case 'ArrowDown':
+              keyA -= event.shiftKey ? 1 : 5;
+              break;
             case 'ArrowRight':
-              k *= event.shiftKey ? (1 / 0.95) : (1 / 0.85);
+              keyD += event.shiftKey ? 1 : 5;
+              break;
+            case 'ArrowLeft':
+              keyD -= event.shiftKey ? 1 : 5;
               break;
             default:
               // no-op
           }
-          k = (k < HTDMath.k.MIN)
-            ? HTDMath.k.MIN
-            : (k > HTDMath.k.MAX)
-              ? HTDMath.k.MAX
-              : k;
-          if (k !== this.k) {
-            this.k = k;
+          keyD = (keyD < this.scale.time.min)
+            ? this.scale.time.min
+            : ((keyD > this.scale.time.max)
+              ? this.scale.time.max
+              : keyD);
+          keyA = (keyA < this.scale.value.min)
+            ? this.scale.value.min
+            : ((keyA > this.scale.value.max)
+              ? this.scale.value.max
+              : keyA);
+          if ((keyD !== datum.d) || (keyA !== datum.a)) {
+            datum.d = keyD;
+            datum.a = keyA;
+            if (datum.name === 'default') {
+              this.d = datum.d;
+              this.a = datum.a;
+            }
             this.alignState();
             this.requestUpdate();
             this.dispatchEvent(new CustomEvent('htd-curves-change', {
@@ -749,13 +827,7 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
         }
       });
     // Bar
-    optionMerge
-      .filter((datum, index, nodes) => {
-        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.bar').classed('interactive'));
-      })
-      .select('.bar')
-      .classed('interactive', true)
-      .attr('tabindex', 0)
+    bodyMergeInteractive.select('.bar')
       // Drag interaction
       .call(d3.drag()
         .subject((event, datum) => {
@@ -839,11 +911,10 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
     // Point
     optionMerge
       .filter((datum, index, nodes) => {
-        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.point').classed('interactive'));
+        return (this.interactive && !datum.trial && !d3.select(nodes[index]).select('.top-point').classed('interact'));
       })
-      .select('.point')
-      .classed('interactive', true)
-      .attr('tabindex', 0)
+      .select('.top-point')
+      .classed('interact', true)
       // Drag interaction
       .call(d3.drag()
         .subject((event, datum) => {
@@ -924,148 +995,212 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           event.preventDefault();
         }
       });
-
-    // Non-interactive options
     // Curve
     optionMerge
       .filter((datum, index, nodes) => {
-        return (!this.interactive && d3.select(nodes[index]).select('.curve').classed('interactive'));
+        return (this.interactive && !d3.select(nodes[index]).select('.curve').classed('interactive'));
       })
       .select('.curve')
-      .classed('interactive', false)
+      .classed('interactive', true)
+      .attr('tabindex', 0)
+      // Drag interaction
+      .call(d3.drag()
+        .subject((event) => {
+          return {
+            x: event.x,
+            y: event.y,
+          };
+        })
+        .on('start', (event) => {
+          const element = event.currentTarget;
+          d3.select(element).classed('dragging', true);
+        })
+        .on('drag', (event, datum) => {
+          this.drag = true;
+          const dragD = datum.d - xScale.invert(event.x);
+          const d = (dragD < 0)
+            ? 0
+            : (dragD > datum.d)
+              ? datum.d
+              : dragD;
+          const dragV = yScale.invert(event.y);
+          const v = (dragV <= 0)
+            ? 0.001
+            : (dragV > datum.a)
+              ? datum.a
+              : dragV;
+          const k = HTDMath.adv2k(datum.a, d, v);
+          this.k = (k < HTDMath.k.MIN)
+            ? HTDMath.k.MIN
+            : (k > HTDMath.k.MAX)
+              ? HTDMath.k.MAX
+              : k;
+          this.alignState();
+          this.requestUpdate();
+          this.dispatchEvent(new CustomEvent('htd-curves-change', {
+            detail: {
+              name: datum.name,
+              a: datum.a,
+              d: datum.d,
+              k: this.k,
+              label: datum.label,
+            },
+            bubbles: true,
+          }));
+        })
+        .on('end', (event) => {
+          const element = event.currentTarget;
+          d3.select(element).classed('dragging', false);
+        }))
+      // Keyboard interaction
+      .on('keydown', (event, datum) => {
+        if (['ArrowUp', 'ArrowDown', 'ArrowRight', 'ArrowLeft'].includes(event.key)) {
+          let {k} = this;
+          switch (event.key) {
+            case 'ArrowUp':
+            case 'ArrowLeft':
+              k *= event.shiftKey ? 0.95 : 0.85;
+              break;
+            case 'ArrowDown':
+            case 'ArrowRight':
+              k *= event.shiftKey ? (1 / 0.95) : (1 / 0.85);
+              break;
+            default:
+              // no-op
+          }
+          k = (k < HTDMath.k.MIN)
+            ? HTDMath.k.MIN
+            : (k > HTDMath.k.MAX)
+              ? HTDMath.k.MAX
+              : k;
+          if (k !== this.k) {
+            this.k = k;
+            this.alignState();
+            this.requestUpdate();
+            this.dispatchEvent(new CustomEvent('htd-curves-change', {
+              detail: {
+                name: datum.name,
+                a: datum.a,
+                d: datum.d,
+                k: this.k,
+                label: datum.label,
+              },
+              bubbles: true,
+            }));
+          }
+          event.preventDefault();
+        }
+      });
+
+    // Non-interactive options
+    // Body (Fill, Bar, Point)
+    const bodyMergeNoninteractive = optionMerge
+      .filter((datum, index, nodes) => {
+        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.body').classed('interactive'));
+      });
+    bodyMergeNoninteractive.classed('interactive', false);
+    // Fill
+    bodyMergeNoninteractive
+      .select('.fill')
       .attr('tabindex', null)
       .on('drag', null)
       .on('keydown', null);
     // Bar
+    bodyMergeNoninteractive
+      .select('.bar')
+      .on('drag', null)
+      .on('keydown', null);
+    // Point
     optionMerge
       .filter((datum, index, nodes) => {
-        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.bar').classed('interactive'));
+        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.top-point').classed('interact'));
       })
-      .select('.bar')
-      .classed('interactive', false)
-      .attr('tabindex', null)
+      .select('.top-point')
+      .classed('interact', false)
       .on('drag', null)
       .on('keydown', null);
-    // Point
+    // Curve
     optionMerge
       .filter((datum, index, nodes) => {
-        return ((!this.interactive || datum.trial) && d3.select(nodes[index]).select('.point').classed('interactive'));
+        return (!this.interactive && d3.select(nodes[index]).select('.curve').classed('interactive'));
       })
-      .select('.point')
+      .select('.curve')
       .classed('interactive', false)
       .attr('tabindex', null)
       .on('drag', null)
       .on('keydown', null);
 
     // Trial Animation
-    // Curve
+    // Fill
     optionMerge
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.curve .path').transition()
-      .duration(transitionDuration)
-      .delay(transitionDuration + transitionDuration / 10)
-      .ease(d3.easeLinear)
-      .attrTween('stroke-dasharray', (datum, index, nodes) => {
-        const length = nodes[index].getTotalLength();
-        return d3.interpolate(`0,${length}`, `${length},${0}`);
-      })
-      .on('end', (datum) => {
-        datum.new = false;
-        this.dispatchEvent(new CustomEvent('discountable-response', {
-          detail: {
-            trial: this.trialCount,
-            as: this.as,
-            ds: this.ds,
-            al: this.al,
-            dl: this.dl,
-            response: this.response,
-          },
-          bubbles: true,
-        }));
+      .each(() => {
+        svgMerge
+          .selectAll('.gradient .animation').transition()
+          .duration(transitionDuration)
+          .delay(transitionDuration + transitionDuration / 10)
+          .ease(d3.easeLinear)
+          .attrTween('offset', () => { return d3.interpolate(1, 0); });
       });
+    // Bar
     optionMerge
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.curve .path.touch').transition()
+      .selectAll('.bar .line').transition()
       .duration(transitionDuration)
-      .delay(transitionDuration + transitionDuration / 10)
       .ease(d3.easeLinear)
       .attrTween('stroke-dasharray', (datum, index, nodes) => {
         const length = nodes[index].getTotalLength();
-        return d3.interpolate(`0,${length}`, `${length},${0}`);
+        return d3.interpolate(`0,${length}`, `${length},${length}`);
       });
-    // Bar
+    // Point
     optionMerge
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.bar .line').transition()
-      .duration(transitionDuration)
+      .selectAll('.point').transition()
+      .duration(transitionDuration / 10)
+      .delay(transitionDuration)
       .ease(d3.easeLinear)
-      .attrTween('stroke-dasharray', (datum, index, nodes) => {
-        const length = nodes[index].getTotalLength();
-        return d3.interpolate(`0,${length}`, `${length},${length}`);
-      });
+      .attrTween('opacity', () => { return d3.interpolate(0, 1); });
+    // Curve
     optionMerge
       .filter((datum) => {
         return (datum.new);
       })
-      .select('.bar .line.touch').transition()
+      .selectAll('.curve .path').transition()
       .duration(transitionDuration)
+      .delay(transitionDuration + transitionDuration / 10)
       .ease(d3.easeLinear)
       .attrTween('stroke-dasharray', (datum, index, nodes) => {
         const length = nodes[index].getTotalLength();
-        return d3.interpolate(`0,${length}`, `${length},${length}`);
-      });
-    // Point
-    optionMerge
-      .filter((datum) => {
-        return (datum.new);
+        return d3.interpolate(`0,${length}`, `${length},${0}`);
       })
-      .select('.point').transition()
-      .duration(transitionDuration / 10)
-      .delay(transitionDuration)
-      .ease(d3.easeLinear)
-      .attrTween('opacity', () => { return d3.interpolate(0, 1); });
+      .on('end', (datum) => {
+        datum.new = false;
+        this.dispatchEvent(new CustomEvent('discountable-response', {
+          detail: {
+            trial: this.trialCount,
+            as: this.as,
+            ds: this.ds,
+            al: this.al,
+            dl: this.dl,
+            response: this.response,
+          },
+          bubbles: true,
+        }));
+      });
 
     // All options
-    optionUpdate.select('.curve .path').transition()
-      .duration(this.drag
-        ? 0
-        : (this.firstUpdate
-          ? (transitionDuration * 2)
-          : transitionDuration))
-      .ease(d3.easeCubicOut)
-      .attrTween('d', (datum, index, elements) => {
-        const element = elements[index];
-        const interpolateA = d3.interpolate(
-          (element.a !== undefined) ? element.a : datum.a,
-          datum.a,
-        );
-        const interpolateD = d3.interpolate(
-          (element.d !== undefined) ? element.d : datum.d,
-          datum.d,
-        );
-        return (time) => {
-          element.a = interpolateA(time);
-          element.d = interpolateD(time);
-          const curve = d3.range(xScale(element.d), xScale(0), -1).map((range) => {
-            return {
-              d: xScale.invert(range),
-              v: HTDMath.adk2v(
-                element.a,
-                element.d - xScale.invert(range),
-                this.k,
-              ),
-            };
-          });
-          return line(curve);
-        };
-      });
-    optionUpdate.select('.curve .path.touch').transition()
+    optionMerge.filter((datum) => { return datum.label === 's'; })
+      .raise();
+    optionMerge.filter((datum) => { return datum.label === 'l'; })
+      .lower();
+    // Fill
+    optionUpdate.select('.fill .region').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate
@@ -1095,10 +1230,11 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
               ),
             };
           });
-          return line(curve);
+          return line([...curve, {d: 0, v: 0}, {d: element.d, v: 0}]);
         };
       });
-    optionUpdate.select('.bar .line').transition()
+    // Bar
+    optionUpdate.selectAll('.bar .line').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate
@@ -1138,71 +1274,66 @@ export default class HTDCurves extends DecidablesMixinResizeable(DiscountableEle
           return `${yScale(element.a)}`;
         };
       });
-    optionUpdate.select('.bar .line.touch').transition()
+    // Point
+    optionUpdate.selectAll('.point').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate
           ? (transitionDuration * 2)
           : transitionDuration))
       .ease(d3.easeCubicOut)
-      .attrTween('x1', (datum, index, elements) => {
-        const element = elements[index];
-        const interpolateD = d3.interpolate(
-          (element.d !== undefined) ? element.d : datum.d,
-          datum.d,
-        );
-        return (time) => {
-          element.d = interpolateD(time);
-          return `${xScale(element.d)}`;
-        };
-      })
-      .attrTween('x2', (datum, index, elements) => {
+      .attrTween('transform', (datum, index, elements) => {
         const element = elements[index];
         const interpolateD = d3.interpolate(
           (element.d !== undefined) ? element.d : datum.d,
           datum.d,
         );
-        return (time) => {
-          element.d = interpolateD(time);
-          return `${xScale(element.d)}`;
-        };
-      })
-      .attrTween('y2', (datum, index, elements) => {
-        const element = elements[index];
         const interpolateA = d3.interpolate(
           (element.a !== undefined) ? element.a : datum.a,
           datum.a,
         );
         return (time) => {
+          element.d = interpolateD(time);
           element.a = interpolateA(time);
-          return `${yScale(element.a)}`;
+          return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
         };
       });
-    optionUpdate.select('.point').transition()
+    optionMerge.select('.point .label')
+      .text((datum) => { return datum.label; });
+    // Curve
+    optionUpdate.selectAll('.curve .path').transition()
       .duration(this.drag
         ? 0
         : (this.firstUpdate
           ? (transitionDuration * 2)
           : transitionDuration))
       .ease(d3.easeCubicOut)
-      .attrTween('transform', (datum, index, elements) => {
+      .attrTween('d', (datum, index, elements) => {
         const element = elements[index];
-        const interpolateD = d3.interpolate(
-          (element.d !== undefined) ? element.d : datum.d,
-          datum.d,
-        );
         const interpolateA = d3.interpolate(
           (element.a !== undefined) ? element.a : datum.a,
           datum.a,
         );
+        const interpolateD = d3.interpolate(
+          (element.d !== undefined) ? element.d : datum.d,
+          datum.d,
+        );
         return (time) => {
-          element.d = interpolateD(time);
           element.a = interpolateA(time);
-          return `translate(${xScale(element.d)}, ${yScale(element.a)})`;
+          element.d = interpolateD(time);
+          const curve = d3.range(xScale(element.d), xScale(0), -1).map((range) => {
+            return {
+              d: xScale.invert(range),
+              v: HTDMath.adk2v(
+                element.a,
+                element.d - xScale.invert(range),
+                this.k,
+              ),
+            };
+          });
+          return line(curve);
         };
       });
-    optionMerge.select('.point .label')
-      .text((datum) => { return datum.label; });
     //  EXIT
     // NOTE: Could add a transition here
     optionUpdate.exit().remove();