SVG bar chart

Test SVG chart with scrubber

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    #nav .data {
      fill: lightgrey;
      stroke-width: 0px;
		}

#nav .line {
      fill: none;
      stroke: black;
      stroke-width: 1px;
		}
    
    #nav .bar,
    #nav .circle {
      fill: grey;
    }
    
    #nav .viewport {
    	stroke: grey;
    	fill: black;
    	fill-opacity: 0.2;
		}
  </style>
</head>

<body>
  <svg id="bar" width="600" height="400"></svg>
  <svg id="nav" width="600" height="80"></svg>
  
  <script>
		var svg = d3.select("#bar");
    var margin = {top: 60, right: 10, bottom: 30, left: 50};
    var width = +svg.attr("width") - margin.left - margin.right;
    var height = +svg.attr("height") - margin.top - margin.bottom;

var x = redrawChart();
    
    var y = d3.scaleLinear()
      .rangeRound([height, 0])
      .domain([0, 1]);

var g = svg.append("g")
    	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

drawXAxis(g);

g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y).ticks(10, "%"))
      .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end");

g.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", d => x(d.date.substring(6)))
      .attr("y", d => y(d.value))
      .attr("width", x.bandwidth())
      .attr("height", d => height - y(d.value));

var navSvg = d3.select("#nav");
    var navMargin = {top: 10, right: 10, bottom: 30, left: 50};
    var navWidth = +navSvg.attr("width") - navMargin.left - navMargin.right;
    var navHeight = +navSvg.attr("height") - navMargin.top - navMargin.bottom;
    
    var navG = navSvg.append('g')
      .attr('transform', 'translate(' + navMargin.left + ',' + navMargin.top + ')');
    
    var navXScale = d3.scaleBand()
      .rangeRound([0, navWidth])
      .domain(data.map(d => d.date.substring(6)))
      .padding(0.1);
    
    // data.map(d => d.date.substring(6))
    
    var navYScale = d3.scaleLinear()
      .rangeRound([navHeight, 0])
      .domain([0, 1]);
    
    navG.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + navHeight + ")")
      .call(d3.axisBottom(navXScale))
      .append("text");

var navData = d3.area()
      .x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .y(d => navYScale(d.value))
      .y1(navHeight);

var navLine = d3.line()
      .x(d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .y(d => navYScale(d.value));
    
 
    navG.append('path')
        .attr('class', 'data')
        .attr('d', navData(data));

navG.append('path')
        .attr('class', 'line')
        .attr('d', navLine(data));

navG.selectAll(".circle")
      .data(data)
      .enter().append("circle")
      .attr("class", "circle")
      .attr("cx", d => navXScale(d.date.substring(6)) + navXScale.bandwidth() / 2)
      .attr("cy", d => navYScale(d.value))
      .attr("r", 3)
      .attr("width", navXScale.bandwidth())
      .attr("height", d => navHeight - navYScale(d.value));

navG.selectAll(".bar")
      .data(data)
      .enter().append("rect")
      .attr("class", "bar")
      .attr("x", d => navXScale(d.date.substring(6)))
      .attr("y", d => navYScale(d.value))
      .attr("width", navXScale.bandwidth())
      .attr("height", d => navHeight - navYScale(d.value));
    
    
//     var viewport = d3.brush()
//     	.on("brush", brushHandler);
    
//     function brushHandler() {
//       var selection = d3.event.selection;
//       navXScale.domain(selection ? navXScale.domain() : viewport.extent());
// //       debugger;
//       x = redrawChart(null, g);
//     }
    
//     navG.append('g')
//     	.attr('class', 'brush')
//     	.call(viewport);
    
    function redrawChart(domain, g) {
      var _domain = domain || data.map(d => d.date.substring(6));
      
      x = d3.scaleBand()
      .rangeRound([0, width])
      .domain(_domain).padding(0.1);
      
//       debugger;
//       drawXAxis(g);
      
      return x;
		}
    
    function drawXAxis(g) {
      g.append("g")
        .attr("class", "axis axis--x")
        .attr("transform", "translate(0," + height + ")")
        .call(d3.axisBottom(x))
        .append("text");
    }
     
  </script>
</body>

https://d3js.org/d3.v4.min.js