freeCodeCamp/index.md at c8df1d15d0f7f803bdb67c94c897375e6b91732c

Files

The Coding Aviator 39a9da5c1d Added solution to D3 predefined scale challenge (#34242 )

* Update index.md

* Update index.md

* spacing

* Update index.md

2019-05-16 09:04:54 -07:00

1.9 KiB

Raw Blame History

title

title
Use a Pre-Defined Scale to Place Elements

Use a Pre-Defined Scale to Place Elements

Hint 1

Use the .attr() function, which accepts 2 parameters.

Hint 2

Use a callback function on the .attr() functions.

Hint 3

The radius is set using the rattribute.

Solution

Change the svg.selectAll("circle") and svg.selectAll("text") codeblocks to the following to complete the challenge, this has been done by incorporating all the hints from above:

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))
  .attr("y", (d) => yScale(d[1]));

The full solution looks like:

<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))
      .attr("y", (d) => yScale(d[1]));
  </script>
</body>

1.9 KiB Raw Blame History