seemantk · September 30, 2018 17:31
diff --git a/README.md b/README.md
diff --git a/batman-logos.svg b/batman-logos.svg
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <head>
  <meta charset="UTF-8">
  <title>HaloBat</title>

  <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

  <style>
    body {
      font-family: 'Roboto', sans-serif;
      background-color: yellow;
    }
    h2,h3,h4 {
      margin-bottom: 0;
    }
    h2,h3 {
      margin-top: 0;
    }
    svg {
      height: 80%;
    }
    .name {
      text-transform: uppercase;
      font-variant: small-caps;
    }
    .medium {
      text-transform: uppercase;
    }
    .comment {
      font-style: italic;
    }
  </style>
 </head>

 <body>
  <div class="batsymbols">
    <svg width="900" height="477" viewBox="0 0 150 80">
      <path id="bat"></path>
    </svg>
    <h2><span class="name"></span> (<span class="year"></span>)</h2>
    <h4><span class="medium"></span>: <span class="location"></span> <span class="comment"></span></h4>
  </div><!--.batsymbols-->

 <script src="https://d3js.org/d3.v5.min.js"></script>
 <script>
  d3.tsv("sigils.tsv", ingest)
      .then(mainfn)
  ;
  function ingest(row) {
      row.year = row.year || row.id.split('-')[0];
      return row;
  } // ingest()

  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#bat")
                  .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")
              .call(crossfade)
          ;
          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); })
          ;


          function crossfade(sel) {
              sel
                .transition()
                  .delay(duration)
                  .each(function() {
                      d3.select(this)
                          .text(function() { return end[this.className]; })
                      ;
                    })
              ;
          } // crossfade()
      } // animate()

  } // mainfn()
 </script>
