d3-bar-chart-and-line-chart доработать чтобы было как на картинке

var dataArray = [ 
                 ['category A',5,200],  
				 ['category B',10,100], 
				 ['Some text ...long C',19,30], 
				 ['D',4,50], 
                 ['category Q',5,20], 
				 ['category R',10,10],  
				 ['Some text ...long S',19,350], 
				 ['T',40,500]                                                    
                ]; 
 
plot_bar_line_graph(dataArray, "#bar_line_chart", 600, 300, 'yLabel', 'yLabel2'); 
 
 
// A function to plot D3 line chart - Pass in the data array and the html objectId 
// where the chart needs to be. 
// Also pass the width, height for the plot 
function plot_bar_line_graph (dataArray, htmlObjectId, width, height, yLabel, yLabel2) { 
 
    // set margins for a nice looking bar chart 
    var margin = {top: 30, right: 50, bottom: 50, left: 50}, 
    width = 1000 - margin.left - margin.right, 
    height = 500 - margin.top - margin.bottom; 
 
    // Determine max data to set the axis limits 
    var maxData = Math.max.apply(Math,dataArray.map(function(d){return d[1];})); 
    var minData = Math.min.apply(Math,dataArray.map(function(d){return d[1];})); 
    var maxData2 = Math.max.apply(Math,dataArray.map(function(d){return d[2];})); 
    var minData2 = Math.min.apply(Math,dataArray.map(function(d){return d[2];})); 
     
 
    // Define linear scale for y-axis 
    // Note that the height range is reversed.  
    var heightScale = d3.scaleLinear() 
                            .range([height, margin.top]) 
                            // change 0 to minData is required 
                            .domain([0,maxData]) 
                            ; 
     
    // height scale for bar graphs on right 
    var heightScale2 = d3.scaleLinear() 
                            .range([height, margin.top]) 
                            .domain([0,maxData2]) 
                            ; 
 
    // define scale for categorical x-axis 
    // NOTE: The range is from margin.left and not 0. 
    var widthScale = d3.scaleBand() 
                        .range([margin.left, width]) 
                        .padding(0.4) 
                        .domain(dataArray.map(function(d) { return d[0]; })) 
                        ; 
 
    // define x,y-axes scale and align them bottom and left 
    var yaxis = d3.axisLeft() 
                .scale(heightScale) 
                .tickSize(3) 
                ; 
 
    var yaxis2 = d3.axisRight() 
                .scale(heightScale2) 
                .tickSize(3) 
                ; 
 
 
    var xaxis = d3.axisBottom() 
                .scale(widthScale) 
                .tickSize(0) 
                ; 
 
    // Define the canvas which will hold the chart 
    var canvas = d3.select(htmlObjectId) 
                    .append("svg") 
                    .attr("width", width + margin.left + margin.right) 
                    .attr("height", height + margin.top + margin.bottom) 
                    ; 
 
     // Define the line and bind it to the data 
    var line = d3.line() 
        .x(function(d) {return widthScale(d[0]) + widthScale.bandwidth()/2; }) 
        .y(function(d) {return heightScale(d[1]); }) 
        .curve(d3.curveLinear) 
        ; 
 
    // add bars to the canvas                 
    var bars = canvas.selectAll("rect") 
                    .data(dataArray) 
                    .enter() 
                        .append("rect") 
                        .attr("class", "bar") 
                        .attr("y", function(d) {return heightScale2(d[2]);}) 
                        .attr("x", function(d) {return widthScale(d[0]);}) 
                        .attr("height", function(d) {return height - heightScale2(d[2]);}) 
                        .attr("width", widthScale.bandwidth()) 
                        .attr("fill", "DodgerBlue") 
                        .style("opacity", 0.7) 
                        .on("mouseover", function(d) { 
                            d3.select(this).attr("fill","orangered"); 
                                div.transition() 
                                    .duration(200) 
                                    .style("opacity", 0.9); 
                                div.html("скорость " + d[1] + ",<br/> интенсивность " + d[2]) 
                                    .style("left", (d3.event.pageX) + "px") 
                                    .style("top", (d3.event.pageY - 28) + "px"); 
 
                        }) 
                        .on("mouseout", function(d) { 
                            d3.select(this).attr("fill","DodgerBlue"); 
                                div.transition()		 
                                    .duration(200)		 
                                    .style("opacity", 1);                             
                        })                         
                        .on("click", function(d) { 
                            console.log(d); 
                        }) 
                        ;         
 
    // Draw line connecting the data points 
    // Do not fill! 
    canvas.append("path") 
        .data([dataArray]) 
        .attr("fill", "none") 
        .attr("stroke", "Green") 
		.style("opacity", 0.6) 
        //.attr("stroke-linejoin", "round") 
        .attr("stroke-linecap", "round") 
        .attr("stroke-width", 2) 
        .attr("d", line) 
        ; 
 
		 
 
    // Define the div for the tooltip 
    // The styling and locations need css definitions. 
    var div = d3.select(htmlObjectId) 
                .append("div")	 
                .attr("class", "tooltip")				 
                .style("opacity", 0); 
 
 
     // Add dots for data points.  
     // Also includes tooltip 
    canvas.selectAll("dot") 
        .data(dataArray) 
        .enter() 
	    .append("circle") 
        .attr("r", 5) 
        .attr("cx", function(d) { return widthScale(d[0]) + widthScale.bandwidth()/2; }) 
        .attr("cy", function(d) { return heightScale(d[1]); }) 
        .attr("fill", "Green") 
        .on("mouseover", function(d) { 
            div.transition() 
                .duration(200) 
                .style("opacity", .9); 
            div.html("скорость " + d[1] + ",<br/> интенсивность " + d[2]) 
                .style("left", (d3.event.pageX) + "px") 
                .style("top", (d3.event.pageY - 28) + "px"); 
        }) 
        .on("mouseout", function() {		 
            div.transition()		 
                .duration(200)		 
                .style("opacity", 0);	 
        }) 
        ; 
 
 
 
//оси координат 
    // Add x-axis to the bar chart canvas низ 
    canvas.append("g") 
                .call(xaxis) 
                .attr("transform", "translate(0," + height + ")") 
                .attr("class", "axis x")   
            .selectAll("text") 
                .style("text-anchor", "end") 
                .attr("dx", "-4") 
                .attr("dy", "4") 
                .attr("transform", "rotate(-75)" ) 
                ; 
 
 
    // add y-axis to the bar chart canvas лево 
    canvas.append("g") 
                .call(yaxis) 
                .attr("transform", "translate(" + margin.left +", 0)") 
                .attr("class", "axis y")   
            .append("text") 
                //.attr("transform", "rotate(-90)") 
                .attr("y", 0) 
                .attr("x", 0) 
                .attr("dy", "1.2em") 
                .attr("dx", "-5em") 
                .style("text-anchor", "end") 
                .text(yLabel) 
                .attr("fill", "Green"); 
                ; 
 
    // add y-axis2 to the bar chart canvas право 
    canvas.append("g") 
                .call(yaxis2) 
                .attr("transform", "translate(" + width +", 0)") 
                .attr("class", "axis y2")   
            .append("text") 
               // .attr("transform", "rotate(-90)") 
                .attr("y", 0) 
                .attr("x", 0) 
                .attr("dy", "-0.2em") 
                .attr("dx", "-5em") 
                .style("text-anchor", "end") 
                .text(yLabel2) 
                .attr("fill", "DodgerBlue"); 
                ; 
                                 
}                            

div.tooltip {	 
        position: absolute;			 
        text-align: center;			 
        width: 120px;					 
        height: 30px;					 
        padding: 2px;				 
        font: 12px sans-serif; 
        color: white;		 
        background:black;	 
        border: 0px;		 
        border-radius: 8px;			 
        pointer-events: none;			 
    } 
	body { 
  font-family: 'open sans'; 
  font-size: 10px; 
  text-align: center; 
  }

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<link rel="stylesheet" href="style.css"> 
   <head> 
   <meta charset="UTF-8"> 
      <title>D3 Bar chart</title> 
 
     
 
   </head> 
   <body> 
        <script src="https://d3js.org/d3.v4.min.js"></script> 
         
        <div id="bar_line_chart"></div> 
 
        <script src="bar_line_chart.js"> </script> 
 
 
   </body> 
</html>