var xValueArray = [0,10,20,30,40];
var arr = [
  [0,40],[0,200,300,400,500]
];
//data array is obtained after structuring arr array
var data = [
  [{
    x: 0,y: 0
  },{
    x: 10,y: 10
  },{
    x: 20,y: 20
  },{
    x: 30,y: 30
  },{
    x: 40,y: 40
  }],[{
    x: 0,y: 200
  },y: 300
  },y: 400
  },y: 500
  }]
];

const margin = {
  left: 20,right: 20,top: 20,bottom: 80
};

const svg = d3.select('svg');
svg.selectAll("*").remove();

const width = 200 - margin.left - margin.right;
const height = 200 - margin.top - margin.bottom;

//const g = svg.append('g').attr('transform',`translate(${margin.left},${margin.top})`);
const g = svg.append('g').attr('transform',`translate(${80},${margin.top})`);

//************* Axes and Gridlines ***************

const xAxisG = g.append('g');
const yAxisG = g.append('g');

xAxisG.append('text')
  .attr('class','axis-label')
  .attr('x',width / 3)
  .attr('y',-10)
  .style('fill','black')
  .text(function(d) {
    return "X Axis";
  });

yAxisG.append('text')
  .attr('class','axis-label')
  .attr('id','primaryYLabel')
  .attr('x',-height / 2)
  .attr('y',-15)
  .attr('transform',`rotate(-90)`)
  .style('text-anchor','middle')
  .style('fill','black')
  .text(function(d) {
    return "Y Axis 1";
  });

// interpolator for X axis -- inner plot region
var x = d3.scaleLinear()
  .domain([0,d3.max(xValueArray)])
  .range([0,width])
  .nice();

var yScale = new Array();
for (var i = 0; i < 2; i++) {
  // interpolator for Y axis -- inner plot region
  var y = d3.scaleLinear()
    .domain([0,d3.max(arr[i])])
    .range([0,height])
    .nice();
  yScale.push(y);
}

const xAxis = d3.axisTop()
  .scale(x)
  .ticks(5)
  .tickPadding(2)
  .tickSize(-height)

const yAxis = d3.axisLeft()
  .scale(yScale[0])
  .ticks(5)
  .tickPadding(2)
  .tickSize(-width);

yAxisArray = new Array();
yAxisArray.push(yAxis);
for (var i = 1; i < 2; i++) {
  var yAxisSecondary = d3.axisLeft()
    .scale(yScale[i])
    .ticks(5)
  yAxisArray.push(yAxisSecondary);
}

svg.append("g")
  .attr("class","x axis")
  .attr("transform",`translate(80,${height-80})`)
  .call(xAxis);

svg.append("g")
  .attr("class","y axis")
  .attr("transform","translate(80,20)")
  .call(yAxis);

//************* Mouseover ***************
var tooltip = d3.select("body")
  .append("div")
  .style("opacity",0)
  .attr("class","tooltip")
  .style("background-color","white")
  .style("border","solid")
  .style("border-width","1px")
  .style("border-radius","5px")
  .style("padding","10px")
  .style("position","absolute")

// A function that change this tooltip when the user hover a point.
// Its opacity is set to 1: we can now see it. Plus it set the text and position of tooltip depending on the datapoint (d)
var mouseover = function(d) {
  tooltip
    .html("x: " + d.x + "<br/>" + "y: " + d.y)
    .style("opacity",1)
    .style("left",(d3.mouse(this)[0] + 90) + "px")
    .style("top",(d3.mouse(this)[1]) + "px")
}

// A function that change this tooltip when the leaves a point: just need to set opacity to 0 again
var mouseleave = function(d) {
  tooltip
    .transition()
    .duration(200)
    .style("opacity",0)
}

//************* Plotting of graph ***************
var colors = ["blue","red"];
//plot of chart
for (var i = 0; i < 2; i++) {
  var lineFunction = d3.line()
    .x(function(d) {
      return x(d.x);
    })
    .y(function(d) {
      return yScale[i](d.y);
    })
    .curve(d3.curveLinear);

  //plot lines
  var paths = g.append("path")
    .attr("class","blueLine" + i)
    .attr("d",lineFunction(data[i]))
    .attr("stroke",colors[i])
    .attr("stroke-width",2)
    .attr("fill","none")
    .attr("clip-path","url(#clip)")

  //plot a circle at each data point
  g.selectAll(".dot")
    .data(data[i])
    .enter().append("circle")
    .attr("cx",function(d) {
      return x(d.x)
    })
    .attr("cy",function(d) {
      return yScale[i](d.y);
    })
    .attr("r",3)
    .attr("class","blackDot")
    .attr("clip-path","url(#clip)")
    .on("mouseover",mouseover)
    .on("mouseleave",mouseleave)
}

var translation = 50;
var textTranslation = 0;
var yLabelArray = ["Y Axis 1","Y Axis 2"];

//loop starts from 1 as primary y axis is already plotted
for (var i = 1; i < 2; i++) {
  svg.append("g")
    .attr("transform","translate(" + translation + "," + 20 + ")")
    .call(yAxisArray[i]);

  yAxisG.append('text')
    .attr('x',-height / 2)
    .attr('y',-60)
    .attr('transform',`rotate(-90)`)
    .style('text-anchor','middle')
    .style('fill','black')
    .text(yLabelArray[i]);

  translation -= 20;
  textTranslation += 20;
}

//************* Legend ***************
var legend = svg.selectAll('.legend')
  .data(data)
  .enter()
  .append('g')
  .attr('class','legend');

legend.append('rect')
  .attr('x',width - 5)
  .attr('y',i) {
    return (i * 20) + 120;
  })
  .attr('width',18)
  .attr('height',4)
  .attr("fill",i) {
    return colors[i]
  });

legend.append('text')
  .attr('x',width - 10)
  .attr('y',i) {
    return (i * 20) + 120;
  })
  .attr("dy",".35em")
  .style("text-anchor","end")
  .text(function(d,i) {
    return yLabelArray[i]
  })
  .on("click",i) {
    //Determine if current line is visible
    var active = window["blueLine" + i].active ? false : true,newOpacity = active ? 0 : 1;
    //Hide or show the elements
    d3.select("#blueLine" + i).style("opacity",newOpacity);
    //Update whether or not the elements are active
    window["blueLine" + i].active = active;
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>
<svg class="xy_chart"></svg>