layoutRedo/3scriptRestructured.js
//Creates looping through year interactivity for both the slider and play function
Creates looping through year interactivity for both the slider and play function
Creates looping through year interactivity for both the slider and play function
function loopThrough(year) {
    var year = year
    console.log(year)
    d3.select('#mapTitleDate')
        .text(year)
    d3.selectAll(".label")
        .style("visibility", function() {
            if (this.id.includes(year)) {
                return "visible"
            }
            else { return "hidden" }
        })
        .style('fill', 'white')
    d3.selectAll('.mapImg')
        .style('opacity', function() {
            if (this.src.includes(year)) {
                return "1"
            } else {(console.log(this.src))}
            d3.selectAll('g.tick')
                .select('line') 
                .attr('class', 'not') 
                .style('stroke', 'white')
                .style('stroke-width', .1 + 'px');
            d3.selectAll('g.tick')
                .filter(function(d) {
                    var val = parseTime2(year).toString();
                    return d == val;
                })
                .select('line') 
                .attr('class', 'highlighted') 
                .style('stroke', '#6dc925')
                .style('stroke-width', .5 + 'px');
        })
}
function loopThrough ( year ) { var year = year console . log ( year ) d3 . select ( '#mapTitleDate' ) . text ( year ) d3 . selectAll ( ".label" ) . style ( "visibility" , function ( ) { if ( this . id . includes ( year ) ) { return "visible" } else { return "hidden" } } ) . style ( 'fill' , 'white' ) d3 . selectAll ( '.mapImg' ) . style ( 'opacity' , function ( ) { if ( this . src . includes ( year ) ) { return "1" } else { ( console . log ( this . src ) ) } d3 . selectAll ( 'g.tick' ) . select ( 'line' ) . attr ( 'class' , 'not' ) . style ( 'stroke' , 'white' ) . style ( 'stroke-width' , .1 + 'px' ) ; d3 . selectAll ( 'g.tick' ) . filter ( function ( d ) { var val = parseTime2 ( year ) . toString ( ) ; return d == val ; } ) . select ( 'line' ) . attr ( 'class' , 'highlighted' ) . style ( 'stroke' , '#6dc925' ) . style ( 'stroke-width' , .5 + 'px' ) ; } ) }
Creates looping through year interactivity for both the slider and play function
Creates looping through year interactivity for both the slider and play function
//grab the tick line //style with a custom class and CSS //grab the tick line //style with a custom class and CSS