How to use the d3-ease.easeQuad function in d3-ease

To help you get started, we’ve selected a few d3-ease 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 mozilla / sops / vendor / github.com / hashicorp / vault / ui / app / components / http-requests-bar-chart.js View on Github external
.tickSize(width - margin.left - margin.right);

    barChartSVG.select('.gridlines').call(gridlines);

    // render the bars
    const bars = barsContainer.selectAll('.bar').data(parsedCounters, c => +c.start_time);

    const barsEnter = bars
      .enter()
      .append('rect')
      .attr('class', 'bar');

    const t = d3Transition
      .transition()
      .duration(DURATION)
      .ease(d3Ease.easeQuad);

    bars
      .merge(barsEnter)
      .attr('x', counter => xScale(counter.start_time))
      // set the initial y value to 0 so the bars animate upwards
      .attr('y', () => yScale(0))
      .attr('width', xScale.bandwidth())
      .transition(t)
      .delay(function(d, i) {
        return i * BASE_SPEED;
      })
      .attr('height', counter => height - yScale(counter.total))
      .attr('y', counter => yScale(counter.total));

    bars.exit().remove();
github DefinitelyTyped / DefinitelyTyped / d3-ease / d3-ease-tests.ts View on Github external
/**
 * Typescript definition tests for d3/d3-ease module
 *
 * Note: These tests are intended to test the definitions only
 * in the sense of typing and call signature consistency. They
 * are not intended as functional tests.
 */

import * as d3Ease from 'd3-ease';

let t_in: number = 0.5;
let t_out: number;

t_out = d3Ease.easeLinear(t_in);

t_out = d3Ease.easeQuad(t_in);
t_out = d3Ease.easeQuadIn(t_in);
t_out = d3Ease.easeQuadOut(t_in);
t_out = d3Ease.easeQuadInOut(t_in);

t_out = d3Ease.easeCubic(t_in);
t_out = d3Ease.easeCubicIn(t_in);
t_out = d3Ease.easeCubicOut(t_in);
t_out = d3Ease.easeCubicInOut(t_in);


let easePolyFactory: d3Ease.PolynomialEasingFactory;

easePolyFactory = d3Ease.easePoly;
easePolyFactory = d3Ease.easePoly.exponent(2);
t_out = easePolyFactory(t_in);
github sghall / resonance / docs / src / pages / demos / node-group / Example3 / Sunburst / Chart.js View on Github external
this.transition = interval(elapsed => {
        const t = easeQuad(elapsed < duration ? elapsed / duration : 1)

        this.x.domain(xd(t))
        this.y.domain(yd(t)).range(yr(t))

        if (t >= 1) {
          this.transition.stop()
          this.transition = null
        }
      })
    }
github sghall / resonance / docs / src / routes / reduxExamples / webpackSunburst / components / index.js View on Github external
this.transition = timer((elapsed) => {
        const t = easeQuad(elapsed < duration ? (elapsed / duration) : 1);

        x.domain(xd(t));
        y.domain(yd(t)).range(yr(t));

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