JSFiddle - React, Tailwind, and code Playground

JavaScript

data = [
      {
     "name": "Cristiano Ronaldo",
     "age" : 28,
     "team": "Real Madrid",
      "statistics" : {
         "2005" : [
            {"attr" :"Appearances", 
         "value": 100},
            {"attr" :"Goals", 
         "value": 92},
            {"attr" :"Yellow Cards", 
         "value": 10}, 
        {"attr" :"Red Cards", 
         "value": 1}    
         ] 
      }
      },
     {
     "name": "Lionel Messi",
     "age" : 29,
     "team": "Barcelona",
      "statistics" : {
         "2005" : [
            {"attr" :"Appearances", 
         "value": 90},
            {"attr" :"Goals", 
         "value": 87},
            {"attr" :"Yellow Cards", 
         "value": 13}, 
        {"attr" :"Red Cards", 
         "value": 43}   
         ] 
      }
      }
] 

var margin = {top: 20, right: 20, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y = d3.scale.linear()
.range([height, 0]);

var color = d3.scale.ordinal()
.range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
.scale(x0)
.orient("bottom");

var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 



 //d3.json("ronaldo.json", function(error, data) { 

  console.log(data);

  var playerNames = [] 
  data.forEach(function(d){playerNames.push(d.name)}) 

  var attr = []; 
  data[0]['statistics']['2005'].forEach(function(d){return attr.push(d.attr)}) 
  console.log(attr)

  x0.domain(attr.map(function(d){return d})); 
  //x0.domain(data.map(function(d){return d['statistics']['2005']['attr']})); 
 ...