78 Years of Batman Logos

The logo set is well expanded from 75 Years of Batman. Additionally, the lower wings have all been redesigned: the nodes in the two-wing-point layouts are no longer equally divided. Instead, the sections next to the tail have 5 nodes, including the 2 surrounding cusps. The sections next to the outer wings have 9 nodes. This allows for more object-constancy when transitioning between 2-wing-points and 3-wing-points (eg. the 1989 sigil and title).

This time, a tsv file contains data about each logo, such as its year of use, the title of the piece in which it was used, as well as a comment (such as artist or actor). Thanks to Doni for prodding.

Changes

Bat Symbols

Several new ones have been added:

Wing-point Transitions

The transitions between symbols have been cleaned up further. In "75 Years.." the wing points were appearing and disappearing into air. For example when switcxhing between the two 1989 Michael Keaton movie symbols, one wingpoint disappears and two appear.

In this new set, I've gone for increased object constancy. The inside wing point (closest to the tail) will always remain. The second will appear and disappear from the contours.

This is still not ideal, as the wingpoints should ideally fold in and out from other wingpoints. However, the resultant transitions are very nasty.

<!DOCTYPE html>
<head>
  <meta charset="UTF-8">
  <title>InfoBat</title>

function mainfn(sigils) {
      var logos = d3.map({})
        , paths = []
      ;
      d3.xml("batman-logos.svg")
          .then(function(xml) {
              Array.from(xml.getElementsByTagName('path')).reverse()
                  .forEach(function(d) {
                      logos.set([d.getAttribute('id')], d.getAttribute('d'));
                    })

;
              d3.select("path#batlogo")
                  .call(animate)
              ;
            })
      ;

var duration = 2500
        , ease = d3.easeQuad
      ;
      function animate(sel) {
          var start = sigils.shift()
            , end = sigils[0];
          sigils.push(start);

d3.selectAll(".name, .year, .medium, .location, .comment")
            .transition()
              .delay(duration)
              .each(function() {
                  var self = d3.select(this);
                  self.text(function() { return end[self.attr("class")]; });
                })
          ;

sel.datum({start, end})
            .transition()
              .duration(duration)
              .ease(ease)
              .attrTween("d", function(d) {
                  return d3.interpolate(logos.get(d.start.id), logos.get(d.end.id));
                })
              .on("end", function() { sel.call(animate); })
          ;
      } // animate()
  } // mainfn()
</script>

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