JSFiddle - React, Tailwind, and code Playground

by jpraden

HTML

<h2>Goleadores en mundiales</h2>
<div id="chart"></div>
<div id="detalles"></div>

CSS

/*Crear estilo*/

rect {
  fill: steelblue;
}

rect:hover {
  fill: red;
}

.axis {
  font-size: 10px;
  font-family: sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

JavaScript

var data = [{
    "nombre": "Miroslav Klose",
    "equipo": "Alemania",
    "goles": 16,
    "partidos": 24,
    "promedio": 0.67
  },
  {
    "nombre": "Ronaldo",
    "equipo": "Brasil",
    "goles": 15,
    "partidos": 19,
    "promedio": 0.79
  },
  {
    "nombre": "Gerd Müller",
    "equipo": "Alemania",
    "goles": 14,
    "partidos": 13,
    "promedio": 1.08
  },
  {
    "nombre": "Just Fontaine",
    "equipo": "Francia",
    "goles": 13,
    "partidos": 6,
    "promedio": 2.17
  },
  {
    "nombre": "Pelé",
    "equipo": "Brasil",
    "goles": 12,
    "partidos": 14,
    "promedio": 0.86
  },
  {
    "nombre": "Sándor Kocsis",
    "equipo": "Hungría",
    "goles": 11,
    "partidos": 5,
    "promedio": 2.2
  },
  {
    "nombre": "Jürgen Klinsmann",
    "equipo": "Alemania",
    "goles": 11,
    "partidos": 17,
    "promedio": 0.65
  },
  {
    "nombre": "Helmut Rahn",
    "equipo": "Alemania",
    "goles": 10,
    "partidos": 10,
    "promedio": 1
  },
  {
    "nombre": "Gabriel Batistuta",
    "equipo": "Argentina",
    "goles": 10,
    "partidos": 12,
    "promedio": 0.83
  },
  {
    "nombre": "Gary Lineker",
    "equipo": "Inglaterra",
    "goles": 10,
    "partidos": 12,
    "promedio": 0.83
  },
  {
    "nombre": "Thomas Müller",
    "equipo": "Alemania",
    "goles": 10,
    "partidos": 13,
    "promedio": 0.77
  },
  {
    "nombre": "Teófilo Cubillas",
    "equipo": "Perú",
    "goles": 10,
    "partidos": 13,
    "promedio": 0.77
  },
  {
    "nombre": "Grzegorz Lato",
    "equipo": "Polonia",
    "goles": 10,
    "partidos": 20,
    "promedio": 0.5
  },
  {
    "nombre": "Eusébio",
    "equipo": "Portugal",
    "goles": 9,
    "partidos": 6,
    "promedio": 1.5
  },
  {
    "nombre": "Christian Vieri",
    "equipo": "Italia",
    "goles": 9,
    "partidos": 9,
    "promedio": 1
  },
  {
    "nombre": "Vavá",
    "equipo": "Brasil",
    "goles": 9,
    "partidos": 10,
    "promedio": 0.9
  },
  {
    "nombre": "David Villa",
    "equipo":...