added solution to d3 challenge add-labels-to-d3-elements (#38208)

2020-02-13 20:59:16 +05:30
parent c61c8c0474
commit 701bbc2ae9
1 changed files with 32 additions and 1 deletions
--- a/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.english.md
+++ b/curriculum/challenges/english/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.english.md
@ -97,7 +97,38 @@ tests:
 <section id='solution'>

 ```js
-// solution required
+<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)
+       .text((d) => d)
+  </script>
+<body>
+
 ```

 </section>