JSFiddle - React, Tailwind, and code Playground

by picode

HTML

<div id="tltarget"></div>

JavaScript

function drawTL(starting_year, ending_year) {

    this.starting_year = starting_year;

    var range = ending_year - starting_year + 1;

    var rect_height = 13;
    this.rect_height = rect_height;
    var rect_width = 20;
    this.rect_width = rect_width;

    var line_height = 20;
    var line_width = 2;
    this.line_width = line_width;
    var text_starting_point = 37;

    var year_marker_width = 14;
    this.year_marker_width = year_marker_width;

    var year_all_elements_width = 2 * rect_width + line_width
    this.year_all_elements_width = year_all_elements_width;

    var svg_whole_width = range * year_all_elements_width // 43 is needed for a element representing one year
    var svg_whole_height = 42;

    var NS = "http://www.w3.org/2000/svg";

    var svg_tl = document.createElementNS(NS, "svg");
    svg_tl.setAttribute('version', '1.1');
    svg_tl.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
    svg_tl.setAttribute('width', svg_whole_width + 'px');
    svg_tl.setAttribute('height', svg_whole_height + 'px');
    svg_tl.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink");
    svg_tl.setAttribute('x', '0px');
    svg_tl.setAttribute("y", "0px");
    svg_tl.setAttribute("viewBox", "0 0 " + svg_whole_width + " " + svg_whole_height);
    svg_tl.setAttribute("enable-background", "new 0 0 " + svg_whole_width + " " + svg_whole_height);

    var g_tl = document.createElementNS(NS, "g");

    for (var i = 0; i < range; i++) {
        var year_elements_rect_left = document.createElementNS(NS, "rect");
        year_elements_rect_left.setAttribute('x', String(i * year_all_elements_width) + "px");
        year_elements_rect_left.setAttribute('y', '0px');
        year_elements_rect_left.setAttribute('height', String(rect_height) + 'px');
        year_elements_rect_left.setAttribute('width', String(rect_width) + 'px');
        year_elements_rect_left.setAttribute('style', 'stroke: none; fill: #bfbfbf');

       ...