JSFiddle - React, Tailwind, and code Playground

by HemalathaThanigaivel

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.6.0/d3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="chart-id" class="line-chart" style="width:100%; height: 500px;"></div>
<div id="xAxis"></div>
<ul class="legend"></ul>

JavaScript

var data = [{
  "country": "Greece",
  "Vodafone": 57,
  "Wind": 12,
  "Cosmote": 20
}, {
  "country": "Italy",
  "Vodafone": 40,
  "Wind": 24,
  "Cosmote": 35
}, {
  "country": "France",
  "Vodafone": 22,
  "Wind": 9,
  "Cosmote": 9
}];


var margin = {
  top: 5, //top: 20,
  right: 20,
  bottom: 40,
  left: 50
};

var parentNode = d3.select('#chart-id').node(),
    parent = '#chart-id';

var containerwidth = parentNode.getBoundingClientRect().width,
    containerheight = parentNode.getBoundingClientRect().height,
    width = containerwidth - margin.left - margin.right,
    height = containerheight - margin.top - margin.bottom;

var dataset = data;

var svg = d3.select(parent)
.append('svg')
.attr('width', containerwidth)
.attr('height', containerheight)
.append('g')
.attr('transform', 'translate(' + margin.left + ',' + margin.top + ')');

/* Rectangle to receive user events */

var clipPath = svg.append("defs")
.append("clipPath")
.attr("id", "clip")
.append("rect")
.attr("x", 0)
.attr("y", 0);

var view = svg
.append("rect")
.attr("class", "view")
.attr("x", 0)
.attr("y", 0);

var xScale = d3.scaleLinear().rangeRound([0, width]),
  yScale = d3.scaleBand().rangeRound([height - 10 , 0]).padding(0.9),
  xAxis = d3.axisBottom(xScale),
  yAxis =  d3.axisLeft(yScale).tickSize(0);
  
var xAxisSvg = d3.select('#xAxis').append('svg')
    .attr("width", width + margin.left + margin.right)
    .attr("height", 20).append("g")
    .attr("class", "axis axis--x")
    .attr("transform", "translate("+ margin.left +"," + (1) + ")")
    .call(xAxis);
    
var keys = d3.keys(dataset[0]).slice(1);
dataset.forEach(function (d, i) {
  d.total = d3.sum(d3.values(d).slice(1));
});
var fKeys = keys.slice();

var g = svg.append('g').attr("class", "d3-group-wrap"); 

var fKeyReference = fKeys.map(function (key) {
  return true; //used to indicate if the corresponding key is active
});

function getActiveKeys(reference) {
  return reference.map(function (state, index) {
    if (state) {
 ...