timeline.txt

queue()
	.defer(d3.csv, "data/timeline.csv")
	.await(function(err, timelinedata){
		renderTimeline(timelinedata)
	})

function renderTimeline(timelinedata){
    
    //Make a section tag for each year in the timeline
	var sections = d3.select('#timelinebox')
		.selectAll('section.yearblock')
		.data(timelinedata)
		.enter().append('section')
		.attr('class', 'yearblock copywidth')
		.each(function(d,i){
				d3.select(this).append('div.tlyear').html(ƒ('year'))
		})
    
    //Build HTML for the left /  Hillary side
	sections.append('div.tlcol.lefty')
		.html(function(d,i){
			
		 	//If it's the first section, add a title
			var string = (i===0)? '<h2>Hillary Rodham Clinton</h2>' : ''
				
			string += addEventHTML(d,'hillary_1', d.year)
			string += addEventHTML(d,'hillary_2', d.year)
				
			//Or the one line solution
			//string += d3.range(2).map(function(index){ return addEventHTML(d,'hillary_'+(index+1), d.year) }).join(' ')
				
			return string
				
		})
  
    	//Build HTML for the right / Women's Movement side
	sections.append('div.tlcol.righty')
		.html(function(d,i){
			
			//If it's the first section, add a title
			var string = (i===0)? '<h2>The Women\’s Movement</h2>' : ''
				
			string += addEventHTML(d,'women_1', d.year)
			string += addEventHTML(d,'women_2', d.year)
			string += addEventHTML(d,'women_3', d.year)
			string += addEventHTML(d,'women_4', d.year)
				
			//Or the one line solution
			//string += d3.range(4).map(function(index){ return addEventHTML(d,'women_'+(index+1), d.year) }).join(' ')
				
			return string
			
	})
}


	function addEventHTML(d,sidenum,year){
		var string = ''
		
		//Check to make sure that pullquotes aren't blank
		if (d[sidenum].trim() == '' && d[sidenum+'_type']!='photo') return string
    
    		//Get and clean the caption or quote from the data
		var note = d[sidenum].trim().replace(/[�]/g,'')
		
		if(d[sidenum+'_type']=='photo'){

			//If there is no caption, leave blank, else add the element 
			var noted = note==''? '' : '<p>'+note+'</p>'
			string += '<div class="tlitem '+d[sidenum+'_type']+'"><img src="img/'+sidenum+'_'+year+'.jpg" />'+noted+'</div>'

		}else{

			string += '<div class="tlitem '+d[sidenum+'_type']+'"><p>'+note+'</p></div>'

		}

		return string
	}