bar chart with D3.js

by mamounothman

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 {
}

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

JavaScript

var config = {
   gutter: 0.1,
   squareColor: "red",
   currentLineStroke: "green",
   laneTextSize: "20px",
   TopAxisLabelSize: "18px",
   BottomAxisLabelSize: "9px"
};
  

$(document).ready(function() {


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

  var w = $this.data("width");
  var h = $this.data("height");
  
  var {gutter, squareColor, currentLineStroke, laneTextSize, TopAxisLabelSize, BottomAxisLabelSize} = 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')}
      ]
    }
  ];


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