Added solution to D3 predefined scale challenge (#34242)

* Update index.md * Update index.md * spacing * Update index.md
2019-05-16 21:34:54 +05:30
parent e6fef5ff34
commit 39a9da5c1d
1 changed files with 85 additions and 3 deletions
--- a/guide/english/certifications/data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements/index.md
+++ b/guide/english/certifications/data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements/index.md
@ -3,8 +3,90 @@ title: Use a Pre-Defined Scale to Place Elements
 ---
 ## Use a Pre-Defined Scale to Place Elements

-This is a stub. <a href='https://github.com/freecodecamp/guides/tree/master/src/pages/certifications/data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements/index.md' target='_blank' rel='nofollow'>Help our community expand it</a>.
+### Hint 1

-<a href='https://github.com/freecodecamp/guides/blob/master/README.md' target='_blank' rel='nofollow'>This quick style guide will help ensure your pull request gets accepted</a>.
+Use the `.attr()` function, which accepts 2 parameters.

-<!-- The article goes here, in GitHub-flavored Markdown. Feel free to add YouTube videos, images, and CodePen/JSBin embeds  -->
+### Hint 2
+
+Use a callback function on the `.attr()` functions.
+
+### Hint 3
+
+The radius is set using the `r`attribute.
+
+### 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:
+
+```js
+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:
+
+```html
+<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>
+```