bar chart with D3.js

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=300 
           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 {
	font: 10px sans-serif;	
}

.main text {
	font: 12px sans-serif;	
}

.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;
}

JavaScript

$(document).ready(function() {


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

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

  var data = [
    {
      "label": "Argentina",
      "times": [
        {"text": "", "starting_time": 1355752800000, "ending_time": 1355752840000}
      ]
    },
    {
      "label": "Bolivia",
      "times": [
        {"text": "", "starting_time": 1355752800000, "ending_time": 1355752900000}
      ]
    },
    {
      "label": "Brazil",
      "times": [
        {"text": "", "starting_time": 1355752900000, "ending_time": 1355752935000}
      ]
    },
    {
      "label": "Canada",
      "times": [
        {"text": "", "starting_time": 1355753000000, "ending_time": 1355753500000}
      ]
    },
    {
      "label": "Chile",
      "times": [
        {"text": "", "starting_time": 1355753700000, "ending_time": 1355754000000}
      ]
    }
  ];


  var lanes = [];
  var times = [];

  $.each(data, function(index, value) {
    lanes.push(value.label);
    $.each(value.times, function(i, v) {
      v["lane"] = index;
    });
    times.push(value.times);
  });

  var laneLength = lanes.length;
  var items = [].concat.apply([], times);

  $.each(items, function(i, v) {
    v["id"] = i;
  });

  var timeBegin = d3.min(items, function(d) { return d["starting_time"]; });
  var timeEnd = d3.max(items, function(d) { return d["ending_time"]; });

  var m = [25, 80, 15, 105], //top right bottom left
      w = w - m[1] - m[3],
      h = h - m[0] - m[2],
      miniHeight = 50,//laneLength * 12 + 50,
      mainHeight = h - miniHeight - 50;


  //scales
  var x =  d3.scaleTime()
  .range([0, w])
  .domain([timeBegin, timeEnd]);
  var x1 = d3.scaleLinear()
  .range([0, w]);
  var y1 = d3.scaleLinear()
  .range([0, mainHeight])
  .domain([0, laneLength]);
  var y2 = d3.scaleLinear()
  .range([0, miniHeight])
  .domain([0, laneLength]);

  var xAxis = d3.axisBottom(x)
  .ticks(d3.timeMonth)
  .tickFormat(d=>d3.timeFormat("%B %Y")(d));


  var...