JSFiddle - React, Tailwind, and code Playground

by mizobata

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<body>
  <div id="timeline"></div>
  <script src="./script.js"></script>
</body>
</html>

JavaScript

const data = [
  {
    name: 'A',
    start: new Date('2017/12/01 00:00:00'),
    end: new Date('2017/12/01 01:00:00')
  },
  {
    name: 'B',
    start: new Date('2017/12/01 00:00:00'),
    end: new Date('2017/12/01 00:30:00')
  },
  {
    name: 'C',
    start: new Date('2017/12/01 00:01:00'),
    end: new Date('2017/12/01 00:50:00')
  }
];

const svg = d3.select('#timeline').append('svg').attr('width', '800px').attr('height', '400px');

const xScale = d3.scaleTime()
.domain([
  new Date('2017/12/01 0:00:00:00'),
  new Date('2017/12/01 1:10:00:00')
])
.range([0, 800]);

const xAxis = d3.axisTop(xScale).ticks(d3.timeHour, 1).tickFormat(d3.timeFormat('%H:00'));

const timeLineGraphics = svg.append('g').attr('transform', 'translate(20, 40)').call(xAxis);

const yScale = d3.scaleBand().domain(data.map(function (d) { return d.name })).rangeRound([0, 300]);

const yAxis = d3.axisLeft(yScale).tickSizeInner(0).tickSizeOuter(0);

svg.append('g').attr('transform', 'translate(20, 50)').call(yAxis);

svg.selectAll('.active')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', function (d) {
    return xScale(d.start) + 20;
  })
  .attr('y', function (d, i) {
    const ii = i + 1;
    return 90 * ii + (i * 10);
  })
  .attr('width', 0)
  .attr('height', 20)
  .attr('fill', 'steelblue')
  .attr('class', 'active')
  .transition()
  .attr('width', function (d) {
    return xScale(d.end) - xScale(d.start);
  });
const transitionalbar = svg.selectAll('.transitional')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', function (d) {
    return xScale(d.start) + 20;
  })
  .attr('y', function (d, i) {
    const ii = i + 1;
    return 90 * ii + (i * 10);
  })
  .attr('width', 0)
  .attr('height', 20)
  .attr('fill', 'orange')
  .attr('class', 'transitional');
  
 const start_dt = new Date();
 
 movebar();
 function movebar() {
 	transitionalbar.transition()
  .attr('width', function (d) {
  	const now_dt = new Date();
    const diff = now_dt - start_dt;
    const neo_date =...