diff --git a/pathnodeorder.gif b/pathnodeorder.gif
diff --git a/sigils.tsv b/sigils.tsv
 id	year	name	location	medium	comment
 1940-comics-title		Batman	Title Logo	Comics
 1949-movie-sigil		Batman Movie Serials	Batman's Chest Sigil	Movies	as worn by Robert Lowery
 1957-comics-title		Batman	Title Logo	Comics
 1964-comics-sigil		Batman Comic	Batman's Chest Sigil	Comics	first yellow oval
 1966-tv-sigil		Batman	Batman's Chest Sigil	TV Show	as worn by Adam West
 1970-comics-sigil		Batman	Batman's Chest Sigil	Comics	as drawn by Neal Adams
 1986-novel-sigil-1		The Dark Knight Returns, Book 1	Batman's Chest Sigil	Graphic novel	as drawn by Frank Miller
 1987-comics-sigil		Batman	Batman's Chest Sigil	Comic	as drawn by Norm Breyfogle
 1989-movie-logo		Batman	Title Logo	Movie
 1989-movie-sigil		Batman	Batman's Chest Sigil	Movie	as worn by Michael Keaton
 1991-comics-title		Batman Red Rain	Title Logo	Comics	as drawn by Kelly Jones
 1992-movie-sigil		Batman Returns	Batman's Chest Sigil	Movie	as worn by Michael Keaton
 1993-cartoon-title		Batman The Animated Series	Title Logo	Cartoon
 1989-movie-logo	1993	Batman The Animated Series	Batman's Chest Sigil	Cartoon
 1993-comics-sigil		Speeding Bullets	Superman's Chest Sigil	Comics	as drawn by Eduardo Barreto
 1994-cartoon-title		The New Adventures of Batman and Robin	Title Logo	Cartoon
 1995-movie-promo		Batman Forever	Promotional Logo	Movie
 1995-movie-sigil		Batman Forever	Batman's Chest Sigil	Movie	as worn by Val Kilmer
 1996-comics-title		Batman	Title Logo	Comics
 1997-movie-sigil		Batman & Robin	Batman's Chest Sigil	Movie	as worn by George Clooney
 2004-cartoon-sigil		The Batman	Batman's Chest Sigil	Cartoon
 2006-comics-title		Batman  Title logo  Comics
 2008-tv-sigil		Brave and the Bold	Batman's Chest Sigil	Cartoon
 2009-comics-sigil		Batman RIP	Batman's Chest Sigil	Comics	as drawn by Tony Daniel
 2009-comics-title		Batman and Robin	Title Logo	Comics
 2010-comics-sigil		Flashpoint	Batman's Chest Sigil	Comics	alternate universe
 2014-cartoon-sigil		DC Animated Movies	Batman's New Chest	Sigil	Animated Show
 2014-75anniv-logo		75th Anniversary	Promotional Logo  Comics
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<head>
	<meta charset="UTF-8">
	<title>HaloBat</title>

	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">

	<style>
	body {
	font-family: 'Roboto', sans-serif;
	background-color: yellow;
	}
	h2,h3,h4 {
	margin-bottom: 0;
	}
	h2,h3 {
	margin-top: 0;
	}
	svg {
	height: 80%;
	}
	.name {
	text-transform: uppercase;
	font-variant: small-caps;
	}
	.medium {
	text-transform: uppercase;
	}
	.comment {
	font-style: italic;
	}
	</style>
	</head>

	<body>
	<div class="batsymbols">
	<svg width="900" height="477" viewBox="0 0 150 80">
	<path id="bat"></path>
	</svg>
	<h2><span class="name"></span> (<span class="year"></span>)</h2>
	<h4><span class="medium"></span>: <span class="location"></span> <span class="comment"></span></h4>
	</div><!--.batsymbols-->

	<script src="https://d3js.org/d3.v5.min.js"></script>
	<script>
	d3.tsv("sigils.tsv", ingest)
	.then(mainfn)
	;
	function ingest(row) {
	row.year = row.year \|\| row.id.split('-')[0];
	return row;
	} // ingest()

	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#bat")
	.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")
	.call(crossfade)
	;
	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); })
	;


	function crossfade(sel) {
	sel
	.transition()
	.delay(duration)
	.each(function() {
	d3.select(this)
	.text(function() { return end[this.className]; })
	;
	})
	;
	} // crossfade()
	} // animate()

	} // mainfn()
	</script>
	id year name location medium comment
	1940-comics-title Batman Title Logo Comics
	1949-movie-sigil Batman Movie Serials Batman's Chest Sigil Movies as worn by Robert Lowery
	1957-comics-title Batman Title Logo Comics
	1964-comics-sigil Batman Comic Batman's Chest Sigil Comics first yellow oval
	1966-tv-sigil Batman Batman's Chest Sigil TV Show as worn by Adam West
	1970-comics-sigil Batman Batman's Chest Sigil Comics as drawn by Neal Adams
	1986-novel-sigil-1 The Dark Knight Returns, Book 1 Batman's Chest Sigil Graphic novel as drawn by Frank Miller
	1987-comics-sigil Batman Batman's Chest Sigil Comic as drawn by Norm Breyfogle
	1989-movie-logo Batman Title Logo Movie
	1989-movie-sigil Batman Batman's Chest Sigil Movie as worn by Michael Keaton
	1991-comics-title Batman Red Rain Title Logo Comics as drawn by Kelly Jones
	1992-movie-sigil Batman Returns Batman's Chest Sigil Movie as worn by Michael Keaton
	1993-cartoon-title Batman The Animated Series Title Logo Cartoon
	1989-movie-logo 1993 Batman The Animated Series Batman's Chest Sigil Cartoon
	1993-comics-sigil Speeding Bullets Superman's Chest Sigil Comics as drawn by Eduardo Barreto
	1994-cartoon-title The New Adventures of Batman and Robin Title Logo Cartoon
	1995-movie-promo Batman Forever Promotional Logo Movie
	1995-movie-sigil Batman Forever Batman's Chest Sigil Movie as worn by Val Kilmer
	1996-comics-title Batman Title Logo Comics
	1997-movie-sigil Batman & Robin Batman's Chest Sigil Movie as worn by George Clooney
	2004-cartoon-sigil The Batman Batman's Chest Sigil Cartoon
	2006-comics-title Batman Title logo Comics
	2008-tv-sigil Brave and the Bold Batman's Chest Sigil Cartoon
	2009-comics-sigil Batman RIP Batman's Chest Sigil Comics as drawn by Tony Daniel
	2009-comics-title Batman and Robin Title Logo Comics
	2010-comics-sigil Flashpoint Batman's Chest Sigil Comics alternate universe
	2014-cartoon-sigil DC Animated Movies Batman's New Chest Sigil Animated Show
	2014-75anniv-logo 75th Anniversary Promotional Logo Comics