d3 timeline

by Rajesh Danabal

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
	<svg class="chart"></svg>

CSS

.chart-span {
      fill: #333;
      opacity: 0.5;
    }

JavaScript

var data = [{
		  'begin': new Date("1/1/15").getTime(),
		  'end': new Date("12/31/15").getTime()
		}];

		var margin = {
		    top: 20,
		    right: 30,
		    bottom: 50,
		    left: 40
		  },
		  width = 600 - margin.left - margin.right,
		  height = 100 - margin.top - margin.bottom,
		  xScale = d3.scaleTime()
		  .range([0, width])
		  .nice(),
		  xAxis = d3.axisBottom(xScale),
		  minX = d3.min(data, function(d) {
		    return d['begin'];
		  }),
		  maxX = d3.max(data, function(d) {
		    return d['end'];
		  });

		xScale.domain([minX, maxX]);


		var chart = d3.select('.chart')
		  .attr('width', width + margin.left + margin.right)
		  .attr('height', height + margin.left + margin.right)
		  .append('g')
		  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

		/* 		// Add x axis
				chart.append("g")
				  .attr("class", "axis axis-x");
				
				chart.select('.axis-x')
				  .attr("transform", "translate(0," + height + ")")
				  .call(xAxis); */

		var ticks = xScale.ticks();
		console.log("ticks", ticks);

		var bandWidth = xScale(ticks[1]) - xScale(ticks[0]);
		console.log("bandWidth", bandWidth);

		// Add spans
		var span = chart.selectAll('.chart-span')
		  .data(ticks)
		  .enter().append('rect')
		  .classed('chart-span', true)
		  .attr('x', function(d) {
		    debugger;
		    console.log(xScale(d));
		    return xScale(d);
		  })
		  .attr('y', function(d) {
		    console.log(d);
		    return height;
		  })
		  .attr('width', function(d) {
		    return (bandWidth - 2);
		  })
		  .attr('height', function(d) {
		    return 25;
		  });

		var text = chart.selectAll('.chart-text')
		  .data(ticks)
		  .enter().append('text')
		  .classed('chart-text', true)
		  .attr('x', function(d) {
		    console.log(xScale(d));
		    return xScale(d) + (bandWidth / 2);
		  })
		  .attr('y', function(d) {
		    console.log(d);
		    return height + (25 / 1.5);
		  }).text(function(d) {


		    return d.getMonth() + 1;
		  });