Timeline Bars

README.md

Putting a bunch of dates or times onto a timeline bar, like we did in the Parler app: https://projects.propublica.org/parler-capitol-videos/

index.html

<script src="https://d3js.org/d3.v5.min.js"></script>

<style type="text/css">
#timebar {
  width: 60%;
  padding: 10px 10px 0px;
  cursor: pointer;
  position: relative;
  margin: auto;
}

#timebar > div {
  width: 0.1%;
  height: 30px;
  position: absolute;
  background: rgba(0,0,0,.5)
}
</style>



<div id="timebar"></div>


<script type="text/javascript">

var timebar = d3.select('#timebar');

// SET THE START AND END TIME, THESE ARE THE BOUNDARIES OF THE TIMEBAR
var startTime = new Date('2021-01-06 12:00:00');
var endTime = new Date('2021-01-06 18:00:00');

// GET THE DATA
d3.csv('http://propublica.s3.amazonaws.com/projects/data/timebar_data.csv')
	.then(function(data) {
// CALCULTATE THE TIMEBAR LOCATION BASED ON START AND END TIME
	data.forEach(function(d) {
		var thisDate = new Date(d.date);
		var diff = thisDate - startTime;
		var timebarLocation = (diff * 100) / (endTime - startTime);
		d.timebarLocation = timebarLocation
	});

// FILTER OUT ALL THE DATA POINTS THAT FALL OUTSIDE OF START AND END TIME
	var fmtData = data.filter(function(d) {
		return d.timebarLocation >= 0 && d.timebarLocation <= 100
	});


// DRAW ALL THE LINES
	timebar
	  .selectAll('div')
	  .data(fmtData)
	  .enter()
	  .append('div')
	  .style('left', function(d) {
	    return d.timebarLocation + '%';
	  });


})	


</script>

thumbnail.png