Looping through a set of images using D3js

Question

I have just started to look at D3js and am now getting my head around how SVG works. I am not a designer and I would like to get some of the design team into d3js if I get a simple prototype working.

What I would like is have a list of images which are my data set and then fade in the first image from the set and then 5 seconds later fade it out and then fade in the next image. This would continue looping through the set.

If you can point me to some links or provide some simple code to get me started on my journey then that would be great.

Answer 1

The basic functionality of d3 works just as well with HTML as with SVG. There are extra functions specific to svg, but these all have svg in their name, like d3.svg.axis for drawing chart axes. However, the core concept applies to all elements, with the idea that you create elements to match your dataset.

So, yes, you could create a simple d3 example just using HTML <img> elements. You would want to create a dataset that is a Javascript array with one entry in the array for each image you want to create.

As a simple example, assume that your server has returned a JSON file consisting of an array of objects. Each object has two properties, the image url and the title text. Now, you could use d3's file reading method to read and parse the JSON file, or you could parse it using whichever methods you are most comfortable with. Regardless, the end effect should be about the same as if you had hard-coded it like this:

var dataArray = [{url:"image1.jpeg", title:"First image"},
                 {url:"image2.png", title:"Second image"},
                 {url:"image3.png", title:"Third image"}];

Then you declare an empty d3 selection into which you want to put your <img> elements, and use d3's data-join methods to create the matching elements. You do this by

1. using d3 to select the parent element (that you want all the images to be children of);
2. creating a selectAll selection for the child elements using a CSS selector that will be specific to the elements you're going to create;
3. joining this selection to your data array, which tells d3 that you want to have one element in the selection for each entry in the data array;
4. use the enter() method of the data-bound selection to access the placeholder entries for data values that don't have elements to match, and create them;
5. use the main selection again to set all the attributes of the image elements based on the data that is attached to each

Sample code:

var slides = d3.select("div.slideshowContainer") //1. select parent
      .selectAll("img") //2. select children (all images in the div, none to start)
      .data( dataArray ); //3. bind to the array

slides.enter() //4. access the placeholders
      .append( "img" ) 
       //create an <img> as a child of the parent div, one for each placeholder
      .attr( "class", "slide" ); 
       //set classes and any other attributes that won't change

slides.attr("src", function(d){ return d.url;})
      .attr("title", function(d){ return d.title;});
      //set attributes based on the data object bound to each element
      //when you give a function as the value of an attr() call,
      //d3 will call it with the data object as the first parameter

To get a simple slide-show effect, you want to change the visibility of your slides over time, using a d3 transition:

slides.attr("opacity", 0) //start invisible
      .transition().duration(1000) //schedule a transition to last 1000ms
      .delay(function(d,i){return i*2000;})
        //Delay the transition of each element according to its index
        // in your selection so that it won't start to appear
        // until one second after the last image reached full opacity.
        //The second parameter passed to any function you give to d3 
        // is usually the index of that element within the current selection.
      .attr("opacity", 1); 
        //set the end-value of the transition to full opacity

On it's own, the above code will create a series of images side-by-side that appear one after another, you'd need to adjust your CSS to have them all absolutely positioned one on top of the other inside the container.

That's a quick breeze-through of some very major d3 concepts. Work your way through the tutorials to get more experience.

Most of the tutorial examples use SVG, although the initial example in "Let's make a bar chart" uses coloured <div> elements as the bars, and there are a couple other examples as well. However, all the examples can be useful: just try to just focus on how elements are created and how attributes, styles, and text content are set, without worrying about how the SVG attributes and element types relate to graphical features.