Old school D3 from simpler times

All examples By author By category About

KelvinZCH

Full window Github gist

Wave Packet

This animation is an example for how a wave packet propagates.

forked from pmplewa's block: Wave Packet

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>
  <script>

var margin = {top: 20, right: 10, bottom: 20, left: 10};
    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var svg = d3.select("body")
      .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
      .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
    var envelope = svg.append("path")
      .attr("class", "envelope")
      .attr("opacity", 0.2)
      .style("fill", "#1f77b4");
  
    var signal = svg.append("path")
      .attr("class", "signal")
      .style("fill", "none")
      .style("stroke", "#d62728")
      .style("stroke-width", 3);
  
    var range = d3.range(-10, 10.1, 0.05);
  
    var x = d3.scaleLinear().domain(d3.extent(range)).range([0, width]),
        y = d3.scaleLinear().domain([-1, 1]).range([height, 0]);
  
    var re = d3.line()
      .x(function(d) { return x(d.x); })
      .y(function(d) { return y(d.re); })
      .curve(d3.curveBasis);
  
    var abs = d3.area()
      .x(function(d) { return x(d.x); })
      .y0(function(d) { return y(-d.abs); })
      .y1(function(d) { return y(d.abs); })
      .curve(d3.curveBasis);
  
    function f(x) {
      var f0 = tau;
      return {r: (f0 / Math.sqrt(Math.PI) / tau) * Math.exp(-(t - k1 * x)*(t - k1 * x) / (2 * tau*tau)), phi: (w0 * t - k0 * x)}
    }
  
    var t = 0, // animation time
        dt = 0.05; // time step
  
    var tau = 1, // pulse width
        w0 = 1, // frequency
        k0 = 5, // 1. wavenumber
        k1 = 1; // 2. wavenumber
  
     svg.transition().duration(20).ease(d3.easeLinear)
      .on("start", function repeat() {
  
        t += dt;

if (t > k1 * 10 || t < - k1 * 10) dt *= -1; // reverse direction of motion
  
        var data = range.map(function(x) {
          var y = f(x);
          return { x: x, re: y.r * Math.cos(y.phi), abs: y.r };
        });
  
        envelope
          .datum(data)
          .attr("d", abs);
  
        signal
          .datum(data)
          .attr("d", re);
  
        d3.active(this).transition()
          .on("start", repeat);
      });

</script>
</body>

https://d3js.org/d3.v4.min.js