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=800 data-height=500 data-config='{"gutter": 0.1}' 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: #0072ce;
  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: 10px;
}

.laneText {
  font-size: 12px;
}



div.tooltip {
  position: absolute;
  text-align: left;
  width: 120px;
  height: 28px;
  padding: 2px;
  font: 12px sans-serif;
  background: #ffffff;
  border: 0px;
  pointer-events: none;
}


.noselect {
  -webkit-touch-callout: none;
  /* iOS Safari */
  -webkit-user-select: none;
  /* Safari */
  -khtml-user-select: none;
  /* Konqueror HTML */
  -moz-user-select: none;
  /* Old versions of Firefox */
  -ms-user-select: none;
  /* Internet Explorer/Edge */
  user-select: none;
  /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}


.selection{
  fill: #ffffff;
  stroke: #0072ce;
  stroke-width: 1.5px;
  fill-opacity: 0.5;
}

.currentLine{
  stroke: darkgrey;
}

JavaScript

$(document).ready(function() {


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

   var w = $this.data("width");
   var h = $this.data("height");
   var config = $this.data("config");

   var {gutter} = config;

   var now = Date.now();

   var data = [{
       "label": "Argentina",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-01-14T15:20:00Z'),
         "ending_time": Date.parse('2020-05-30T03:59:00Z')
       }]
     },
     {
       "label": "Bolivia",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-01-17T03:24:00'),
         "ending_time": Date.parse('2020-06-28T03:24:00')
       }]
     },
     {
       "label": "Brazil",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-01-20T03:24:00'),
         "ending_time": Date.parse('2020-02-17T03:24:00')
       }]
     },
     {
       "label": "Canada",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-02-20T03:24:00'),
         "ending_time": Date.parse('2020-04-20T03:24:00')
       }]
     },
     {
       "label": "Chile",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-03-10T03:24:00'),
         "ending_time": Date.parse('2020-05-20T03:24:00')
       }]
     },
     {
       "label": "Colombia",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-03-10T03:24:00'),
         "ending_time": Date.parse('2020-05-20T03:24:00')
       }]
     },
     {
       "label": "Costa Rica",
       "isIncluded": true,
       "times": [{
         "text": "",
         "starting_time": Date.parse('2020-03-10T03:24:00'),
         "ending_time": Date.parse('2020-05-20T03:24:00')
       }]
     },
     {
       "label": "Ecuador",
       "isIncluded": true,
       "times": [{
        ...