feat: enable new langs (#42491)

Enable italian and portuguese
2021-06-15 00:49:18 -07:00
parent d8d6d20793
commit f25e3e69f8
3301 changed files with 423168 additions and 6 deletions
--- a/curriculum/challenges/italian/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
+++ b/curriculum/challenges/italian/04-data-visualization/data-visualization-with-d3/style-d3-labels.md
@ -0,0 +1,110 @@
+---
+id: 587d7faa367417b2b2512bd3
+title: Style D3 Labels
+challengeType: 6
+forumTopicId: 301492
+dashedName: style-d3-labels
+---
+
+# --description--
+
+D3 methods can add styles to the bar labels. The `fill` attribute sets the color of the text for a `text` node. The `style()` method sets CSS rules for other styles, such as `font-family` or `font-size`.
+
+# --instructions--
+
+Set the `font-size` of the `text` elements to `25px`, and the color of the text to red.
+
+# --hints--
+
+The labels should all have a `fill` color of red.
+
+```js
+assert($('text').css('fill') == 'rgb(255, 0, 0)');
+```
+
+The labels should all have a `font-size` of `25` pixels.
+
+```js
+assert($('text').css('font-size') == '25px');
+```
+
+# --seed--
+
+## --seed-contents--
+
+```html
+<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) => d * 3)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3)
+       // Add your code below this line
+
+
+
+       // Add your code above this line
+  </script>
+</body>
+```
+
+# --solutions--
+
+```html
+<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) => d * 3)
+       .attr("fill", "navy");
+
+    svg.selectAll("text")
+       .data(dataset)
+       .enter()
+       .append("text")
+       .text((d) => d)
+       .attr("x", (d, i) => i * 30)
+       .attr("y", (d, i) => h - (3 * d) - 3)
+       .style("font-size", 25)
+       .attr("fill", "red")
+  </script>
+</body>
+```