JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="http://d3js.org/d3.v3.js"></script>

JavaScript

var vis = d3.select("body").append("svg")
         .attr("width", 1000)
         .attr("height", 667),

scaleX = d3.scale.linear()
        .domain([-30,30])
        .range([0,600]),

scaleY = d3.scale.linear()
        .domain([0,50])
        .range([500,0]),

poly = [{"x":0.0, "y":25.0},
        {"x":8.5,"y":23.4},
        {"x":13.0,"y":21.0},
        {"x":19.0,"y":15.5}];
        
        var data = [{
		"coordinateX": 20,
		"coordinateY": 30,
		"shape": [{
				"x": 0.0,
				"y": 25.0
			},
			{
				"x": 8.5,
				"y": 23.4
			}, {
				"x": 13.0,
				"y": 21.0
			}, {
				"x": 19.0,
				"y": 15.5
			}
		],
		"frame": 0,
		"date": "2023-05-23 10:00"
	},
	{
		"coordinateX": 19,
		"coordinateY": 29,
		"shape": [{
				"x": 0.3,
				"y": 23.0
			},
			{
				"x": 8.5,
				"y": 23.4
			}, {
				"x": 33.0,
				"y": 21.0
			}, {
				"x": 19.0,
				"y": 45.5
			}
		],
		"frame": 1,
		"date": "2023-05-24 10:00"
	},
	{
		"coordinateX": 19,
		"coordinateY": 30,
		"shape": [{
				"x": 0.0,
				"y": 25.0
			},
			{
				"x": 5.5,
				"y": 23.7
			}, {
				"x": 11.0,
				"y": 21.0
			}, {
				"x": 12.0,
				"y": 13.5
			}
		],
		"frame": 2,
		"date": "2023-05-25 10:00"
	}
]
        

vis.selectAll("polygon")
    .data([data[0].shape])
  .enter().append("polygon")
    .attr("points",function(d) { 
        return d.map(function(d) { return [scaleX(d.x),scaleY(d.y)].join(","); }).join(" ");})
    .attr("stroke","black")
    .attr("stroke-width",2);