JSFiddle - React, Tailwind, and code Playground

CSS

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

JavaScript

var width=100,
    height=100;

var clusters = [
{id: "1",
    ccg: [40, 100, 1, 5, 25, 10] },
{id: "2", 
    ccg: [41, 101, 11, 51, 21, 11] },
{id: "3", 
    ccg: [42, 130, 13, 53, 21, 101] }
]

var clusterView = d3.select("body").append("div")

var clusterDivs = clusterView.selectAll(".cluster")
                        .data(clusters, function(d) {return d.id});

var cluster = clusterDivs.enter()
                        .insert("div", ".cluster")

var lineFunction = d3.svg.line()
                     .x(function(d, i) { return width-(i*10); })
                     .y(function(d, i) { return height-d; })
                     .interpolate("basis");

var svgContainer = cluster.append("svg")
                    .attr("width", width)
                    .attr("height", height);


svgContainer.append("path")
.datum(function (d) {return d.ccg;})
.attr("d", function(d) {return lineFunction(d)})

cluster.append("div")
    .text(function(d) { return d.id; });