['ingredients', 'wisdom', 'agnosticism', 'introspection', 'pioneers']
Necessitem generar una visualització interactiva en una pàgina web que mostri la relació entre el nombre d'hores dedicades a l'autoaprenentatge (introspecció) i el nivell de felicitat reportat per un grup de persones. Les dades es trobaran en un fitxer CSV amb dues columnes: "Hores" i "Felicitat" (amb valors de 0 a 10). Escriu el codi HTML, CSS i JavaScript necessari per a aquesta tasca.
```html
<!DOCTYPE html>
<html>
<head>
  <title>Relació entre Autoaprenentatge i Felicitat</title>
  <style>
    body { font-family: sans-serif; }
    svg { width: 100%; height: 500px; }
    .dot { fill: steelblue; opacity: 0.7; }
  </style>
  <script src="https://d3js.org/d3.v7.min.js"></script>
</head>
<body>
  <h1>Relació entre Autoaprenentatge i Felicitat</h1>
  <div id="grafic"></div>
  <script>
    d3.csv("dades.csv").then(function(data) {
      data.forEach(function(d) {
        d.Hores = +d.Hores;
        d.Felicitat = +d.Felicitat;
      });

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

      const x = d3.scaleLinear().range([0, width]);
      const y = d3.scaleLinear().range([height, 0]);

      const svg = d3.select("#grafic").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})`);

      x.domain([0, d3.max(data, d => d.Hores)]);
      y.domain([0, 10]);

      svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("cx", d => x(d.Hores))
        .attr("cy", d => y(d.Felicitat))
        .attr("r", 5);

      svg.append("g")
        .attr("transform", `translate(0,${height})`)
        .call(d3.axisBottom(x));

      svg.append("g")
        .call(d3.axisLeft(y));

      svg.append("text")
        .attr("transform", "rotate(-90)")
        .attr("y", 0 - margin.left)
        .attr("x", 0 - (height / 2))
        .attr("dy", "1em")
        .style("text-anchor", "middle")
        .text("Felicitat (0-10)");

      svg.append("text")
        .attr("x", width / 2)
        .attr("y", height + margin.top + 20)
        .style("text-anchor", "middle")
        .text("Hores d'Autoaprenentatge");
    });
  </script>
</body>
</html>
```