console.clear();

​

var w = 500;

var h = 300;

​

var svg = d3.select("#line")

  .append("svg")

  .attr("width", w)

  .attr("height", h)

  .attr("id", "visualization");

​

var data = d3.range(0, 7.01, .1);

​

function overlapFormula(index) {

  rect1 = {

    left: index,

    right: index + 3,

    top: 0,

    bottom: 10,

  };

  rect2 = {

    left: 3.5,

    right: 6.5,

    top: 0,

    bottom: 10,

  }

  x_overlap = Math.max(0, Math.min(rect1.right, rect2.right) - Math.max(rect1.left, rect2.left));

  y_overlap = Math.max(0, Math.min(rect1.bottom, rect2.bottom) - Math.max(rect1.top, rect2.top));

  overlapArea = x_overlap * y_overlap;

  return overlapArea;

}

​

var x = d3.scaleLinear().domain([0, 10]).range([0, 500]);

var y = d3.scaleLinear().domain([0, 10]).range([0, 300]);

var line = d3.line()

    .x((d, i) => x(i))

    .y(d => y(d))

    .curve(d3.curveLinear);

​

var x2 = d3.scaleLinear().domain([0, 10]).range([0, 500]);

var y2 = d3.scaleLinear().domain([30, 0]).range([0, 300]);

​

var line2 = d3.line()

  .x(d => x2(d))

  .y(d => y2(overlapFormula(d)))

  .curve(d3.curveLinear);

​

var area = d3.area()

  .x( d => x2(d))

  .y0( y(10) )

  .y1( d => y2(overlapFormula(d)) );

​

const line_area = svg.append("path")

  .attr("d", area(data))

  .attr("fill", "green");

​

function repeat(path) {

  path

    .attr("stroke-dasharray", 725 + " " + 725)

    .attr("stroke-dashoffset", 725)

    .transition()

    .ease(d3.easeLinear)

    .duration(7000)

    .attr("stroke-dashoffset", 0)

    .transition()

    .duration(1000)

    .on("end", () => repeat(path));

}

​

const path = svg.append("path")

  .attr("d", line2(data))

  .attr("stroke", "steelblue")

  .attr("stroke-width", "5")

  .attr("fill", "none");

​

const zeroAxis = svg.append("path")

  .attr("d", line(d3.range(11).map(() => 10)))

  .attr("stroke", "black")

  .attr("stroke-width", "2")

  .attr("fill", "none");

​

const box = svg.append("rect")

  .attr("x", x(3.5))

  .attr("y", y(1))

  .attr("width", x(3))

  .attr("height", y(10))

  .attr("fill", "white")

  .attr("fill-opacity", "0")

  .attr("stroke", "black")

  .attr("stroke-width", 2);

​

function moveBox(box) {

  box.transition()

    .duration(7000)

    .attr("transform", `translate(${x(7)}, 0)`)

    .ease(d3.easeLinear)

    .transition()

    .duration(1000)

    .transition()

    .duration(0)

    .attr("transform", `translate(${x(0)}, 0)`)

    .on("end", () => {

    moveBox(box)

  })

}

​

const box2 = svg.append("rect")

  .attr("x", x(0))

  .attr("y", y(1))

  .attr("width", x(3))

  .attr("height", y(10))

  .attr("fill", "white")

  .attr("fill-opacity", "0")

  .attr("stroke", "black")

  .attr("stroke-width", 3)

;

​

moveBox(box2);

repeat(path);