как добавить в D3 js столбчатую диаграмму и подогнать как на картинке ?помогите разобраться

var JSONdata={ 
  "measurementPoints": [ 
    { 
      "measurementValue": 8.684, 
      "measurementDateTime": "2016-06-09T17:05:00" 
    }, 
    { 
      "measurementValue": 16.099, 
      "measurementDateTime": "2016-06-09T17:10:00" 
    }, 
    { 
      "measurementValue": 20.572, 
      "measurementDateTime": "2016-06-09T17:15:00" 
    }, 
    { 
      "measurementValue": 8.871, 
      "measurementDateTime": "2016-06-09T17:20:00" 
    }, 
    { 
      "measurementValue": 86.961, 
      "measurementDateTime": "2016-06-09T17:25:00" 
    }, 
    { 
      "measurementValue": 100.429, 
      "measurementDateTime": "2016-06-09T17:30:00" 
    }, 
    { 
      "measurementValue": 50.03, 
      "measurementDateTime": "2016-06-09T17:35:00" 
    }, 
    { 
      "measurementValue": 70.46, 
      "measurementDateTime": "2016-06-09T17:40:00" 
    }, 
    { 
      "measurementValue": 11.763, 
      "measurementDateTime": "2016-06-09T17:45:00" 
    }, 
    { 
      "measurementValue": 87.067, 
      "measurementDateTime": "2016-06-09T17:50:00" 
    }, 
  
   
  ], 
  "sensorId": 145 
}; 
 
var svg = d3.select("svg"), 
    margin = {top: 20, right: 20, bottom: 110, left: 40}, 
    margin2 = {top: 430, right: 20, bottom: 30, left: 40}, 
    width = +svg.attr("width") - margin.left - margin.right, 
    height = +svg.attr("height") - margin.top - margin.bottom, 
    height2 = +svg.attr("height") - margin2.top - margin2.bottom; 
 
var parseDate = d3.timeParse("%b %Y"); 
 
var x = d3.scaleTime().range([0, width]), 
    x2 = d3.scaleTime().range([0, width]), 
    y = d3.scaleLinear().range([height, 0]), 
    y2 = d3.scaleLinear().range([height2, 0]); 
 
var xAxis = d3.axisBottom(x), 
    xAxis2 = d3.axisBottom(x2), 
    yAxis = d3.axisLeft(y); 
 
var brush = d3.brushX() 
    .extent([[0, 0], [width, height2]]) 
    .on("brush end", brushed); 
 
var zoom = d3.zoom() 
    .scaleExtent([1, Infinity]) 
    .translateExtent([[0, 0], [width, height]]) 
    .extent([[0, 0], [width, height]]) 
    .on("zoom", zoomed); 
 
var area = d3.line() 
    .x(function(d) { return x(new Date(d.measurementDateTime)); }) 
    .y(function(d) { return y(d.measurementValue); }); 
 
var area2 = d3.line() 
    .x(function(d) { return x2(new Date(d.measurementDateTime)); }) 
    .y(function(d) { return y2(d.measurementValue); }); 
 
svg.append("defs").append("clipPath") 
    .attr("id", "clip") 
  .append("rect") 
    .attr("width", width) 
    .attr("height", height); 
 
var focus = svg.append("g") 
    .attr("class", "focus") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 
 
var context = svg.append("g") 
    .attr("class", "context") 
    .attr("transform", "translate(" + margin2.left + "," + margin2.top + ")"); 
 
  x.domain(d3.extent(JSONdata.measurementPoints, function(d) { return new Date(d.measurementDateTime); })); 
  y.domain([0, d3.max(JSONdata.measurementPoints, function(d) { return d.measurementValue; })]); 
  x2.domain(x.domain()); 
  y2.domain(y.domain()); 
 
  focus.append("path") 
      .datum(JSONdata.measurementPoints) 
      .attr("class", "line") 
      .attr("d", area); 
 
  focus.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height + ")") 
      .call(xAxis); 
 
  focus.append("g") 
      .attr("class", "axis axis--y") 
      .call(yAxis); 
 
  context.append("path") 
      .datum(JSONdata.measurementPoints) 
      .attr("class", "line") 
      .attr("d", area2); 
 
  context.append("g") 
      .attr("class", "axis axis--x") 
      .attr("transform", "translate(0," + height2 + ")") 
      .call(xAxis2); 
 
  context.append("g") 
      .attr("class", "brush") 
      .call(brush) 
      .call(brush.move, x.range()); 
 
  svg.append("rect") 
      .attr("class", "zoom") 
      .attr("width", width) 
      .attr("height", height) 
      .attr("transform", "translate(" + margin.left + "," + margin.top + ")") 
      .call(zoom); 
 
 
function brushed() { 
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "zoom") return; // ignore brush-by-zoom 
  var s = d3.event.selection || x2.range(); 
  x.domain(s.map(x2.invert, x2)); 
  focus.select(".line").attr("d", area); 
  focus.select(".axis--x").call(xAxis); 
  svg.select(".zoom").call(zoom.transform, d3.zoomIdentity 
      .scale(width / (s[1] - s[0])) 
      .translate(-s[0], 0)); 
} 
 
function zoomed() { 
  if (d3.event.sourceEvent && d3.event.sourceEvent.type === "brush") return; // ignore zoom-by-brush 
  var t = d3.event.transform; 
  x.domain(t.rescaleX(x2).domain()); 
  focus.select(".line").attr("d", area); 
  focus.select(".axis--x").call(xAxis); 
  context.select(".brush").call(brush.move, x.range().map(t.invertX, t)); 
} 
 
function type(d) { 
  d.measurementDateTime = parseDate(d.measurementDateTime); 
  d.measurementValue = +d.measurementValue; 
  return d; 
}

.zoom { 
  cursor: move; 
  fill: none; 
  pointer-events: all; 
} 
 
//tempChart css 
.brush .extent { 
  stroke: #FFF; 
} 
.line { 
  fill: none; 
  stroke-width: 1px; 
  clip-path: clip-path: url(#clip); 
  stroke: red; 
 
} 
.line:nth-of-type(2) { 
  stroke: blue; 
} 
 
.axis path, 
.axis line { 
  fill: none; 
  stroke: #000; 
} 
 
.brush .extent { 
  stroke: #fff; 
  fill-opacity: .125; 
}

<!DOCTYPE html> 
<html > 
<head> 
  <meta charset="UTF-8"> 
  <title>*</title> 
   
   
   
      <link rel="stylesheet" href="css/style.css"> 
 
   
</head> 
 
<body> 
  <svg width="960" height="500"></svg> 
  <script src='https://d3js.org/d3.v4.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.10.6/moment.min.js'></script> 
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script> 
 
    <script  src="js/index.js"></script> 
 
</body> 
</html>