source/dataset-worldviews/person-photos.js

function createPhotoScroller(){

    var base_path = 'img/woman_washing_clothes.jpeg'
    var data = [
        {
            'path': 'img/labels_1.svg',
            'alt': 'Image of a woman washing clothes with bounding boxes including \'person\', and \'bucket\'',
            'x': 198,
            'y': 30,
            'width': 305,
            'height': 400,
        },

             {
            'path': 'img/labels_4.svg',
            'alt': 'Image of a woman washing clothes with bounding boxes including \'parent\', and \'laundry\'',
            'x': 110,
            'y': 60,
            'width': 450,
            'height': 470,
        },


        {
            'path': 'img/labels_2.svg',
            'alt': 'Image of a woman washing clothes with bounding boxes including \'hair_boho\', and \'decor_outdoor_rustic\'',
            'x': 198,
            'y': -35,
            'width': 395,
            'height': 500
        },  

                    {
            'path': 'img/labels_3.svg',
            'alt': 'Image of a woman washing clothes with one bounding box around her, labeled \'pedestrian\'',
            'x': 190,
            'y': 65,
            'width': 190,
            'height': 315
        },   
    ];


    var photoIndex = 0;

    var c = d3.conventions({
      sel: d3.select('.person-photos').html(''),
      height: 550
    })

    var photoSel = c.svg.append('svg:image')
        .attr('x', 50)
        .attr('y', 50)
        .attr('width', 700)
        .attr('height', 500)
        .attr('xlink:href', base_path)

    var photoSel = c.svg.appendMany('svg:image', data)
        .attr('x', d => d.x)
        .attr('y', d => d.y)
        .attr('width', d => d.width)
        .attr('height', d => d.height)
        .attr('xlink:href', d => d.path)
        .attr('alt', d => d.alt)


    var buttonHeight = 35
    var buttonWidth = 130

    var buttonSel = c.svg.appendMany('g.photo-button', data)
        .translate((d,i) => [(i * 170) + 100, 0])
        .at({
            // class: "dropdown"
        })
        .on('click', function(d, i){
            photoIndex = i
            setActiveImage()
            timer.stop();
        })

    buttonSel.append('rect')
        .at({
            height: buttonHeight,
            width: buttonWidth,
            // fill: '#fff'
        })

    buttonSel.append('text')
        .at({
            textAnchor: 'middle',
            // dominantBaseline: 'central',
            dy: '.33em',
            x: buttonWidth/2,
            y: buttonHeight/2,
            class: "monospace"
        })
        .text((d,i) => 'ground truth ' + (i + 1))

    // buttonSel.classed('dropdown', true);

    if (window.__photoPersonTimer) window.__photoPersonTimer.stop()
    var timer = window.__photoPersonTimer = d3.interval(() => {
        photoIndex = (photoIndex + 1) % data.length;
        setActiveImage()
    }, 2000)

    function setActiveImage(i){
        photoSel.st({opacity: (d, i) => i == photoIndex ? 1 : 0 })
        buttonSel.classed('is-active-button', (d, i) => i == photoIndex)
    }
    setActiveImage()
}

createPhotoScroller();