Data Visualization with D3: Add Labels to D3 Elements

JavaScript
1

Tell us what’s happening:

Your code so far


<body>
<script>
  const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];

  const w = 500;
  const h = 100;

  const svg = d3.select("body")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

  svg.selectAll("rect")
     .data(dataset)
     .enter()
     .append("rect")
     .attr("x", (d, i) => i * 30)
     .attr("y", (d, i) => h - 3 * d)
     .attr("width", 25)
     .attr("height", (d, i) => 3 * d)
     .attr("fill", "navy");

  svg.selectAll("text")
     .data(dataset)
     .enter()
      .append("text")
   .attr("x", (d, i) => i * 30)
     .attr("y", (d, i) => h - 3 * d+3)


     // Add your code above this line
</script>
<body>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.88 Safari/537.36.

Challenge: Add Labels to D3 Elements

Link to the challenge:
https://www.freecodecamp.org/learn/data-visualization/data-visualization-with-d3/add-labels-to-d3-elements

2

Welcome to the forum @SuneethaYamani

For future reference, you should describe your issue in the Tell us what’s happening section. Sometimes describing the problem is enough to find the solution.

That being said, there are two issues with your snippet. You are adding one text element for each data point, but:

  • there is no label describing the data point. The text of challenge should help you here:

    use the D3 text() method to set the label equal to the data point value

  • the label is not positioned above the bar. This is because of the coordinate system described in a previous challenge. Since you want the label higher, this means a lower value for the y coordinate.

Let me know if this helps or you need more guidance :slightly_smiling_face:

1 Like