How to use the d3-interpolate.interpolateObject function in d3-interpolate

To help you get started, we’ve selected a few d3-interpolate examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github globeandmail / chart-tool / src / js / charts / components / annotation.js View on Github external
export function calculateMidpoint(d, pct) {

  const sign = d[1].x > d[0].x ? -1 * Math.sign(pct) : 1 * Math.sign(pct),
    // plots a point at the center of a line between start and end points
    minMid = {
      x: ((d[1].x - d[0].x) / 2) + d[0].x,
      y: ((d[1].y - d[0].y) / 2) + d[0].y
    },
    // plots a point at the 90deg point (i.e. an isoceles right triangle) between start and end points
    maxMid = {
      x: minMid.x + (sign * ((d[1].y - d[0].y) / 2)),
      y: minMid.y + (sign * -1 * ((d[1].x - d[0].x) / 2))
    };

  // interpolate between two positions
  return interpolateObject(minMid, maxMid)(Math.abs(pct));
}
github sghall / react-d3-transitions / examples / alphabetExample / src / components / Text.js View on Github external
isEntering({node: {xVal}}, {node}) {

    node.setAttribute('x', xVal);

    let interp = interpolateObject({opacity: 1e-6, y: 0}, {opacity: 1, y: 200});

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      let {opacity, y } = interp(t);
      node.setAttribute('y', y);
      node.setAttribute('opacity', opacity);
      if (t === 1) {
        this.transition.stop();
      }
    });
  }
github contiamo / operational-ui / packages / visualizations / lib / PieChart / renderers / abstract_renderer.js View on Github external
AbstractRenderer.prototype.removeArcTween = function (d, i) {
        var _this = this;
        var s0;
        var e0;
        s0 = e0 = this.angleRange()[1];
        var f = d3_interpolate_1.interpolateObject({ endAngle: d.endAngle, startAngle: d.startAngle }, { endAngle: e0, startAngle: s0 });
        return function (t) { return _this.computed.arc(f(t)); };
    };
    AbstractRenderer.prototype.labelTranslate = function (d) {
github sghall / subunit / src / transition / attr.js View on Github external
z: this[name].z,
    };

    if (!b.x) {
      delete a.x;
    }

    if (!b.y) {
      delete a.y;
    }

    if (!b.z) {
      delete a.z;
    }

    var i = interpolateObject(a, b);

    function tween(t) {
      var update = i(t);

      function updater(d) {
        this[name][d] = update[d];
      }

      Object.keys(update).forEach(updater.bind(this));
    }

    return tween.bind(this);
  };
}
github sghall / react-d3-transitions / examples / alphabetExample / src / components / Text.js View on Github external
isExiting({node: {udid}, removeItem}, {node}) {

    let interp = interpolateObject({y: 200, opacity: 1}, {y: 400, opacity: 1e-6});

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      let { y, opacity } = interp(t);
      node.setAttribute('y', y);
      node.setAttribute('opacity', opacity);
      if (t === 1) {
        this.transition.stop();
        removeItem(udid);
      }
    }); 
  }
github contiamo / operational-visualizations / src / Sunburst / renderer.ts View on Github external
const oldPrecedingSibling: HierarchyDatum = (filter as WithConvert)
      .convert({ cap: false })(
        (sibling: HierarchyDatum, i: number) => i < oldSiblingIndex && !!this.findDatum(currentSiblings, sibling),
      )(oldSiblings)
      .pop();
    const precedingSibling = this.findDatum(this.data, oldPrecedingSibling);
    const parent = this.findAncestor(this.data.concat([this.dataHandler.topNode]), d);

    let x: number = 0;
    if (precedingSibling) {
      x = precedingSibling.x1;
    } else if (parent) {
      x = parent.x0;
    }

    const f = d3InterpolateObject({ x0: x, x1: x }, d);
    return (t: number) => this.arc(f(1 - t)) as string;
  }
github sghall / react-d3-transitions / examples / barChartExample / src / components / Bar.js View on Github external
isUpating({yScale, node: {xVal, yVal}, duration}, next, {node, rect, text}) {

    let interp0 = interpolateTransformSvg(`translate(0,${yVal})`, `translate(0,${next.node.yVal})`);

    let begVals = {w: xVal, h: yScale.bandwidth(), x: xVal - 3};
    let endVals = {w: next.node.xVal, h: next.yScale.bandwidth(), x: next.node.xVal - 3};
    let interp1 = interpolateObject(begVals, endVals);

    node.setAttribute('opacity', 1);

    this.transition = timer(elapsed => {
      let t = elapsed < duration ? (elapsed / duration): 1;
      node.setAttribute('transform', interp0(t));

      let {w, h, x} = interp1(t);
      rect.setAttribute('width', w);
      rect.setAttribute('height', h);
      text.setAttribute('x', x);
      if (t === 1) {
        this.transition.stop();
      }
    });
  }
github contiamo / operational-ui / packages / visualizations / lib / PieChart / renderers / renderer_utils.js View on Github external
return function (d, i) {
        var innerRadius = computed.rInner;
        var outerRadius = computed.r;
        var f = d3_interpolate_1.interpolateObject({ endAngle: d.endAngle, startAngle: d.startAngle }, { innerRadius: innerRadius, outerRadius: outerRadius, endAngle: angleRange[1], startAngle: angleRange[1] });
        return function (t) { return computed.arc(f(t)); };
    };
};
github contiamo / operational-ui / packages / visualizations / lib / PieChart / renderers / donut.js View on Github external
Donut.prototype.removeArcTween = function (d, i) {
        var _this = this;
        var s0;
        var e0;
        s0 = e0 = ANGLE_RANGE[1];
        var f = d3_interpolate_1.interpolateObject({ endAngle: d.endAngle, startAngle: d.startAngle }, { endAngle: e0, startAngle: s0 });
        return function (t) { return _this.computed.arc(f(t)); };
    };
    Donut.prototype.centerDisplayString = function () {
github sghall / resonance / docs / src / routes / examples / statesByAge / components / ManagedBars.js View on Github external
onUpdate({ yScale, node: { xVal, yVal }, duration }, next) {
    const beg = this.node.getAttribute('transform');
    const end = `translate(0,${next.node.yVal})`;
    const interp0 = interpolateTransformSvg(beg, end);

    const begVals = { w: xVal, h: yScale.bandwidth(), x: xVal - 3 };
    const endVals = { w: next.node.xVal, h: next.yScale.bandwidth(), x: next.node.xVal - 3 };
    const interp1 = interpolateObject(begVals, endVals);

    this.node.setAttribute('opacity', 1);

    this.transition = timer((elapsed) => {
      const t = elapsed < duration ? (elapsed / duration) : 1;
      const { w, h, x } = interp1(t);

      this.node.setAttribute('transform', interp0(t));
      this.rect.setAttribute('width', w);
      this.rect.setAttribute('height', h);
      this.text.setAttribute('x', x);

      if (t === 1) {
        this.transition.stop();
      }
    });