JSFiddle - React, Tailwind, and code Playground

by walker123

HTML

<svg width="800" height="80">
  <g id="wrapper" transform="translate(40, 40)">
  </g>
</svg>

CSS

body {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 10px;
  color: #333;
}
text {
	fill: red;
	text-anchor: middle;
}

JavaScript

var timeScale = d3.scaleTime()
	.domain([new Date("2018-05-01"), new Date("2018-06-01")])
	.range([0, 900]);

var date = new Date(); // Now
date.setDate(date.getDate() + 30);

var getDaysArray = function(start, end) {
    for(var arr=[],dt=new Date(start); dt<=new Date(end); dt.setDate(dt.getDate()+1)){
        arr.push(new Date(dt));
    }
    return arr;
};


var myData = getDaysArray(new Date("2018-05-01"),new Date("2018-06-01"));


d3.select('#wrapper')
	.selectAll('rect')
	.data(myData)
	.join('rect')
	.attr('x', 1)
	.attr('y', 8)
 .attr("width", function (d) { 	return timeScale(d);})
 .attr("height", 10);




d3.select('#wrapper')
	.selectAll('text')
	.data(myData)
	.join('text')
	.attr('x', function(d) {
		return timeScale(d);
	})
	.text(function(d) {
		return d.toDateString();
	});

//Second time

d3.select('#wrapper')
	.selectAll('rect')
	.data(myData)
	.join('rect')
	.attr('x', 1)
	.attr('y', 10)
 .attr("width", function (d) { 	return timeScale(d);})
 .attr("height", 10);




d3.select('#wrapper')
	.selectAll('text')
	.data(myData)
	.join('text')
	.attr('x', function(d) {
		return timeScale(d);
	})
	.text(function(d) {
		return d.toDateString();
	});