Joyplot Update Pattern

Use the general update pattern to make a joyplot. Joyplots inspired by Unknown Pleasures album cover.

forked from HarryStevens's block: Joyplot Update Pattern

<!DOCTYPE html>
<html>
<head>
  <style>
    body {
      margin: 0;
    }
    .area {
      fill: steelblue;
    }
    .area:nth-child(odd) {
      fill: tomato;
    }
  </style>
</head>
<body>
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/d3-marcon@2.0.2/build/d3-marcon.min.js"></script>
  <script src="https://unpkg.com/jeezy@1.11.0/lib/jeezy.min.js"></script>
  <script>

var alpha = "abcdefghij".split("");

var m = d3.marcon().top(window.innerHeight / 10).width(window.innerWidth).height(window.innerHeight);

m.render();

var width = m.innerWidth(), height = m.innerHeight(), svg = m.svg();

var y_wrapper = d3.scaleBand()
      .rangeRound([0, height])
      .domain(alpha);

var y = d3.scaleLinear()
      .rangeRound([y_wrapper.bandwidth(), 0])
      .domain([0, 100]);

var x = d3.scaleLinear()
      .range([0, width])
      .domain([1, 100]);

var area = d3.area()
      .x(function(d) { return x(d.day); })
      .y1(function(d) { return y(d.value * 2); })
      .y0(y(0))
      .curve(d3.curveCatmullRom.alpha(0.5));

drawChart(makeData());

d3.interval(function(){
    drawChart(makeData());    
  }, 100);

function drawChart(data){

var area_path = svg.selectAll(".area")
        .data(data, function(d){ return d.id; });

area_path
      .transition()
        .attr("d", function(d){ return area(d.data); });

area_path.enter().append("path")
        .attr("class", "area")
        .attr("transform", function(d) { return "translate(0, " + y_wrapper(d.id) + ")"; })
        .attr("d", function(d){ return area(d.data); })

}

</script>

</body>
</html>

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

https://unpkg.com/d3-marcon@2.0.2/build/d3-marcon.min.js

https://unpkg.com/jeezy@1.11.0/lib/jeezy.min.js