{
var margin = { top: 10, right: 30, bottom: 30, left: 40 },
width = 460 - margin.left - margin.right,
height = 400 - margin.top - margin.bottom;
const svg = d3
.create("svg")
.attr("width", width)
.attr("height", height)
.attr("viewBox", [0, 0, width, height])
.attr("style", "max-width: 100%; height: auto;");
let data = [
{ x: -0.44972, y: 0.1771, cell: "I1", lib: "S5" },
{ x: 0.19, y: 0.752, cell: "I1", lib: "S6" },
{ x: -0.21137, y: -0.2388, cell: "I1", lib: "S3" },
{ x: -0.0348, y: 0.01171, cell: "I1", lib: "S6" },
{ x: -0.357, y: 0.822, cell: "I1", lib: "S6" },
{ x: -0.2543, y: -0.3184, cell: "I1", lib: "S6" },
{ x: -0.1235, y: 0.2822, cell: "I3", lib: "S6" },
{ x: -0.43765, y: -0.34685, cell: "I1", lib: "S6" }
];
const x = d3
.scaleLinear()
.domain([-1, 1])
.range([margin.left, width - margin.right]);
svg
.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));
const y = d3
.scaleLinear()
.domain([-1, 1])
.range([height - margin.bottom, margin.top]);
svg.append("g").call(d3.axisLeft(y));
const color = d3
.scaleOrdinal()
.domain([0, 1])
.range([
"#e31a1c",
"#1f78b4",
"#ff7f00",
"#b2df8a",
"#87843b",
"#fb9a99",
"#8dd3c7",
"#FFFF00"
]);
svg
.append("path")
.datum(data)
.attr("fill-opacity", ".1")
.attr("stroke-width", 1)
.attr("stroke-linejoin", "round")
.attr(
"d",
d3
.area()
.curve(d3.curveBasis)
.x(function (d) {
return x(d[0]);
})
.y0(y(0))
.y1(function (d) {
return y(d[1]);
})
);
return svg.node();
}