JSFiddle - React, Tailwind, and code Playground
JavaScript
loadEss('', 'foo', 300)
function loadEss(filename,svgName,mainWidth){
var svgName;
data = [
{
"aspectRatio": 1.247386759581881,
"closed": 1,
"xyData": [
{
"x0": 0.53078594712060867,
"x1": 0.95454545454545459,
"x2": 0.95454545454545459,
"x3": 0.53078594712060867,
"x4": 0.53078594712060867,
"y0": 0.52936622215603868,
"y1": 0.52936622215603868,
"y2": 0.13179275296659432,
"y3": 0.13179275296659432,
"y4": 0.52936622215603868
}
]
},
{
"aspectRatio": 1.247386759581881,
"closed": 1,
"xyData": [
{
"x0": 0.045454545454545435,
"x1": 0.41126403477001078,
"x2": 0.41126403477001078,
"x3": 0.045454545454545435,
"x4": 0.045454545454545435,
"y0": 0.86820724703340568,
"y1": 0.86820724703340568,
"y2": 0.44804437618547044,
"y3": 0.44804437618547044,
"y4": 0.86820724703340568
}
]
}
];
data.forEach(function(kv){
kv.xyData.forEach(function(d) {
kv.points = [];
aspect=1.5;
for (var i = 0; d["x"+i] !== "" && (typeof d["x"+i] !== 'undefined'); i++) {
kv.points.push([mainWidth*d["x"+i], mainWidth/aspect*(d["y"+i])]);
}
console.log(kv.points);
});
});
var margin = {top: 0, right: 0, bottom: 0, left: 0},
width = mainWidth - margin.left - margin.right,
height = mainWidth/aspect - margin.top - margin.bottom;
svgName= d3.select("body") ...