bar chart with D3.js

by KgomDr

HTML

<html lang="en">
<head>
  <meta charset="UTF-8"/>
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge"/>
  <title>Gantt chart with D3.js</title>
  
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script type='text/javascript' src="https://d3js.org/d3.v4.min.js"></script>
</head>
<body>

      <div 
           class="timelinechart" 
           data-role="timelinechart" 
           data-width=500 
           data-height=500 
           data-config='{"gutter": 0.1, "squareColor": "#0072ce", "currentLineStroke": "green"}'
           data-data=""
           >
      </div>

</body>
</html>

CSS

body {
		  background: #eeeeee;
		}

		#holder {
		  overflow: hidden;
		}

/*
.chart {
	shape-rendering: crispEdges;
}
*/

.timelinechart{
	/*width:100%;
	border: 1px solid red;*/
}

.timelinechart svg{
	width:100%;
	/*border: 1px solid green;*/
}

.timelinechartg{
	
}

.mini text {
}

.main text {
}

.axis {
  
}

.miniItem {
	/*fill: darksalmon;*/
	stroke-width: 6;	
}

.miniItem.future{
	fill: #448875;
}
text.future {
	fill: #f7b363;
}


.brush .extent {
	stroke: #b6b8b9;
	fill: #57585b;
	fill-opacity: .365;
	stroke-width: .2;
}

.laneImg{
	border-radius: 25px;
}

.currentLine{
  stroke-width: 2;
}


.axis text{
  font-size: 12px;
}

.base.axis text{
  font-size: 9px;
}

.laneText{
  font-size: 12px;
}


div.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: lightsteelblue;
  border: 0px;
  border-radius: 8px;
  pointer-events: none;
}

JavaScript

$(document).ready(function() {


  var $this = $('.timelinechart');

  var w = $this.data("width");
  var h = $this.data("height");
  var config = $this.data("config");
  
  var {gutter, squareColor, currentLineStroke} = config;
  
  var now = Date.now();

  var data = [
    {
      "label": "Argentina",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-01-17T03:24:00'), "ending_time": Date.parse('2020-01-25T03:24:00')}
      ]
    },
    {
      "label": "Bolivia",
      "times": [
        {"text": "", "starting_time":Date.parse('2020-01-17T03:24:00'), "ending_time": Date.parse('2020-01-28T03:24:00')}
      ]
    },
    {
      "label": "Brazil",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-01-20T03:24:00'), "ending_time": Date.parse('2020-02-17T03:24:00')}
      ]
    },
    {
      "label": "Canada",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-02-20T03:24:00'), "ending_time": Date.parse('2020-04-20T03:24:00')}
      ]
    },
    {
      "label": "Chile",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-03-10T03:24:00'), "ending_time": Date.parse('2020-05-20T03:24:00')}
      ]
    },
    {
      "label": "Colombia",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-03-10T03:24:00'), "ending_time": Date.parse('2020-05-20T03:24:00')}
      ]
    },
    {
      "label": "Costa Rica",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-03-10T03:24:00'), "ending_time": Date.parse('2020-05-20T03:24:00')}
      ]
    },
    {
      "label": "Ecuador",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-03-10T03:24:00'), "ending_time": Date.parse('2020-05-20T03:24:00')}
      ]
    },
    {
      "label": "El Salvador",
      "times": [
        {"text": "", "starting_time": Date.parse('2020-03-10T03:24:00'), "ending_time": Date.parse('2020-05-20T03:24:00')}
      ]
    },
    {
      "label": "Guatemala",
   ...