Data Visualization with D3 - Use a Pre-Defined Scale to Place Elements

JavaScript
1

Tell us what’s happening:

I need your help with this errors :frowning: The first label should have an x value of approximately 100 and a y value of approximately 368 after applying the scales.
The second label should have an x value of approximately 168 and a y value of approximately 181 after applying the scales.
The third label should have an x value of approximately 350 and a y value of approximately 329 after applying the scales.
The fourth label should have an x value of approximately 141 and a y value of approximately 60 after applying the scales.
The fifth label should have an x value of approximately 449 and a y value of approximately 237 after applying the scales.
The sixth label should have an x value of approximately 280 and a y value of approximately 306 after applying the scales.
The seventh label should have an x value of approximately 370 and a y value of approximately 351 after applying the scales.
The eighth label should have an x value of approximately 270 and a y value of approximately 132 after applying the scales.
The ninth label should have an x value of approximately 140 and a y value of approximately 144 after applying the scales.
The tenth label should have an x value of approximately 88 and a y value of approximately 326 after applying the scales.

Your code so far

<body>
  <script>
    const dataset = [
      [34, 78],
      [109, 280],
      [310, 120],
      [79, 411],
      [420, 220],
      [233, 145],
      [333, 96],
      [222, 333],
      [78, 320],
      [21, 123]
    ];

    const w = 500;
    const h = 500;
    const padding = 60;

    const xScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => d[0])])
      .range([padding, w - padding]);

    const yScale = d3.scaleLinear()
      .domain([0, d3.max(dataset, (d) => d[1])])
      .range([h - padding, padding]);

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

    svg.selectAll("circle")
      .data(dataset)
      .enter()
      .append("circle")
      .attr("cx", (d) => xScale(d[0]))
      .attr("cy", (d) => yScale(d[1]))
      .attr("r", 5);

    svg.selectAll("text")
      .data(dataset)
      .enter()
      .append("text")
      .text((d) => (d[0] + ", " + d[1]))
      .attr("x", (d) => xScale(d[0]) - 10) // Ajuste hacia la izquierda
      .attr("y", (d) => yScale(d[1]) + 5); // Ajuste hacia abajo

  </script>
</body>

Your browser information:

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

Challenge Information:

Data Visualization with D3 - Use a Pre-Defined Scale to Place Elements

1 Like
2

Take a closer look at these two lines:

      .attr("x", (d) => xScale(d[0]) - 10) // Ajuste hacia la izquierda
      .attr("y", (d) => yScale(d[1]) + 5); // Ajuste hacia abajo

And at the instructions referring to these parts:

For the text elements, apply the scales to set the x and y attributes. The labels should be offset to the right of the dots. To do this, add 10 units to the x data value before passing it to the xScale .

3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.