First you can determine the x and y scales for your data:

xScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.GDP))
  .range([0, width]);

yScale = d3.scaleLinear()
  .domain(d3.extent(data, d => d.GNI))
  .range([height, 0]);

If you want a separate line for each of the political parties, then you probably need to prepare a different data array for each party by filtering the original data.

const congress = data.filter(d => d.Party === 'Congress');
const bjp = data.filter(d => d.Party === 'BJP');

Then you can build the line generator that can be used to draw each line:

const lineGenerator = d3.line()
  .x(d => xScale(d))
  .y(d => yScale(d));

Then you can add each line to the chart:

const svg ='svg');

  .style('stroke', 'darkgreen')
  .style('fill', 'none')
  .attr('d', lineGenerator);

Related Query

More Query from same tag