image fader

<!DOCTYPE html>
<meta charset="utf-8">
<style>

line {
  stroke: #000;
  stroke-width: 1.5px;
  stroke-linecap: round;
}

</style>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script>

var imageWrapper = d3.select("body").append("div")
    .style({
      width: width,
      height: height,
      position: 'absolute',
      top: 0,
      left: 0
    });
  d3.json('https://gist.githubusercontent.com/enoex/b08fd043b84230ae0433/raw/c61d3197e1a38f6751f20113b923454941124f77/images.json', function(d){
    d = d[0];
    
    IMAGE_FADE_DELAY = 4000 / d[USERNAME].length;

// preload images
    
    for(var i=0; i<d[USERNAME].length; i++){
   	  imageWrapper.append('img').attr({
      	width: width + 'px',
        height: height + 'px',
      	src: d[USERNAME][i]
      })
      .style({
      	width: width,
        height: height,
        'background-size': 'cover',
        opacity: function(){
      		return i === 0 ? 1 : 0;
        },
        position: 'absolute'
      })
      .transition()
      .duration(IMAGE_FADE_DURATION)
      .delay(i === 0 ? INITIAL_PHANTOM_DELAY : (i * IMAGE_FADE_DELAY) + INITIAL_PHANTOM_DELAY)
      	.style({
        	opacity: 1
      	});
    }
    
 		// Switch images. Fade in / out
    
  });
  
</script>

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