JSFiddle - React, Tailwind, and code Playground

by Rushan Sakhibgareev

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,100])
        .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}],
        
poly2 = [{"x":0.0, "y":55.0},
        {"x":8.5,"y":53.4},
        {"x":13.0,"y":51.0},
        {"x":19.0,"y":45.5}];        

vis.selectAll("polygon")
    .data([poly, poly2])
  .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);