Skip to content

Instantly share code, notes, and snippets.

@aleszu aleszu/timeline.txt
Created Sep 2, 2015

Embed
What would you like to do?
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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.