Построение HTML JS ломанной линии в системе координат

const MARGINS = {
  top: 20,
  left: 40,
  bottom: 40,
  right: 20,
};
 
const SIZE = {
  width: 600,
  height: 240,
};
 
function* zip(...sources) {
  let iterators = sources.map(source => source[Symbol.iterator]());
 
  while (true) {
    let iteratorResults = iterators.map(iterator => iterator.next());
    let done = iteratorResults.some(result => result.done);
    if (done) {
      break;
    }
 
    yield iteratorResults.map(result => result.value);
  }
}
 
async function main() {
  const fullWidth = SIZE.width + MARGINS.left + MARGINS.right;
  const fullHeight = SIZE.height + MARGINS.top + MARGINS.bottom;
 
  const svg = d3.select('#root').append('svg')
    .attr('width', fullWidth * 1.5)
    .attr('height', fullHeight * 1.5)
    .attr('viewBox', `0 0 ${fullWidth} ${fullHeight}`);
 
  const g = svg.append('g')
    .attr('transform', `translate(${MARGINS.left}, ${MARGINS.top})`);
 
  const xMap = d3.scaleLinear().domain([0, 40]).range([0, SIZE.width]);
  const yMap = d3.scaleLinear().domain([-8, 8]).range([SIZE.height, 0]);
 
  g.append('g')
    .attr('transform', `translate(0, ${yMap(0)})`)
    .call(d3.axisBottom(xMap).ticks(41));
 
  g.append('g').call(d3.axisLeft(yMap).ticks(17));
 
  g.selectAll("line.grid.h").data(yMap.ticks(17)).enter().append("line")
    .attr("class", "grid h")
    .attr("x1", 0)
    .attr("x2", SIZE.width)
    .attr("y1", d => yMap(d))
    .attr("y2", d => yMap(d));
 
  g.selectAll("line.grid.v").data(xMap.ticks(41)).enter().append("line")
    .attr("class", "grid v")
    .attr("y1", 0)
    .attr("y2", SIZE.height)
    .attr("x1", d => xMap(d))
    .attr("x2", d => xMap(d));
 
  const data = await fetch("data.json").then(response => response.json());
  const points = [...zip(data.plot.x, data.plot.y)];
 
  g.append('path')
    .datum(points)
    .attr('fill', 'none')
    .attr('stroke', 'black')
    .attr('d', d3.line().x(point => xMap(point[0])).y(point => yMap(point[1])));
 
  g.selectAll("path.diamond").data(data.diamonds).enter().append("path")
    .attr("class", "diamond")
    .attr("d", "M0,-8 L4,0 L0,8 L-4,0 L0,-8")
    .attr("transform", d => `translate(${xMap(d)}, ${yMap(0)})`);
 
  g.selectAll("circle.circle").data(data.circles).enter().append("circle")
    .attr("class", "circle")
    .attr("cx", d => xMap(d))
    .attr("cy", yMap(0))
    .attr("r", 4);
}
 
main().catch(error => {
  console.error(error);
});