JSFiddle - React, Tailwind, and code Playground

by suhail

HTML

<script src="https://d3js.org/d3.v4.min.js"></script>
<!-- Visualization Placeholder -->
<button id="zoom-in" >Zoom In</button>
<button id="zoom-out" >Zoom Out</button>
<div id="timeline"></div>

JavaScript

// Global Variables
var parseDate = d3.timeParse("%m/%d/%Y");
var convertToYear = d3.timeFormat("%Y");

var data = [{
  name: "ABC",
  type: "current",
  registrationBeginDate: parseDate("01/08/2005"),
  registrationEndDate: new Date()
}, {
  name: "DEF",
  type: "previous",
  registrationBeginDate: parseDate("05/05/2000"),
  registrationEndDate: new Date()
}, {
  name: "GHI",
  type: "previous",
  registrationBeginDate: parseDate("12/11/1980"),
  registrationEndDate: parseDate("12/11/1995")
}]


/*
 * Timeline - Object constructor function
 *
 * @param _parentElement
 *  the HTML element in which to draw the visualization
 *
 * @param _data
 *  the Timeline JSON data
 */
Timeline = function(_parentElement, _data) {
  this.parentElement = _parentElement;
  this.data = _data;
  this.displayData = []; // see data wrangling
  this.transposedData = [];

  this.initVis();
}

/*
 * Initialize visualization (static content, e.g. SVG area or axes)
 */
Timeline.prototype.initVis = function() {
  var vis = this;

  vis.margin = {
    top: 20,
    right: 20,
    bottom: 20,
    left: 50
  };

  vis.width = 750 - vis.margin.left - vis.margin.right,
    vis.height = 750 - vis.margin.top - vis.margin.bottom;

  vis.zoom = d3.zoom()
    .scaleExtent([1, Infinity])
    .translateExtent([
      [0, 0],
      [vis.width, vis.height]
    ])
    .extent([
      [0, 0],
      [vis.width, vis.height]
    ])
    .on("zoom", zoomed);

  // SVG drawing area
  vis.svg = d3.select("#" + vis.parentElement).append("svg")
    .attr("width", vis.width + vis.margin.left + vis.margin.right)
    .attr("height", vis.height + vis.margin.top + vis.margin.bottom)
    .append("g")
    .attr("transform", "translate(" + vis.margin.left + "," + vis.margin.top + ")")
    .call(vis.zoom);

  vis.svg.append("rect")
    .attr("width", vis.width)
    .attr("height", vis.height)
    .attr("class", "zoom")
    .style("fill", "none")
    .style("pointer-events", "all");

  // Define Scales
  vis.y =...