JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">

        <div class="jumbotron">

            <svg id="visualisation" width="1000" height="500"></svg>

CSS

.axis path {
            fill: none;
            stroke: #777;
            shape-rendering: crispEdges;
        }
        .axis text {
            font-family: Lato;
            font-size: 13px;
        }
        .legend {
    font-size: 14px;
    font-weight: bold;
}

JavaScript

function InitChart() {
                    
                     var data = [{
                        "Client": "ABC",
                        "sale": "202",
                        "year": "2000"
                    }, {
                        "Client": "ABC",
                        "sale": "215",
                        "year": "2002"
                    }, {
                        "Client": "ABC",
                        "sale": "179",
                        "year": "2004"
                    }, {
                        "Client": "ABC",
                        "sale": "199",
                        "year": "2006"
                    }, {
                        "Client": "ABC",
                        "sale": "134",
                        "year": "2008"
                    }, {
                        "Client": "ABC",
                        "sale": "156",
                        "year": "2010"
                    }, {
                        "Client": "XYZ",
                        "sale": "130",
                        "year": "2000"
                    }, {
                        "Client": "XYZ",
                        "sale": "180",
                        "year": "2002"
                    }, {
                        "Client": "XYZ",
                        "sale": "168",
                        "year": "2004"
                    }, {
                        "Client": "XYZ",
                        "sale": "215",
                        "year": "2006"
                    }, {
                        "Client": "XYZ",
                        "sale": "169",
                        "year": "2008"
                    }, {
                        "Client": "XYZ",
                        "sale": "176",
                        "year": "2013"
                    }];
                    
                    var dataGroup = d3.nest()
                        .key(function(d) {return d.Client;})
                        .entries(data);
                   ...