gaspersic/freeCodeCamp
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

chore(learn): remove other language curriculum Chinese (#39745)

Browse Source
This commit is contained in:
Randell Dawson
2020-10-01 11:01:10 -07:00
committed by GitHub
parent 17a6a8868b
commit 11b8e5ba9a
5672 changed files with 0 additions and 399257 deletions
Download Patch File Download Diff File Expand all files Collapse all files

90
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-a-hover-effect-to-a-d3-element.portuguese.md
View File

@@ -1,90 +0,0 @@
---
id: 587d7faa367417b2b2512bd4
title: Add a Hover Effect to a D3 Element
challengeType: 6
videoUrl: ''
localeTitle: Adicionar um efeito de foco a um elemento D3
---
## Description
<section id="description"> É possível adicionar efeitos que destacam uma barra quando o usuário passa sobre ela com o mouse. Até agora, o estilo dos retângulos é aplicado com os métodos internos D3 e SVG, mas você também pode usar CSS. Você define a classe CSS nos elementos SVG com o método <code>attr()</code> . Em seguida, a pseudo-classe <code>:hover</code> para sua nova classe contém as regras de estilo para qualquer efeito de foco. </section>
## Instructions
<section id="instructions"> Use o método <code>attr()</code> para adicionar uma classe de <code>bar</code> a todos os elementos <code>rect</code> . Isso altera a cor de <code>fill</code> da barra para marrom quando você passa o mouse sobre ela. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seus elementos <code>rect</code> devem ter uma classe de <code>bar</code> .
testString: 'assert($("rect").attr("class") == "bar", "Your <code>rect</code> elements should have a class of <code>bar</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.bar:hover {
fill: brown;
}
</style>
<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")
// Add your code below this line
// Add your code above this line
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);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

109
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-a-tooltip-to-a-d3-element.portuguese.md
View File

@@ -1,109 +0,0 @@
---
id: 587d7faa367417b2b2512bd6
title: Add a Tooltip to a D3 Element
challengeType: 6
videoUrl: ''
localeTitle: Adicionar uma dica de ferramenta a um elemento D3
---
## Description
<section id="description"> Uma dica de ferramenta mostra mais informações sobre um item em uma página quando o usuário passa o mouse sobre esse item. Existem várias maneiras de adicionar uma dica de ferramenta a uma visualização. Esse desafio usa o elemento de <code>title</code> SVG. pares de <code>title</code> com o método <code>text()</code> para adicionar dinamicamente dados às barras. </section>
## Instructions
<section id="instructions"> Anexe um elemento de <code>title</code> sob cada nó <code>rect</code> . Em seguida, chame o método <code>text()</code> com uma função de retorno de chamada para que o texto exiba o valor dos dados. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve ter 9 elementos de <code>title</code> .
testString: 'assert($("title").length == 9, "Your code should have 9 <code>title</code> elements.");'
- text: O primeiro elemento do <code>title</code> deve ter um texto de dica de ferramenta de 12.
testString: 'assert($("title").eq(0).text() == "12", "The first <code>title</code> element should have tooltip text of 12.");'
- text: O segundo elemento do <code>title</code> deve ter o texto da dica de ferramenta de 31.
testString: 'assert($("title").eq(1).text() == "31", "The second <code>title</code> element should have tooltip text of 31.");'
- text: O terceiro elemento do <code>title</code> deve ter o texto da dica de ferramenta de 22.
testString: 'assert($("title").eq(2).text() == "22", "The third <code>title</code> element should have tooltip text of 22.");'
- text: O quarto elemento do <code>title</code> deve ter um texto de dica de ferramenta de 17.
testString: 'assert($("title").eq(3).text() == "17", "The fourth <code>title</code> element should have tooltip text of 17.");'
- text: O quinto elemento do <code>title</code> deve ter um texto de dica de ferramenta de 25.
testString: 'assert($("title").eq(4).text() == "25", "The fifth <code>title</code> element should have tooltip text of 25.");'
- text: O sexto elemento do <code>title</code> deve ter um texto de dica de ferramenta de 18.
testString: 'assert($("title").eq(5).text() == "18", "The sixth <code>title</code> element should have tooltip text of 18.");'
- text: O sétimo elemento de <code>title</code> deve ter um texto de dica de ferramenta de 29.
testString: 'assert($("title").eq(6).text() == "29", "The seventh <code>title</code> element should have tooltip text of 29.");'
- text: O oitavo elemento de <code>title</code> deve ter um texto de dica de ferramenta de 14.
testString: 'assert($("title").eq(7).text() == "14", "The eighth <code>title</code> element should have tooltip text of 14.");'
- text: O nono elemento de <code>title</code> deve ter um texto de dica de ferramenta de 9.
testString: 'assert($("title").eq(8).text() == "9", "The ninth <code>title</code> element should have tooltip text of 9.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.bar:hover {
fill: brown;
}
</style>
<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")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => d)
.attr("x", (d, i) => i * 30)
.attr("y", (d, i) => h - (d * 3 + 3))
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

104
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-attributes-to-the-circle-elements.portuguese.md
View File

@@ -1,104 +0,0 @@
---
id: 587d7fab367417b2b2512bd8
title: Add Attributes to the Circle Elements
challengeType: 6
videoUrl: ''
localeTitle: Adicionar atributos aos elementos do círculo
---
## Description
<section id="description"> O último desafio criou os elementos do <code>circle</code> para cada ponto no <code>dataset</code> e os anexou à tela do SVG. Mas o D3 precisa de mais informações sobre a posição e o tamanho de cada <code>circle</code> para exibi-los corretamente. Um <code>circle</code> no SVG tem três atributos principais. Os atributos <code>cx</code> e <code>cy</code> são as coordenadas. Eles dizem ao D3 onde posicionar o <em>centro</em> da forma na tela do SVG. O raio (atributo <code>r</code> ) fornece o tamanho do <code>circle</code> . Assim como o <code>rect</code> <code>y</code> coordenar, o <code>cy</code> atributo para um <code>circle</code> é medido a partir do topo da tela SVG, não de baixo. Todos os três atributos podem usar uma função de retorno de chamada para definir seus valores dinamicamente. Lembre-se de que todos os métodos encadeados após <code>data(dataset)</code> executados uma vez por item no <code>dataset</code> . O parâmetro <code>d</code> na função de retorno de chamada se refere ao item atual no <code>dataset</code> , que é uma matriz para cada ponto. Você usa a notação de colchetes, como <code>d[0]</code> , para acessar os valores nessa matriz. </section>
## Instructions
<section id="instructions"> Adicione os atributos <code>cx</code> , <code>cy</code> e <code>r</code> aos elementos do <code>circle</code> . O valor <code>cx</code> deve ser o primeiro número da matriz para cada item no <code>dataset</code> . O valor <code>cy</code> deve ser baseado no segundo número do array, mas certifique-se de mostrar o gráfico com o lado direito para cima e não invertido. O valor de <code>r</code> deve ser 5 para todos os círculos. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve ter 10 elementos de <code>circle</code> .
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
- text: 'O primeiro elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 34, um valor de <code>cy</code> de 422 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(0).attr("cx") == "34" && $("circle").eq(0).attr("cy") == "422" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of 34, a <code>cy</code> value of 422, and an <code>r</code> value of 5.");'
- text: 'O segundo elemento <code>circle</code> deve ter um valor de <code>cx</code> de 109, um valor de <code>cy</code> de 220 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(1).attr("cx") == "109" && $("circle").eq(1).attr("cy") == "220" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of 109, a <code>cy</code> value of 220, and an <code>r</code> value of 5.");'
- text: 'O terceiro elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 310, um valor de <code>cy</code> de 380 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(2).attr("cx") == "310" && $("circle").eq(2).attr("cy") == "380" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of 310, a <code>cy</code> value of 380, and an <code>r</code> value of 5.");'
- text: 'O quarto elemento <code>circle</code> deve ter um valor <code>cx</code> de 79, um valor <code>cy</code> de 89 e um valor <code>r</code> de 5.'
testString: 'assert($("circle").eq(3).attr("cx") == "79" && $("circle").eq(3).attr("cy") == "89" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of 79, a <code>cy</code> value of 89, and an <code>r</code> value of 5.");'
- text: 'O quinto elemento <code>circle</code> deve ter um valor <code>cx</code> de 420, um valor <code>cy</code> de 280 e um valor <code>r</code> de 5.'
testString: 'assert($("circle").eq(4).attr("cx") == "420" && $("circle").eq(4).attr("cy") == "280" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of 420, a <code>cy</code> value of 280, and an <code>r</code> value of 5.");'
- text: 'O sexto elemento <code>circle</code> deve ter um valor <code>cx</code> de 233, um valor <code>cy</code> de 355 e um valor <code>r</code> de 5.'
testString: 'assert($("circle").eq(5).attr("cx") == "233" && $("circle").eq(5).attr("cy") == "355" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of 233, a <code>cy</code> value of 355, and an <code>r</code> value of 5.");'
- text: 'O sétimo elemento <code>circle</code> deve ter um valor <code>cx</code> de 333, um valor <code>cy</code> de 404 e um valor <code>r</code> de 5.'
testString: 'assert($("circle").eq(6).attr("cx") == "333" && $("circle").eq(6).attr("cy") == "404" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of 333, a <code>cy</code> value of 404, and an <code>r</code> value of 5.");'
- text: 'O oitavo elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 222, um valor de <code>cy</code> de 167 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(7).attr("cx") == "222" && $("circle").eq(7).attr("cy") == "167" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of 222, a <code>cy</code> value of 167, and an <code>r</code> value of 5.");'
- text: 'O nono elemento <code>circle</code> deve ter um valor de <code>cx</code> de 78, um valor de <code>cy</code> de 180 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(8).attr("cx") == "78" && $("circle").eq(8).attr("cy") == "180" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of 78, a <code>cy</code> value of 180, and an <code>r</code> value of 5.");'
- text: 'O décimo elemento de <code>circle</code> deve ter um valor de <code>cx</code> de 21, um valor de <code>cy</code> de 377 e um valor de <code>r</code> de 5.'
testString: 'assert($("circle").eq(9).attr("cx") == "21" && $("circle").eq(9).attr("cy") == "377" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of 21, a <code>cy</code> value of 377, and an <code>r</code> value of 5.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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 svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

117
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-axes-to-a-visualization.portuguese.md
View File

@@ -1,117 +0,0 @@
---
id: 587d7fad367417b2b2512bdf
title: Add Axes to a Visualization
challengeType: 6
videoUrl: ''
localeTitle: Adicionar eixos a uma visualização
---
## Description
<section id="description"> Outra maneira de melhorar o gráfico de dispersão é adicionar um eixo xe um eixo y. D3 tem dois métodos <code>axisLeft()</code> e <code>axisBottom()</code> para renderizar os eixos y e x, respectivamente. (Axes é a forma plural do eixo). Aqui está um exemplo para criar o eixo x baseado no <code>xScale</code> nos desafios anteriores: <code>const xAxis = d3.axisBottom(xScale);</code> O próximo passo é renderizar o eixo na tela do SVG. Para fazer isso, você pode usar um componente SVG geral, o elemento <code>g</code> . O <code>g</code> representa o grupo. Ao contrário de <code>rect</code> , <code>circle</code> e <code>text</code> , um eixo é apenas uma linha reta quando é renderizado. Porque é uma forma simples, usando <code>g</code> obras. A última etapa é aplicar um atributo <code>transform</code> para posicionar o eixo na tela do SVG no lugar certo. Caso contrário, a linha seria renderizada ao longo da borda da tela do SVG e não seria visível. O SVG suporta diferentes tipos de <code>transforms</code> , mas o posicionamento de um eixo precisa ser <code>translate</code> . Quando é aplicado ao elemento <code>g</code> , ele move todo o grupo para cima e para baixo pelos valores dados. Aqui está um exemplo: <blockquote> const xAxis = d3.axisBottom (xScale); <br><br> svg.append (&quot;g&quot;) <br> .attr (&quot;transformar&quot;, &quot;traduzir (0,&quot; + (h - preenchimento) + &quot;)&quot;) <br> .call (xAxis); </blockquote> O código acima coloca o eixo x na parte inferior da tela do SVG. Então é passado como um argumento para o método <code>call()</code> . O eixo y funciona da mesma maneira, exceto que o argumento de <code>translate</code> está no formato (x, 0). Como <code>translate</code> é uma string no método <code>attr()</code> acima, você pode usar a concatenação para incluir valores de variáveis ​​para seus argumentos. </section>
## Instructions
<section id="instructions"> O gráfico de dispersão agora possui um eixo x. Crie um eixo y em uma variável chamada <code>yAxis</code> usando o método <code>axisLeft()</code> . Em seguida, renderize o eixo usando um elemento <code>g</code> . Certifique-se de usar um atributo <code>transform</code> para converter o eixo pela quantidade de unidades de preenchimento à direita e 0 unidades abaixo. Lembre-se de <code>call()</code> o eixo. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve usar o método <code>axisLeft()</code> com <code>yScale</code> passado como argumento.
testString: 'assert(code.match(/\.axisLeft\(yScale\)/g), "Your code should use the <code>axisLeft()</code> method with <code>yScale</code> passed as the argument.");'
- text: 'O elemento y-axis <code>g</code> deve ter um atributo <code>transform</code> para converter o eixo por (60, 0).'
testString: 'assert($("g").eq(1).attr("transform").match(/translate\(60\s*?,\s*?0\)/g), "The y-axis <code>g</code> element should have a <code>transform</code> attribute to translate the axis by (60, 0).");'
- text: Seu código deve chamar o <code>yAxis</code> .
testString: 'assert(code.match(/\.call\(yAxis\)/g), "Your code should call the <code>yAxis</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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", (d) => 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]))
const xAxis = d3.axisBottom(xScale);
// Add your code below this line
const yAxis = undefined;
// Add your code above this line
svg.append("g")
.attr("transform", "translate(0," + (h - padding) + ")")
.call(xAxis);
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

73
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-classes-with-d3.portuguese.md
View File

@@ -1,73 +0,0 @@
---
id: 587d7fa7367417b2b2512bc8
title: Add Classes with D3
challengeType: 6
videoUrl: ''
localeTitle: ''
---
## Description
<section id="description"> Usar muitos estilos inline em elementos HTML é difícil de gerenciar, mesmo para aplicativos menores. É mais fácil adicionar uma classe a elementos e estilizar essa classe uma vez usando regras CSS. D3 possui o método <code>attr()</code> para adicionar qualquer atributo HTML a um elemento, incluindo um nome de classe. O método <code>attr()</code> funciona da mesma maneira que <code>style()</code> faz. Leva valores separados por vírgula e pode usar uma função de retorno de chamada. Aqui está um exemplo para adicionar uma classe de &quot;container&quot; a uma seleção: <code>selection.attr(&quot;class&quot;, &quot;container&quot;);</code> </section>
## Instructions
<section id="instructions"> Adicione o método <code>attr()</code> ao código no editor e coloque uma classe de <code>bar</code> nos elementos <code>div</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seus elementos <code>div</code> devem ter uma classe de <code>bar</code> .
testString: 'assert($("div").attr("class") == "bar", "Your <code>div</code> elements should have a class of <code>bar</code>.");'
- text: Seu código deve usar o método <code>attr()</code> .
testString: 'assert(code.match(/\.attr/g), "Your code should use the <code>attr()</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

67
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-document-elements-with-d3.portuguese.md
View File

@@ -1,67 +0,0 @@
---
id: 587d7fa6367417b2b2512bc2
title: Add Document Elements with D3
challengeType: 6
videoUrl: ''
localeTitle: Adicionar elementos do documento com D3
---
## Description
<section id="description"> O D3 possui vários métodos que permitem adicionar e alterar elementos no documento. O método <code>select()</code> seleciona um elemento do documento. Leva um argumento para o nome do elemento desejado e retorna um nó HTML para o primeiro elemento no documento que corresponde ao nome. Aqui está um exemplo: <code>const anchor = d3.select(&quot;a&quot;);</code> O exemplo acima encontra a primeira tag âncora na página e salva um nó HTML para ela na <code>anchor</code> da variável. Você pode usar a seleção com outros métodos. A parte &quot;d3&quot; do exemplo é uma referência ao objeto D3, que é como você acessa os métodos D3. Dois outros métodos úteis são <code>append()</code> e <code>text()</code> . O método <code>append()</code> recebe um argumento para o elemento que você deseja adicionar ao documento. Ele anexa um nó HTML a um item selecionado e retorna um identificador para esse nó. O método <code>text()</code> define o texto do nó selecionado ou obtém o texto atual. Para definir o valor, você passa uma string como um argumento dentro dos parênteses do método. Aqui está um exemplo que seleciona uma lista não ordenada, acrescenta um item de lista e adiciona texto: <blockquote> d3.select (&quot;ul&quot;) <br> .append (&quot;li&quot;) <br> .text (&quot;Item muito importante&quot;); </blockquote> O D3 permite encadear vários métodos em conjunto com períodos para executar várias ações seguidas. </section>
## Instructions
<section id="instructions"> Use o método <code>select</code> para selecionar a tag <code>body</code> no documento. Em seguida, <code>append</code> uma tag <code>h1</code> a ela e adicione o texto &quot;Learning D3&quot; no elemento <code>h1</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O <code>body</code> deve ter um elemento <code>h1</code> .
testString: 'assert($("body").children("h1").length == 1, "The <code>body</code> should have one <code>h1</code> element.");'
- text: O elemento <code>h1</code> deve ter o texto &quot;Aprendizagem D3&quot;.
testString: 'assert($("h1").text() == "Learning D3", "The <code>h1</code> element should have the text "Learning D3" in it.");'
- text: Seu código deve acessar o objeto <code>d3</code> .
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
- text: Seu código deve usar o método <code>select</code> .
testString: 'assert(code.match(/\.select/g), "Your code should use the <code>select</code> method.");'
- text: Seu código deve usar o método <code>append</code> .
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append</code> method.");'
- text: Seu código deve usar o método de <code>text</code> .
testString: 'assert(code.match(/\.text/g), "Your code should use the <code>text</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

66
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-inline-styling-to-elements.portuguese.md
View File

@@ -1,66 +0,0 @@
---
id: 587d7fa7367417b2b2512bc6
title: Add Inline Styling to Elements
challengeType: 6
videoUrl: ''
localeTitle: Adicionar estilo inline aos elementos
---
## Description
<section id="description"> D3 permite adicionar estilos CSS inline em elementos dinâmicos com o método <code>style()</code> . O método <code>style()</code> usa um par de valores-chave separados por vírgulas como argumento. Aqui está um exemplo para definir a cor do texto da seleção para azul: <code>selection.style(&quot;color&quot;,&quot;blue&quot;);</code> </section>
## Instructions
<section id="instructions"> Adicione o método <code>style()</code> ao código no editor para fazer com que todo o texto exibido tenha uma <code>font-family</code> de <code>font-family</code> de <code>verdana</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seus elementos <code>h2</code> devem ter uma <code>font-family</code> de <code>font-family</code> de verdana.
testString: 'assert($("h2").css("font-family") == "verdana", "Your <code>h2</code> elements should have a <code>font-family</code> of verdana.");'
- text: Seu código deve usar o método <code>style()</code> .
testString: 'assert(code.match(/\.style/g), "Your code should use the <code>style()</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

97
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-labels-to-d3-elements.portuguese.md
View File

@@ -1,97 +0,0 @@
---
id: 587d7faa367417b2b2512bd2
title: Add Labels to D3 Elements
challengeType: 6
videoUrl: ''
localeTitle: Adicionar rótulos aos elementos D3
---
## Description
<section id="description"> O D3 permite rotular um elemento gráfico, como uma barra, usando o elemento de <code>text</code> SVG. Como o elemento <code>rect</code> , um elemento de <code>text</code> precisa ter os atributos <code>x</code> e <code>y</code> , para colocá-lo na tela do SVG. Também precisa acessar os dados para exibir esses valores. A D3 oferece um alto nível de controle sobre como você rotula suas barras. </section>
## Instructions
<section id="instructions"> O código no editor já vincula os dados a cada novo elemento de <code>text</code> . Primeiro, anexe os nós de <code>text</code> ao <code>svg</code> . Em seguida, adicione atributos para as coordenadas <code>x</code> e <code>y</code> . Eles devem ser calculados da mesma maneira que os <code>rect</code> , exceto que o valor <code>y</code> para o <code>text</code> deve fazer com que o rótulo fique 3 unidades acima da barra. Finalmente, use o método D3 <code>text()</code> para definir o rótulo igual ao valor do ponto de dados. <strong>Nota</strong> <br> Para o rótulo ficar mais alto que a barra, decida se o valor <code>y</code> do <code>text</code> deve ser 3 maior ou 3 menor que o valor <code>y</code> da barra. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro elemento de <code>text</code> deve ter um rótulo de 12 e um valor de <code>y</code> de 61.
testString: 'assert($("text").eq(0).text() == "12" && $("text").eq(0).attr("y") == "61", "The first <code>text</code> element should have a label of 12 and a <code>y</code> value of 61.");'
- text: O segundo elemento de <code>text</code> deve ter um rótulo de 31 e um valor de <code>y</code> de 4.
testString: 'assert($("text").eq(1).text() == "31" && $("text").eq(1).attr("y") == "4", "The second <code>text</code> element should have a label of 31 and a <code>y</code> value of 4.");'
- text: O terceiro elemento de <code>text</code> deve ter um rótulo de 22 e um valor de <code>y</code> de 31.
testString: 'assert($("text").eq(2).text() == "22" && $("text").eq(2).attr("y") == "31", "The third <code>text</code> element should have a label of 22 and a <code>y</code> value of 31.");'
- text: O quarto elemento de <code>text</code> deve ter um rótulo de 17 e um valor de <code>y</code> de 46.
testString: 'assert($("text").eq(3).text() == "17" && $("text").eq(3).attr("y") == "46", "The fourth <code>text</code> element should have a label of 17 and a <code>y</code> value of 46.");'
- text: O quinto elemento de <code>text</code> deve ter um rótulo de 25 e um valor de <code>y</code> de 22.
testString: 'assert($("text").eq(4).text() == "25" && $("text").eq(4).attr("y") == "22", "The fifth <code>text</code> element should have a label of 25 and a <code>y</code> value of 22.");'
- text: O sexto elemento de <code>text</code> deve ter um rótulo de 18 e um valor de <code>y</code> de 43.
testString: 'assert($("text").eq(5).text() == "18" && $("text").eq(5).attr("y") == "43", "The sixth <code>text</code> element should have a label of 18 and a <code>y</code> value of 43.");'
- text: O sétimo elemento de <code>text</code> deve ter um rótulo de 29 e um valor de <code>y</code> de 10.
testString: 'assert($("text").eq(6).text() == "29" && $("text").eq(6).attr("y") == "10", "The seventh <code>text</code> element should have a label of 29 and a <code>y</code> value of 10.");'
- text: O oitavo elemento de <code>text</code> deve ter um rótulo de 14 e um valor de <code>y</code> de 55.
testString: 'assert($("text").eq(7).text() == "14" && $("text").eq(7).attr("y") == "55", "The eighth <code>text</code> element should have a label of 14 and a <code>y</code> value of 55.");'
- text: O nono elemento de <code>text</code> deve ter um rótulo de 9 e um valor de <code>y</code> de 70.
testString: 'assert($("text").eq(8).text() == "9" && $("text").eq(8).attr("y") == "70", "The ninth <code>text</code> element should have a label of 9 and a <code>y</code> value of 70.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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) => 3 * d)
.attr("fill", "navy");
svg.selectAll("text")
.data(dataset)
.enter()
// Add your code below this line
// Add your code above this line
</script>
<body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

111
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/add-labels-to-scatter-plot-circles.portuguese.md
View File

@@ -1,111 +0,0 @@
---
id: 587d7fab367417b2b2512bd9
title: Add Labels to Scatter Plot Circles
challengeType: 6
videoUrl: ''
localeTitle: Adicionar rótulos aos círculos de plotagem de dispersão
---
## Description
<section id="description"> Você pode adicionar texto para criar rótulos para os pontos em um gráfico de dispersão. O objetivo é exibir os valores separados por vírgulas dos primeiros campos ( <code>x</code> ) e segundos ( <code>y</code> ) de cada item no <code>dataset</code> . As <code>text</code> nós precisamos <code>x</code> e <code>y</code> atributos para posicioná-la na tela SVG. Nesse desafio, o valor <code>y</code> (que determina a altura) pode usar o mesmo valor que o <code>circle</code> usa para seu atributo <code>cy</code> . O valor <code>x</code> pode ser um pouco maior que o valor <code>cx</code> do <code>circle</code> , portanto, o rótulo fica visível. Isso empurrará o rótulo para a direita do ponto plotado. </section>
## Instructions
<section id="instructions"> Rotule cada ponto no gráfico de dispersão usando os elementos de <code>text</code> . O texto do rótulo deve ser os dois valores separados por uma vírgula e um espaço. Por exemplo, o rótulo para o primeiro ponto é &quot;34, 78&quot;. Defina o atributo <code>x</code> para que ele seja 5 unidades a mais que o valor usado para o atributo <code>cx</code> no <code>circle</code> . Defina o atributo <code>y</code> da mesma maneira que é usado para o valor de <code>cy</code> no <code>circle</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve ter 10 elementos de <code>text</code> .
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
- text: 'A primeira etiqueta deve ter o texto &quot;34, 78&quot;, um valor <code>x</code> de 39 e um valor <code>y</code> de 422.'
testString: 'assert($("text").eq(0).text() == "34, 78" && $("text").eq(0).attr("x") == "39" && $("text").eq(0).attr("y") == "422", "The first label should have text of "34, 78", an <code>x</code> value of 39, and a <code>y</code> value of 422.");'
- text: 'A segunda etiqueta deve ter texto de &quot;109, 280&quot;, um valor de <code>x</code> de 114 e um valor de <code>y</code> de 220.'
testString: 'assert($("text").eq(1).text() == "109, 280" && $("text").eq(1).attr("x") == "114" && $("text").eq(1).attr("y") == "220", "The second label should have text of "109, 280", an <code>x</code> value of 114, and a <code>y</code> value of 220.");'
- text: 'O terceiro rótulo deve ter o texto &quot;310, 120&quot;, um valor <code>x</code> de 315 e um valor <code>y</code> de 380.'
testString: 'assert($("text").eq(2).text() == "310, 120" && $("text").eq(2).attr("x") == "315" && $("text").eq(2).attr("y") == "380", "The third label should have text of "310, 120", an <code>x</code> value of 315, and a <code>y</code> value of 380.");'
- text: 'O quarto rótulo deve ter o texto &quot;79, 411&quot;, um valor <code>x</code> de 84 e um valor <code>y</code> de 89.'
testString: 'assert($("text").eq(3).text() == "79, 411" && $("text").eq(3).attr("x") == "84" && $("text").eq(3).attr("y") == "89", "The fourth label should have text of "79, 411", an <code>x</code> value of 84, and a <code>y</code> value of 89.");'
- text: 'O quinto rótulo deve ter texto de &quot;420, 220&quot;, um valor de <code>x</code> de 425 e um valor de <code>y</code> de 280.'
testString: 'assert($("text").eq(4).text() == "420, 220" && $("text").eq(4).attr("x") == "425" && $("text").eq(4).attr("y") == "280", "The fifth label should have text of "420, 220", an <code>x</code> value of 425, and a <code>y</code> value of 280.");'
- text: 'O sexto rótulo deve ter texto de &quot;233, 145&quot;, um valor de <code>x</code> de 238 e um valor de <code>y</code> de 355.'
testString: 'assert($("text").eq(5).text() == "233, 145" && $("text").eq(5).attr("x") == "238" && $("text").eq(5).attr("y") == "355", "The sixth label should have text of "233, 145", an <code>x</code> value of 238, and a <code>y</code> value of 355.");'
- text: 'O sétimo rótulo deve ter texto de &quot;333, 96&quot;, um valor de <code>x</code> de 338 e um valor de <code>y</code> de 404.'
testString: 'assert($("text").eq(6).text() == "333, 96" && $("text").eq(6).attr("x") == "338" && $("text").eq(6).attr("y") == "404", "The seventh label should have text of "333, 96", an <code>x</code> value of 338, and a <code>y</code> value of 404.");'
- text: 'O oitavo rótulo deve ter o texto &quot;222, 333&quot;, um valor <code>x</code> de 227 e um valor <code>y</code> de 167.'
testString: 'assert($("text").eq(7).text() == "222, 333" && $("text").eq(7).attr("x") == "227" && $("text").eq(7).attr("y") == "167", "The eighth label should have text of "222, 333", an <code>x</code> value of 227, and a <code>y</code> value of 167.");'
- text: 'O nono rótulo deve ter texto de &quot;78, 320&quot;, um valor de <code>x</code> de 83 e um valor de <code>y</code> de 180.'
testString: 'assert($("text").eq(8).text() == "78, 320" && $("text").eq(8).attr("x") == "83" && $("text").eq(8).attr("y") == "180", "The ninth label should have text of "78, 320", an <code>x</code> value of 83, and a <code>y</code> value of 180.");'
- text: 'O décimo rótulo deve ter texto de &quot;21, 123&quot;, um valor de <code>x</code> de 26 e um valor de <code>y</code> de 377.'
testString: 'assert($("text").eq(9).text() == "21, 123" && $("text").eq(9).attr("x") == "26" && $("text").eq(9).attr("y") == "377", "The tenth label should have text of "21, 123", an <code>x</code> value of 26, and a <code>y</code> value of 377.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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 svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
.data(dataset)
.enter()
.append("circle")
.attr("cx", (d, i) => d[0])
.attr("cy", (d, i) => h - d[1])
.attr("r", 5);
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

80
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/change-styles-based-on-data.portuguese.md
View File

@@ -1,80 +0,0 @@
---
id: 587d7fa7367417b2b2512bc7
title: Change Styles Based on Data
challengeType: 6
videoUrl: ''
localeTitle: Alterar estilos com base em dados
---
## Description
<section id="description"> D3 é sobre visualização e apresentação de dados. É provável que você queira alterar o estilo dos elementos com base nos dados. Você pode usar uma função de retorno de chamada no método <code>style()</code> para alterar o estilo de diferentes elementos. Por exemplo, você pode querer colorir um ponto de dados azul se tiver um valor menor que 20 e vermelho caso contrário. Você pode usar uma função de retorno de chamada no método <code>style()</code> e incluir a lógica condicional. A função de retorno de chamada usa o parâmetro <code>d</code> para representar o ponto de dados: <blockquote> selection.style (&quot;cor&quot;, (d) =&gt; { <br> / * Lógica que retorna a cor com base em uma condição * / <br> }); </blockquote> O método <code>style()</code> não se limita a definir a <code>color</code> - também pode ser usado com outras propriedades CSS. </section>
## Instructions
<section id="instructions"> Adicione o método <code>style()</code> ao código no editor para definir a <code>color</code> dos elementos <code>h2</code> condicionalmente. Escreva a função de retorno de chamada, portanto, se o valor dos dados for menor que 20, ele retornará &quot;vermelho&quot;, caso contrário, retornará &quot;verde&quot;. <strong>Nota</strong> <br> Você pode usar a lógica if-else ou o operador ternário. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>h2</code> deve ter uma <code>color</code> vermelha.
testString: 'assert($("h2").eq(0).css("color") == "rgb(255, 0, 0)", "The first <code>h2</code> should have a <code>color</code> of red.");'
- text: O segundo <code>h2</code> deve ter uma <code>color</code> verde.
testString: 'assert($("h2").eq(1).css("color") == "rgb(0, 128, 0)", "The second <code>h2</code> should have a <code>color</code> of green.");'
- text: O terceiro <code>h2</code> deve ter uma <code>color</code> verde.
testString: 'assert($("h2").eq(2).css("color") == "rgb(0, 128, 0)", "The third <code>h2</code> should have a <code>color</code> of green.");'
- text: O quarto <code>h2</code> deve ter uma <code>color</code> vermelha.
testString: 'assert($("h2").eq(3).css("color") == "rgb(255, 0, 0)", "The fourth <code>h2</code> should have a <code>color</code> of red.");'
- text: O quinto <code>h2</code> deve ter uma <code>color</code> verde.
testString: 'assert($("h2").eq(4).css("color") == "rgb(0, 128, 0)", "The fifth <code>h2</code> should have a <code>color</code> of green.");'
- text: O sexto <code>h2</code> deve ter uma <code>color</code> vermelha.
testString: 'assert($("h2").eq(5).css("color") == "rgb(255, 0, 0)", "The sixth <code>h2</code> should have a <code>color</code> of red.");'
- text: A sétima <code>h2</code> deve ter uma <code>color</code> verde.
testString: 'assert($("h2").eq(6).css("color") == "rgb(0, 128, 0)", "The seventh <code>h2</code> should have a <code>color</code> of green.");'
- text: O oitavo <code>h2</code> deve ter uma <code>color</code> vermelha.
testString: 'assert($("h2").eq(7).css("color") == "rgb(255, 0, 0)", "The eighth <code>h2</code> should have a <code>color</code> of red.");'
- text: O nono <code>h2</code> deve ter uma <code>color</code> vermelha.
testString: 'assert($("h2").eq(8).css("color") == "rgb(255, 0, 0)", "The ninth <code>h2</code> should have a <code>color</code> of red.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
.text((d) => (d + " USD"))
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

75
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/change-the-color-of-an-svg-element.portuguese.md
View File

@@ -1,75 +0,0 @@
---
id: 587d7fa9367417b2b2512bd1
title: Change the Color of an SVG Element
challengeType: 6
videoUrl: ''
localeTitle: Alterar a cor de um elemento SVG
---
## Description
<section id="description"> As barras estão na posição correta, mas todas são da mesma cor preta. O SVG tem uma maneira de alterar a cor das barras. No SVG, uma forma <code>rect</code> é colorida com o atributo de <code>fill</code> . Ele suporta códigos hexadecimais, nomes de cores e valores de rgb, além de opções mais complexas, como gradientes e transparência. </section>
## Instructions
<section id="instructions"> Adicione um método <code>attr()</code> para definir o &quot;preenchimento&quot; de todas as barras para a cor &quot;navy&quot;. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: As barras devem ter uma cor de <code>fill</code> da Marinha.
testString: 'assert($("rect").css("fill") == "rgb(0, 0, 128)", "The bars should all have a <code>fill</code> color of navy.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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) => 3 * d)
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

90
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/change-the-presentation-of-a-bar-chart.portuguese.md
View File

@@ -1,90 +0,0 @@
---
id: 587d7fa8367417b2b2512bca
title: Change the Presentation of a Bar Chart
challengeType: 6
videoUrl: ''
localeTitle: Alterar a apresentação de um gráfico de barras
---
## Description
<section id="description"> O último desafio criou um gráfico de barras, mas há algumas alterações de formatação que podem melhorá-lo: 1) Adicione espaço entre cada barra para separá-las visualmente, o que é feito adicionando uma margem ao CSS para a classe de <code>bar</code> 2) Aumentar a altura das barras para melhor mostrar a diferença de valores, o que é feito multiplicando o valor por um número para dimensionar a altura </section>
## Instructions
<section id="instructions"> Primeiro, adicione uma <code>margin</code> de 2px à classe de <code>bar</code> na tag de <code>style</code> . Em seguida, altere a função de retorno de chamada no método <code>style()</code> para que ele retorne um valor 10 vezes o valor dos dados originais (mais o &quot;px&quot;). <strong>Nota</strong> <br> Multiplicar cada ponto de dados pela <em>mesma</em> constante apenas altera a escala. É como aumentar o zoom e isso não altera o significado dos dados subjacentes. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>div</code> deve ter uma <code>height</code> de 120 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(0).css("height") == "120px" && $("div").eq(0).css("margin-right") == "2px", "The first <code>div</code> should have a <code>height</code> of 120 pixels and a <code>margin</code> of 2 pixels.");'
- text: O segundo <code>div</code> deve ter uma <code>height</code> de 310 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(1).css("height") == "310px" && $("div").eq(1).css("margin-right") == "2px", "The second <code>div</code> should have a <code>height</code> of 310 pixels and a <code>margin</code> of 2 pixels.");'
- text: O terceiro <code>div</code> deve ter uma <code>height</code> de 220 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(2).css("height") == "220px" && $("div").eq(2).css("margin-right") == "2px", "The third <code>div</code> should have a <code>height</code> of 220 pixels and a <code>margin</code> of 2 pixels.");'
- text: O quarto <code>div</code> deve ter uma <code>height</code> de 170 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(3).css("height") == "170px" && $("div").eq(3).css("margin-right") == "2px", "The fourth <code>div</code> should have a <code>height</code> of 170 pixels and a <code>margin</code> of 2 pixels.");'
- text: O quinto <code>div</code> deve ter uma <code>height</code> de 250 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(4).css("height") == "250px" && $("div").eq(4).css("margin-right") == "2px", "The fifth <code>div</code> should have a <code>height</code> of 250 pixels and a <code>margin</code> of 2 pixels.");'
- text: O sexto <code>div</code> deve ter uma <code>height</code> de 180 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(5).css("height") == "180px" && $("div").eq(5).css("margin-right") == "2px", "The sixth <code>div</code> should have a <code>height</code> of 180 pixels and a <code>margin</code> of 2 pixels.");'
- text: O sétimo <code>div</code> deve ter uma <code>height</code> de 290 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(6).css("height") == "290px" && $("div").eq(6).css("margin-right") == "2px", "The seventh <code>div</code> should have a <code>height</code> of 290 pixels and a <code>margin</code> of 2 pixels.");'
- text: O oitavo <code>div</code> deve ter uma <code>height</code> de 140 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(7).css("height") == "140px" && $("div").eq(7).css("margin-right") == "2px", "The eighth <code>div</code> should have a <code>height</code> of 140 pixels and a <code>margin</code> of 2 pixels.");'
- text: O nono <code>div</code> deve ter uma <code>height</code> de 90 pixels e uma <code>margin</code> de 2 pixels.
testString: 'assert($("div").eq(8).css("height") == "90px" && $("div").eq(8).css("margin-right") == "2px", "The ninth <code>div</code> should have a <code>height</code> of 90 pixels and a <code>margin</code> of 2 pixels.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.bar {
width: 25px;
height: 100px;
/* Add your code below this line */
/* Add your code above this line */
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
.style("height", (d) => (d + "px"))
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

78
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/create-a-bar-for-each-data-point-in-the-set.portuguese.md
View File

@@ -1,78 +0,0 @@
---
id: 587d7fa8367417b2b2512bcd
title: Create a Bar for Each Data Point in the Set
challengeType: 6
videoUrl: ''
localeTitle: Crie uma barra para cada ponto de dados no conjunto
---
## Description
<section id="description"> O último desafio adicionou apenas um retângulo ao elemento <code>svg</code> para representar uma barra. Aqui, você combinará o que aprendeu até agora sobre formas <code>data()</code> , <code>enter()</code> e SVG para criar e anexar um retângulo para cada ponto de dados no <code>dataset</code> . Um desafio anterior mostrou o formato de como criar e anexar um <code>div</code> para cada item no <code>dataset</code> : <blockquote> d3.select (&quot;body&quot;). selectAll (&quot;div&quot;) <br> .data (conjunto de dados) <br> .entrar() <br> .append (&quot;div&quot;) </blockquote> Existem algumas diferenças trabalhando com elementos <code>rect</code> vez de <code>divs</code> . Os <code>rects</code> devem ser anexados a um elemento <code>svg</code> , não diretamente ao <code>body</code> . Além disso, você precisa dizer ao D3 onde colocar cada <code>rect</code> dentro da área <code>svg</code> . O posicionamento da barra será coberto no próximo desafio. </section>
## Instructions
<section id="instructions"> Use os métodos <code>data()</code> , <code>enter()</code> e <code>append()</code> para criar e anexar um <code>rect</code> para cada item no <code>dataset</code> . As barras devem exibir todas em cima umas das outras, isso será corrigido no próximo desafio. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu documento deve ter 9 elementos <code>rect</code> .
testString: 'assert($("rect").length == 9, "Your document should have 9 <code>rect</code> elements.");'
- text: Seu código deve usar o método <code>data()</code> .
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Seu código deve usar o método <code>enter()</code> .
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
- text: Seu código deve usar o método <code>append()</code> .
testString: 'assert(code.match(/\.append/g), "Your code should use the <code>append()</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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")
// Add your code below this line
// Add your code above this line
.attr("x", 0)
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

67
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/create-a-linear-scale-with-d3.portuguese.md
View File

@@ -1,67 +0,0 @@
---
id: 587d7fab367417b2b2512bda
title: Create a Linear Scale with D3
challengeType: 6
videoUrl: ''
localeTitle: Crie uma escala linear com D3
---
## Description
<section id="description"> A barra e o gráfico de dispersão mapeiam os dados plotados diretamente na tela do SVG. No entanto, se a altura de uma barra ou um dos pontos de dados fosse maior que os valores de altura ou largura do SVG, ela sairia da área SVG. Na D3, existem escalas para ajudar a traçar dados. <code>Scales</code> são funções que informam ao programa como mapear um conjunto de pontos de dados brutos para os pixels da tela do SVG. Por exemplo, digamos que você tenha uma tela SVG de tamanho 100x500 e deseja plotar o Produto Interno Bruto (PIB) para vários países. O conjunto de números estaria na faixa de bilhões ou trilhões de dólares. Você fornece a D3 um tipo de escala para informar como colocar os grandes valores do PIB nessa área de 100 x 500. É improvável que você planeje dados brutos como estão. Antes de plotar, você define a escala para todo o seu conjunto de dados, de modo que os valores <code>x</code> e <code>y</code> ajustem à largura e altura da tela. O D3 possui vários tipos de escala. Para uma escala linear (geralmente usada com dados quantitativos), existe o método D3 <code>scaleLinear()</code> : <code>const scale = d3.scaleLinear()</code> Por padrão, uma escala usa o relacionamento de identidade. O valor da entrada é o mesmo que o valor da saída. Um desafio separado cobre como mudar isso. </section>
## Instructions
<section id="instructions"> Altere a variável de <code>scale</code> para criar uma escala linear. Em seguida, defina a variável de <code>output</code> para a escala chamada com um argumento de entrada de 50. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O texto no <code>h2</code> deve ser 50.
testString: 'assert($("h2").text() == "50", "The text in the <code>h2</code> should be 50.");'
- text: Seu código deve usar o método <code>scaleLinear()</code> .
testString: 'assert(code.match(/\.scaleLinear/g), "Your code should use the <code>scaleLinear()</code> method.");'
- text: A variável de <code>output</code> deve chamar <code>scale</code> com um argumento de 50.
testString: 'assert(output == 50 && code.match(/scale\(\s*?50\s*?\)/g), "The <code>output</code> variable should call <code>scale</code> with an argument of 50.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
// Add your code below this line
const scale = undefined; // Create the scale here
const output = scale(); // Call the scale with an argument here
// Add your code above this line
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

81
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/create-a-scatterplot-with-svg-circles.portuguese.md
View File

@@ -1,81 +0,0 @@
---
id: 587d7fab367417b2b2512bd7
title: Create a Scatterplot with SVG Circles
challengeType: 6
videoUrl: ''
localeTitle: Criar um gráfico de dispersão com círculos SVG
---
## Description
<section id="description"> Um gráfico de dispersão é outro tipo de visualização. Geralmente, ele usa círculos para mapear pontos de dados, que possuem dois valores cada. Estes valores amarrar à <code>x</code> e <code>y</code> eixos, e são utilizados para posicionar o círculo na visualização. O SVG tem uma marca <code>circle</code> para criar a forma do círculo. Funciona muito parecido com os elementos <code>rect</code> que você usou para o gráfico de barras. </section>
## Instructions
<section id="instructions"> Use os métodos <code>data()</code> , <code>enter()</code> e <code>append()</code> para vincular o <code>dataset</code> de <code>dataset</code> a novos elementos de <code>circle</code> que são anexados à tela do SVG. <strong>Nota</strong> <br> Os círculos não estarão visíveis porque ainda não definimos os atributos deles. Nós vamos fazer isso no próximo desafio. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve ter 10 elementos de <code>circle</code> .
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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 svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
svg.selectAll("circle")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

74
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/display-shapes-with-svg.portuguese.md
View File

@@ -1,74 +0,0 @@
---
id: 587d7fa8367417b2b2512bcc
title: Display Shapes with SVG
challengeType: 6
videoUrl: ''
localeTitle: Exibir formas com SVG
---
## Description
<section id="description"> O último desafio criou um elemento <code>svg</code> com uma determinada largura e altura, que era visível porque tinha uma <code>background-color</code> aplicada a ele na tag de <code>style</code> . O código criou espaço para a largura e a altura especificadas. O próximo passo é criar uma forma para colocar na área <code>svg</code> . Há várias formas suportadas no SVG, como retângulos e círculos. Eles são usados ​​para exibir dados. Por exemplo, uma forma SVG retangular ( <code>&lt;rect&gt;</code> ) poderia criar uma barra em um gráfico de barras. Quando você coloca uma forma na área <code>svg</code> , você pode especificar onde ela vai com as coordenadas <code>x</code> e <code>y</code> . O ponto de origem de (0, 0) está no canto superior esquerdo. Valores positivos para <code>x</code> empurram a forma para a direita e valores positivos para <code>y</code> empurram a forma para baixo a partir do ponto de origem. Para colocar uma forma no meio dos 500 (largura) x 100 (altura) <code>svg</code> do último desafio, a coordenada <code>x</code> seria 250 e a coordenada <code>y</code> seria 50. Um <code>rect</code> SVG tem quatro atributos. Existem os <code>x</code> e <code>y</code> coordenadas para onde ele é colocado no <code>svg</code> área. Também possui <code>height</code> e <code>width</code> para especificar o tamanho. </section>
## Instructions
<section id="instructions"> Adicionar um <code>rect</code> forma para o <code>svg</code> usando <code>append()</code> , e dar-lhe uma <code>width</code> atributo de 25 e <code>height</code> atributo de 100. Além disso, dar a <code>rect</code> <code>x</code> e <code>y</code> atributos de cada conjunto para 0. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu documento deve ter um elemento <code>rect</code> .
testString: 'assert($("rect").length == 1, "Your document should have 1 <code>rect</code> element.");'
- text: O elemento <code>rect</code> deve ter um atributo <code>width</code> definido como 25.
testString: 'assert($("rect").attr("width") == "25", "The <code>rect</code> element should have a <code>width</code> attribute set to 25.");'
- text: O elemento <code>rect</code> deve ter um atributo <code>height</code> definido como 100.
testString: 'assert($("rect").attr("height") == "100", "The <code>rect</code> element should have a <code>height</code> attribute set to 100.");'
- text: O elemento <code>rect</code> deve ter um atributo <code>x</code> definido como 0.
testString: 'assert($("rect").attr("x") == "0", "The <code>rect</code> element should have an <code>x</code> attribute set to 0.");'
- text: O elemento <code>rect</code> deve ter um atributo <code>y</code> definido como 0.
testString: 'assert($("rect").attr("y") == "0", "The <code>rect</code> element should have a <code>y</code> attribute set to 0.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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)
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

92
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/dynamically-change-the-height-of-each-bar.portuguese.md
View File

@@ -1,92 +0,0 @@
---
id: 587d7fa9367417b2b2512bcf
title: Dynamically Change the Height of Each Bar
challengeType: 6
videoUrl: ''
localeTitle: Alterar dinamicamente a altura de cada barra
---
## Description
<section id="description"> A altura de cada barra pode ser definida para o valor do ponto de dados na matriz, semelhante a como o valor <code>x</code> foi definido dinamicamente. <blockquote> selection.attr (&quot;propriedade&quot;, (d, i) =&gt; { <br> / * <br> * d é o valor do ponto de dados <br> * i é o índice do ponto de dados na matriz <br> * / <br> }) </blockquote></section>
## Instructions
<section id="instructions"> Altere a função de retorno de chamada para o atributo <code>height</code> para retornar os tempos de valor de dados 3. <strong>Nota</strong> <br> Lembre-se de que multiplicar todos os pontos de dados pela mesma constante escala os dados (como aumentar o zoom). Isso ajuda a ver as diferenças entre os valores das barras neste exemplo. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>rect</code> deve ter uma <code>height</code> de 36.
testString: 'assert($("rect").eq(0).attr("height") == "36", "The first <code>rect</code> should have a <code>height</code> of 36.");'
- text: O segundo <code>rect</code> deve ter uma <code>height</code> de 93.
testString: 'assert($("rect").eq(1).attr("height") == "93", "The second <code>rect</code> should have a <code>height</code> of 93.");'
- text: O terceiro <code>rect</code> deve ter uma <code>height</code> de 66.
testString: 'assert($("rect").eq(2).attr("height") == "66", "The third <code>rect</code> should have a <code>height</code> of 66.");'
- text: O quarto <code>rect</code> deve ter uma <code>height</code> de 51.
testString: 'assert($("rect").eq(3).attr("height") == "51", "The fourth <code>rect</code> should have a <code>height</code> of 51.");'
- text: O quinto <code>rect</code> deve ter uma <code>height</code> de 75.
testString: 'assert($("rect").eq(4).attr("height") == "75", "The fifth <code>rect</code> should have a <code>height</code> of 75.");'
- text: O sexto <code>rect</code> deve ter uma <code>height</code> de 54.
testString: 'assert($("rect").eq(5).attr("height") == "54", "The sixth <code>rect</code> should have a <code>height</code> of 54.");'
- text: O sétimo <code>rect</code> deve ter uma <code>height</code> de 87.
testString: 'assert($("rect").eq(6).attr("height") == "87", "The seventh <code>rect</code> should have a <code>height</code> of 87.");'
- text: O oitavo <code>rect</code> deve ter uma <code>height</code> de 42.
testString: 'assert($("rect").eq(7).attr("height") == "42", "The eighth <code>rect</code> should have a <code>height</code> of 42.");'
- text: O nono <code>rect</code> deve ter uma <code>height</code> de 27.
testString: 'assert($("rect").eq(8).attr("height") == "27", "The ninth <code>rect</code> should have a <code>height</code> of 27.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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", 0)
.attr("width", 25)
.attr("height", (d, i) => {
// Add your code below this line
// Add your code above this line
});
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

92
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/dynamically-set-the-coordinates-for-each-bar.portuguese.md
View File

@@ -1,92 +0,0 @@
---
id: 587d7fa9367417b2b2512bce
title: Dynamically Set the Coordinates for Each Bar
challengeType: 6
videoUrl: ''
localeTitle: Definir dinamicamente as coordenadas para cada barra
---
## Description
<section id="description"> O último desafio criou e anexou um retângulo ao elemento <code>svg</code> para cada ponto no <code>dataset</code> para representar uma barra. Infelizmente, eles estavam todos empilhados uns sobre os outros. O posicionamento de um retângulo é manipulado pelos atributos <code>x</code> e <code>y</code> . Eles dizem ao D3 onde começar a desenhar a forma na área <code>svg</code> . O último desafio definiu cada um deles para 0, então cada barra foi colocada no canto superior esquerdo. Para um gráfico de barras, todas as barras devem ficar no mesmo nível vertical, o que significa que o valor <code>y</code> permanece o mesmo (em 0) para todas as barras. O valor <code>x</code> , no entanto, precisa ser alterado à medida que você adiciona novas barras. Lembre-se de que valores <code>x</code> maiores empurram os itens mais para a direita. Conforme você percorre os elementos da matriz no <code>dataset</code> , o valor x deve aumentar. O método <code>attr()</code> em D3 aceita uma função de retorno de chamada para definir dinamicamente esse atributo. A função de retorno de chamada leva dois argumentos, um para o próprio ponto de dados (geralmente <code>d</code> ) e um para o índice do ponto de dados na matriz. O segundo argumento para o índice é opcional. Aqui está o formato: <blockquote> selection.attr (&quot;propriedade&quot;, (d, i) =&gt; { <br> / * <br> * d é o valor do ponto de dados <br> * i é o índice do ponto de dados na matriz <br> * / <br> }) </blockquote> É importante observar que você NÃO precisa gravar um loop <code>for</code> ou usar <code>forEach()</code> para iterar os itens no conjunto de dados. Lembre-se de que o método <code>data()</code> analisa o conjunto de dados e qualquer método vinculado após <code>data()</code> ser executado uma vez para cada item no conjunto de dados. </section>
## Instructions
<section id="instructions"> Altere a função de retorno de chamada do atributo <code>x</code> para que ele retorne os tempos de índice 30. <strong>Nota</strong> <br> Cada barra tem uma largura de 25, aumentando assim cada valor <code>x</code> em 30 acrescenta algum espaço entre as barras. Qualquer valor maior que 25 funcionaria neste exemplo. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>rect</code> deve ter um valor <code>x</code> de 0.
testString: 'assert($("rect").eq(0).attr("x") == "0", "The first <code>rect</code> should have an <code>x</code> value of 0.");'
- text: O segundo <code>rect</code> deve ter um valor <code>x</code> de 30.
testString: 'assert($("rect").eq(1).attr("x") == "30", "The second <code>rect</code> should have an <code>x</code> value of 30.");'
- text: O terceiro <code>rect</code> deve ter um valor <code>x</code> de 60.
testString: 'assert($("rect").eq(2).attr("x") == "60", "The third <code>rect</code> should have an <code>x</code> value of 60.");'
- text: O quarto <code>rect</code> deve ter um valor <code>x</code> de 90.
testString: 'assert($("rect").eq(3).attr("x") == "90", "The fourth <code>rect</code> should have an <code>x</code> value of 90.");'
- text: O quinto <code>rect</code> deve ter um valor <code>x</code> de 120.
testString: 'assert($("rect").eq(4).attr("x") == "120", "The fifth <code>rect</code> should have an <code>x</code> value of 120.");'
- text: O sexto <code>rect</code> deve ter um valor <code>x</code> de 150.
testString: 'assert($("rect").eq(5).attr("x") == "150", "The sixth <code>rect</code> should have an <code>x</code> value of 150.");'
- text: O sétimo <code>rect</code> deve ter um valor <code>x</code> de 180.
testString: 'assert($("rect").eq(6).attr("x") == "180", "The seventh <code>rect</code> should have an <code>x</code> value of 180.");'
- text: O oitavo <code>rect</code> deve ter um valor <code>x</code> de 210.
testString: 'assert($("rect").eq(7).attr("x") == "210", "The eighth <code>rect</code> should have an <code>x</code> value of 210.");'
- text: O nono <code>rect</code> deve ter um valor <code>x</code> de 240.
testString: 'assert($("rect").eq(8).attr("x") == "240", "The ninth <code>rect</code> should have an <code>x</code> value of 240.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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) => {
// Add your code below this line
// Add your code above this line
})
.attr("y", 0)
.attr("width", 25)
.attr("height", 100);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

92
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/invert-svg-elements.portuguese.md
View File

@@ -1,92 +0,0 @@
---
id: 587d7fa9367417b2b2512bd0
title: Invert SVG Elements
challengeType: 6
videoUrl: ''
localeTitle: Inverter elementos SVG
---
## Description
<section id="description"> Você deve ter notado que o gráfico de barras estava de cabeça para baixo ou invertido. Isso ocorre porque o SVG usa coordenadas (x, y). No SVG, o ponto de origem das coordenadas está no canto superior esquerdo. Uma coordenada <code>x</code> de 0 coloca uma forma na borda esquerda da área SVG. Uma coordenada <code>y</code> de 0 coloca uma forma na borda superior da área SVG. Valores <code>x</code> altos empurram o retângulo para a direita. Valores maiores <code>y</code> empurram o retângulo para baixo. Para tornar as barras com o lado direito para cima, você precisa mudar a maneira como a coordenada <code>y</code> é calculada. Ele precisa considerar tanto a altura da barra quanto a altura total da área SVG. A altura da área SVG é 100. Se você tiver um ponto de dados de 0 no conjunto, você deseja que a barra inicie na parte inferior da área SVG (não no topo). Para fazer isso, a coordenada <code>y</code> precisa de um valor de 100. Se o valor do ponto de dados fosse 1, você começaria com uma coordenada <code>y</code> de 100 para definir a barra na parte inferior. Então você precisa considerar a altura da barra de 1, então a coordenada <code>y</code> final seria 99. A coordenada <code>y</code> que é <code>y = heightOfSVG - heightOfBar</code> colocaria as barras com o lado direito para cima. </section>
## Instructions
<section id="instructions"> Altere a função de retorno de chamada para o atributo <code>y</code> para definir as barras com o lado direito para cima. Lembre-se que a <code>height</code> da barra é 3 vezes o valor de dados <code>d</code> . <strong>Nota</strong> <br> Em geral, a relação é <code>y = h - m * d</code> , onde <code>m</code> é a constante que escala os pontos de dados. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>rect</code> deve ter um valor de <code>y</code> de 64.
testString: 'assert($("rect").eq(0).attr("y") == h - (dataset[0] * 3), "The first <code>rect</code> should have a <code>y</code> value of 64.");'
- text: O segundo <code>rect</code> deve ter um valor de <code>y</code> de 7.
testString: 'assert($("rect").eq(1).attr("y") == h - (dataset[1] * 3), "The second <code>rect</code> should have a <code>y</code> value of 7.");'
- text: O terceiro <code>rect</code> deve ter um valor de <code>y</code> de 34.
testString: 'assert($("rect").eq(2).attr("y") == h - (dataset[2] * 3), "The third <code>rect</code> should have a <code>y</code> value of 34.");'
- text: O quarto <code>rect</code> deve ter um valor de <code>y</code> de 49.
testString: 'assert($("rect").eq(3).attr("y") == h - (dataset[3] * 3), "The fourth <code>rect</code> should have a <code>y</code> value of 49.");'
- text: O quinto <code>rect</code> deve ter um valor de <code>y</code> de 25.
testString: 'assert($("rect").eq(4).attr("y") == h - (dataset[4] * 3), "The fifth <code>rect</code> should have a <code>y</code> value of 25.");'
- text: O sexto <code>rect</code> deve ter um valor de <code>y</code> de 46.
testString: 'assert($("rect").eq(5).attr("y") == h - (dataset[5] * 3), "The sixth <code>rect</code> should have a <code>y</code> value of 46.");'
- text: O sétimo <code>rect</code> deve ter um valor <code>y</code> de 13.
testString: 'assert($("rect").eq(6).attr("y") == h - (dataset[6] * 3), "The seventh <code>rect</code> should have a <code>y</code> value of 13.");'
- text: O oitavo <code>rect</code> deve ter um valor de <code>y</code> de 58.
testString: 'assert($("rect").eq(7).attr("y") == h - (dataset[7] * 3), "The eighth <code>rect</code> should have a <code>y</code> value of 58.");'
- text: O nono <code>rect</code> deve ter um valor de <code>y</code> de 73.
testString: 'assert($("rect").eq(8).attr("y") == h - (dataset[8] * 3), "The ninth <code>rect</code> should have a <code>y</code> value of 73.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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) => {
// Add your code below this line
// Add your code above this line
})
.attr("width", 25)
.attr("height", (d, i) => 3 * d);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

72
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/learn-about-svg-in-d3.portuguese.md
View File

@@ -1,72 +0,0 @@
---
id: 587d7fa8367417b2b2512bcb
title: Learn About SVG in D3
challengeType: 6
videoUrl: ''
localeTitle: Aprenda sobre o SVG no D3
---
## Description
<section id="description"> SVG significa <code>Scalable Vector Graphics</code> . Aqui, &quot;escalável&quot; significa que, se você aumentar ou diminuir o zoom em um objeto, ele não aparecerá pixelizado. Ele é escalável com o sistema de exibição, seja em uma pequena tela móvel ou em um grande monitor de TV. O SVG é usado para fazer formas geométricas comuns. Como o D3 mapeia dados em uma representação visual, ele usa SVG para criar as formas para a visualização. Formas SVG para uma página da web devem ir dentro de uma tag <code>svg</code> HTML. O CSS pode ser escalonável quando os estilos usam unidades relativas (como <code>vh</code> , <code>vw</code> ou porcentagens), mas o uso de SVG é mais flexível para criar visualizações de dados. </section>
## Instructions
<section id="instructions"> Adicione um nó <code>svg</code> ao <code>body</code> usando <code>append()</code> . Dê a ele um atributo de <code>width</code> definido para a constante <code>w</code> fornecida e um atributo <code>height</code> definido para a constante <code>h</code> fornecida usando o método <code>attr()</code> para cada um. Você verá na saída porque há uma <code>background-color</code> de fundo rosa aplicada a ela na tag de <code>style</code> . <strong>Nota</strong> <br> Os atributos de largura e altura não possuem unidades. Este é o bloco de construção do escalonamento - o elemento sempre terá uma relação largura / altura de 5: 1, independentemente do nível de zoom. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu documento deve ter um elemento <code>svg</code> .
testString: 'assert($("svg").length == 1, "Your document should have 1 <code>svg</code> element.");'
- text: O elemento <code>svg</code> deve ter um atributo de <code>width</code> definido como 500.
testString: 'assert($("svg").attr("width") == "500", "The <code>svg</code> element should have a <code>width</code> attribute set to 500.");'
- text: O elemento <code>svg</code> deve ter um atributo <code>height</code> definido como 100.
testString: 'assert($("svg").attr("height") == "100", "The <code>svg</code> element should have a <code>height</code> attribute set to 100.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
svg {
background-color: pink;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
const w = 500;
const h = 100;
const svg = d3.select("body")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

66
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/select-a-group-of-elements-with-d3.portuguese.md
View File

@@ -1,66 +0,0 @@
---
id: 587d7fa6367417b2b2512bc3
title: Select a Group of Elements with D3
challengeType: 6
videoUrl: ''
localeTitle: Selecione um grupo de elementos com D3
---
## Description
<section id="description"> O D3 também possui o método <code>selectAll()</code> para selecionar um grupo de elementos. Ele retorna uma matriz de nós HTML para todos os itens no documento que correspondem à string de entrada. Aqui está um exemplo para selecionar todas as tags de âncora em um documento: <code>const anchors = d3.selectAll(&quot;a&quot;);</code> Como o método <code>select()</code> , <code>selectAll()</code> suporta o encadeamento de métodos, e você pode usá-lo com outros métodos. </section>
## Instructions
<section id="instructions"> Selecione todas as tags <code>li</code> no documento e altere seu texto para &quot;item de lista&quot; encadeando o método <code>.text()</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: 'Deve haver 3 elementos <code>li</code> na página, e o texto em cada um deve dizer &quot;item da lista&quot;. Capitalização e espaçamento devem corresponder exatamente.'
testString: 'assert($("li").text().match(/list item/g).length == 3, "There should be 3 <code>li</code> elements on the page, and the text in each one should say "list item". Capitalization and spacing should match exactly.");'
- text: Seu código deve acessar o objeto <code>d3</code> .
testString: 'assert(code.match(/d3/g), "Your code should access the <code>d3</code> object.");'
- text: Seu código deve usar o método <code>selectAll</code> .
testString: 'assert(code.match(/\.selectAll/g), "Your code should use the <code>selectAll</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
<script>
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

70
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/set-a-domain-and-a-range-on-a-scale.portuguese.md
View File

@@ -1,70 +0,0 @@
---
id: 587d7fac367417b2b2512bdb
title: Set a Domain and a Range on a Scale
challengeType: 6
videoUrl: ''
localeTitle: Definir um domínio e um intervalo em escala
---
## Description
<section id="description"> Por padrão, as escalas usam o relacionamento de identidade - o valor de entrada é mapeado para o valor de saída. Mas as escalas podem ser muito mais flexíveis e interessantes. Digamos que um conjunto de dados tenha valores que variam de 50 a 480. Essa é a informação de entrada para uma escala e também é conhecida como o domínio. Você deseja mapear esses pontos ao longo do eixo <code>x</code> na tela do SVG, entre 10 unidades e 500 unidades. Esta é a informação de saída, que também é conhecida como o intervalo. Os métodos <code>domain()</code> e <code>range()</code> definem esses valores para a escala. Ambos os métodos usam uma matriz de pelo menos dois elementos como argumento. Aqui está um exemplo: <blockquote> // Definir um domínio <br> // O domínio abrange o conjunto de valores de entrada <br> scale.domain ([50, 480]); <br> // Definir um intervalo <br> // O intervalo abrange o conjunto de valores de saída <br> escala.range ([10, 500]); <br> escala (50) // Retorna 10 <br> escala (480) // Retorna 500 <br> escala (325) // Retorna 323,37 <br> escala (750) // Retorna 807,67 <br> d3.scaleLinear () </blockquote> Observe que a escala usa o relacionamento linear entre os valores de domínio e intervalo para descobrir qual deve ser a saída para um determinado número. O valor mínimo no domínio (50) é mapeado para o valor mínimo (10) no intervalo. </section>
## Instructions
<section id="instructions"> Crie uma escala e defina seu domínio para <code>[250, 500]</code> e alcance para <code>[10, 150]</code> . <strong>Nota</strong> <br> Você pode encadear os métodos <code>domain()</code> e <code>range()</code> na variável de <code>scale</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve usar o método <code>domain()</code> .
testString: 'assert(code.match(/\.domain/g), "Your code should use the <code>domain()</code> method.");'
- text: 'O <code>domain()</code> da escala deve ser definido para <code>[250, 500]</code> .'
testString: 'assert(JSON.stringify(scale.domain()) == JSON.stringify([250, 500]), "The <code>domain()</code> of the scale should be set to <code>[250, 500]</code>.");'
- text: Seu código deve usar o método <code>range()</code> .
testString: 'assert(code.match(/\.range/g), "Your code should use the <code>range()</code> method.");'
- text: 'O <code>range()</code> da escala deve ser definido como <code>[10, 150]</code> .'
testString: 'assert(JSON.stringify(scale.range()) == JSON.stringify([10, 150]), "The <code>range()</code> of the scale should be set to <code>[10, 150]</code>.");'
- text: O texto no <code>h2</code> deve ser -102.
testString: 'assert($("h2").text() == "-102", "The text in the <code>h2</code> should be -102.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
// Add your code below this line
const scale = d3.scaleLinear();
// Add your code above this line
const output = scale(50);
d3.select("body")
.append("h2")
.text(output);
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

86
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/style-d3-labels.portuguese.md
View File

@@ -1,86 +0,0 @@
---
id: 587d7faa367417b2b2512bd3
title: Style D3 Labels
challengeType: 6
videoUrl: ''
localeTitle: Etiquetas do estilo D3
---
## Description
<section id="description"> Os métodos D3 podem adicionar estilos aos rótulos da barra. O atributo de <code>fill</code> define a cor do texto para um nó de <code>text</code> . O método <code>style()</code> define regras CSS para outros estilos, como &quot;font-family&quot; ou &quot;font-size&quot;. </section>
## Instructions
<section id="instructions"> Defina o <code>font-size</code> da <code>font-size</code> dos elementos de <code>text</code> para 25px e a cor do texto para vermelho. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: As etiquetas devem ter uma cor de <code>fill</code> vermelha.
testString: 'assert($("text").css("fill") == "rgb(255, 0, 0)", "The labels should all have a <code>fill</code> color of red.");'
- text: Todas as etiquetas devem ter um <code>font-size</code> de <code>font-size</code> de 25 pixels.
testString: 'assert($("text").css("font-size") == "25px", "The labels should all have a <code>font-size</code> of 25 pixels.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

88
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/update-the-height-of-an-element-dynamically.portuguese.md
View File

@@ -1,88 +0,0 @@
---
id: 587d7fa8367417b2b2512bc9
title: Update the Height of an Element Dynamically
challengeType: 6
videoUrl: ''
localeTitle: Atualizar a Altura de um Elemento Dinamicamente
---
## Description
<section id="description"> Os desafios anteriores cobriam como exibir dados de uma matriz e como adicionar classes CSS. Você pode combinar essas lições para criar um gráfico de barras simples. Há duas etapas para isso: 1) Criar uma <code>div</code> para cada ponto de dados na matriz 2) Dar a cada <code>div</code> uma altura dinâmica, usando uma função de retorno de chamada no método <code>style()</code> que define a altura igual ao valor dos dados. definir um estilo usando uma função de retorno de chamada: <code>selection.style(&quot;cssProperty&quot;, (d) =&gt; d)</code> </section>
## Instructions
<section id="instructions"> Adicione o método <code>style()</code> ao código no editor para definir a propriedade <code>height</code> para cada elemento. Use uma função de retorno de chamada para retornar o valor do ponto de dados com a string &quot;px&quot; adicionada a ele. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O primeiro <code>div</code> deve ter uma <code>height</code> de 12 pixels.
testString: 'assert($("div").eq(0).css("height") == "12px", "The first <code>div</code> should have a <code>height</code> of 12 pixels.");'
- text: O segundo <code>div</code> deve ter uma <code>height</code> de 31 pixels.
testString: 'assert($("div").eq(1).css("height") == "31px", "The second <code>div</code> should have a <code>height</code> of 31 pixels.");'
- text: O terceiro <code>div</code> deve ter uma <code>height</code> de 22 pixels.
testString: 'assert($("div").eq(2).css("height") == "22px", "The third <code>div</code> should have a <code>height</code> of 22 pixels.");'
- text: O quarto <code>div</code> deve ter uma <code>height</code> de 17 pixels.
testString: 'assert($("div").eq(3).css("height") == "17px", "The fourth <code>div</code> should have a <code>height</code> of 17 pixels.");'
- text: O quinto <code>div</code> deve ter uma <code>height</code> de 25 pixels.
testString: 'assert($("div").eq(4).css("height") == "25px", "The fifth <code>div</code> should have a <code>height</code> of 25 pixels.");'
- text: O sexto <code>div</code> deve ter uma <code>height</code> de 18 pixels.
testString: 'assert($("div").eq(5).css("height") == "18px", "The sixth <code>div</code> should have a <code>height</code> of 18 pixels.");'
- text: O sétimo <code>div</code> deve ter uma <code>height</code> de 29 pixels.
testString: 'assert($("div").eq(6).css("height") == "29px", "The seventh <code>div</code> should have a <code>height</code> of 29 pixels.");'
- text: O oitavo <code>div</code> deve ter uma <code>height</code> de 14 pixels.
testString: 'assert($("div").eq(7).css("height") == "14px", "The eighth <code>div</code> should have a <code>height</code> of 14 pixels.");'
- text: O nono <code>div</code> deve ter uma <code>height</code> de 9 pixels.
testString: 'assert($("div").eq(8).css("height") == "9px", "The ninth <code>div</code> should have a <code>height</code> of 9 pixels.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<style>
.bar {
width: 25px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("div")
.data(dataset)
.enter()
.append("div")
.attr("class", "bar")
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

145
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/use-a-pre-defined-scale-to-place-elements.portuguese.md
View File

@@ -1,145 +0,0 @@
---
id: 587d7fac367417b2b2512bde
title: Use a Pre-Defined Scale to Place Elements
challengeType: 6
videoUrl: ''
localeTitle: Use uma escala pré-definida para colocar elementos
---
## Description
<section id="description"> Com as escalas configuradas, é hora de mapear o gráfico de dispersão novamente. As escalas são como funções de processamento que transformam os dados x e y em valores que se ajustam e renderizam corretamente na tela do SVG. Eles mantêm os dados dentro da área de plotagem da tela. Você define os valores de atributo de coordenadas para uma forma SVG com a função de dimensionamento. Isso inclui os atributos <code>x</code> e <code>y</code> para elementos <code>rect</code> ou <code>text</code> , ou <code>cx</code> e <code>cy</code> para <code>circles</code> . Aqui está um exemplo: <blockquote> forma <br> .attr (&quot;x&quot;, (d) =&gt; xScale (d [0])) </blockquote> Escalas definem atributos de coordenadas de forma para colocar os pontos de dados na tela do SVG. Você não precisa aplicar escalas quando exibir o valor dos dados reais, por exemplo, no método <code>text()</code> para uma dica de ferramenta ou um rótulo. </section>
## Instructions
<section id="instructions"> Use <code>xScale</code> e <code>yScale</code> para posicionar as formas de <code>circle</code> e <code>text</code> na tela do SVG. Para os <code>circles</code> , aplique as escalas para definir os atributos <code>cx</code> e <code>cy</code> . Dê-lhes um raio de 5 unidades também. Para os elementos de <code>text</code> , aplique as escalas para definir os atributos <code>x</code> e <code>y</code> . As etiquetas devem ser deslocadas para a direita dos pontos. Para fazer isso, adicione 10 unidades ao valor de dados x antes de passá-lo para o <code>xScale</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu código deve ter 10 elementos de <code>circle</code> .
testString: 'assert($("circle").length == 10, "Your code should have 10 <code>circle</code> elements.");'
- text: O primeiro elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 91 e um valor <code>cy</code> de aproximadamente 368 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(0).attr("cx")) == "91" && Math.round($("circle").eq(0).attr("cy")) == "368" && $("circle").eq(0).attr("r") == "5", "The first <code>circle</code> element should have a <code>cx</code> value of approximately 91 and a <code>cy</code> value of approximately 368 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O segundo elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 159 e um valor <code>cy</code> de aproximadamente 181 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(1).attr("cx")) == "159" && Math.round($("circle").eq(1).attr("cy")) == "181" && $("circle").eq(1).attr("r") == "5", "The second <code>circle</code> element should have a <code>cx</code> value of approximately 159 and a <code>cy</code> value of approximately 181 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O terceiro elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 340 e um valor <code>cy</code> de aproximadamente 329 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(2).attr("cx")) == "340" && Math.round($("circle").eq(2).attr("cy")) == "329" && $("circle").eq(2).attr("r") == "5", "The third <code>circle</code> element should have a <code>cx</code> value of approximately 340 and a <code>cy</code> value of approximately 329 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O quarto elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 131 e um valor <code>cy</code> de aproximadamente 60 após a aplicação da balança. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(3).attr("cx")) == "131" && Math.round($("circle").eq(3).attr("cy")) == "60" && $("circle").eq(3).attr("r") == "5", "The fourth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 60 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O quinto elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 440 e um valor <code>cy</code> de aproximadamente 237 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(4).attr("cx")) == "440" && Math.round($("circle").eq(4).attr("cy")) == "237" && $("circle").eq(4).attr("r") == "5", "The fifth <code>circle</code> element should have a <code>cx</code> value of approximately 440 and a <code>cy</code> value of approximately 237 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O sexto elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 271 e um valor <code>cy</code> de aproximadamente 306 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(5).attr("cx")) == "271" && Math.round($("circle").eq(5).attr("cy")) == "306" && $("circle").eq(5).attr("r") == "5", "The sixth <code>circle</code> element should have a <code>cx</code> value of approximately 271 and a <code>cy</code> value of approximately 306 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O sétimo elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 361 e um valor <code>cy</code> de aproximadamente 351 após a aplicação das escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(6).attr("cx")) == "361" && Math.round($("circle").eq(6).attr("cy")) == "351" && $("circle").eq(6).attr("r") == "5", "The seventh <code>circle</code> element should have a <code>cx</code> value of approximately 361 and a <code>cy</code> value of approximately 351 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O oitavo elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 261 e um valor <code>cy</code> de aproximadamente 132 depois de aplicar as escalas. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(7).attr("cx")) == "261" && Math.round($("circle").eq(7).attr("cy")) == "132" && $("circle").eq(7).attr("r") == "5", "The eighth <code>circle</code> element should have a <code>cx</code> value of approximately 261 and a <code>cy</code> value of approximately 132 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O nono elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 131 e um valor <code>cy</code> de aproximadamente 144 após a aplicação da balança. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(8).attr("cx")) == "131" && Math.round($("circle").eq(8).attr("cy")) == "144" && $("circle").eq(8).attr("r") == "5", "The ninth <code>circle</code> element should have a <code>cx</code> value of approximately 131 and a <code>cy</code> value of approximately 144 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: O décimo elemento <code>circle</code> deve ter um valor <code>cx</code> de aproximadamente 79 e um valor <code>cy</code> de aproximadamente 326 após a aplicação da balança. Deve também ter um valor de <code>r</code> de 5.
testString: 'assert(Math.round($("circle").eq(9).attr("cx")) == "79" && Math.round($("circle").eq(9).attr("cy")) == "326" && $("circle").eq(9).attr("r") == "5", "The tenth <code>circle</code> element should have a <code>cx</code> value of approximately 79 and a <code>cy</code> value of approximately 326 after applying the scales. It should also have an <code>r</code> value of 5.");'
- text: Seu código deve ter 10 elementos de <code>text</code> .
testString: 'assert($("text").length == 10, "Your code should have 10 <code>text</code> elements.");'
- text: O primeiro rótulo deve ter um valor <code>x</code> de aproximadamente 100 e um valor de <code>y</code> de aproximadamente 368 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(0).attr("x")) == "100" && Math.round($("text").eq(0).attr("y")) == "368", "The first label should have an <code>x</code> value of approximately 100 and a <code>y</code> value of approximately 368 after applying the scales.");'
- text: O segundo rótulo deve ter um valor <code>x</code> de aproximadamente 168 e um valor de <code>y</code> de aproximadamente 181 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(1).attr("x")) == "168" && Math.round($("text").eq(1).attr("y")) == "181", "The second label should have an <code>x</code> value of approximately 168 and a <code>y</code> value of approximately 181 after applying the scales.");'
- text: O terceiro rótulo deve ter um valor <code>x</code> de aproximadamente 350 e um valor <code>y</code> de aproximadamente 329 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(2).attr("x")) == "350" && Math.round($("text").eq(2).attr("y")) == "329", "The third label should have an <code>x</code> value of approximately 350 and a <code>y</code> value of approximately 329 after applying the scales.");'
- text: O quarto rótulo deve ter um valor <code>x</code> de aproximadamente 141 e um valor de <code>y</code> de aproximadamente 60 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(3).attr("x")) == "141" && Math.round($("text").eq(3).attr("y")) == "60", "The fourth label should have an <code>x</code> value of approximately 141 and a <code>y</code> value of approximately 60 after applying the scales.");'
- text: O quinto rótulo deve ter um valor de <code>x</code> de aproximadamente 449 e um valor de <code>y</code> de aproximadamente 237 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(4).attr("x")) == "449" && Math.round($("text").eq(4).attr("y")) == "237", "The fifth label should have an <code>x</code> value of approximately 449 and a <code>y</code> value of approximately 237 after applying the scales.");'
- text: O sexto rótulo deve ter um valor <code>x</code> de aproximadamente 280 e um valor de <code>y</code> de aproximadamente 306 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(5).attr("x")) == "280" && Math.round($("text").eq(5).attr("y")) == "306", "The sixth label should have an <code>x</code> value of approximately 280 and a <code>y</code> value of approximately 306 after applying the scales.");'
- text: O sétimo rótulo deve ter um valor <code>x</code> de aproximadamente 370 e um valor de <code>y</code> de aproximadamente 351 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(6).attr("x")) == "370" && Math.round($("text").eq(6).attr("y")) == "351", "The seventh label should have an <code>x</code> value of approximately 370 and a <code>y</code> value of approximately 351 after applying the scales.");'
- text: O oitavo rótulo deve ter um valor <code>x</code> de aproximadamente 270 e um valor de <code>y</code> de aproximadamente 132 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(7).attr("x")) == "270" && Math.round($("text").eq(7).attr("y")) == "132", "The eighth label should have an <code>x</code> value of approximately 270 and a <code>y</code> value of approximately 132 after applying the scales.");'
- text: O nono rótulo deve ter um valor <code>x</code> de aproximadamente 140 e um valor de <code>y</code> de aproximadamente 144 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(8).attr("x")) == "140" && Math.round($("text").eq(8).attr("y")) == "144", "The ninth label should have an <code>x</code> value of approximately 140 and a <code>y</code> value of approximately 144 after applying the scales.");'
- text: O décimo rótulo deve ter um valor de <code>x</code> de aproximadamente 88 e um valor de <code>y</code> de aproximadamente 326 após a aplicação das escalas.
testString: 'assert(Math.round($("text").eq(9).attr("x")) == "88" && Math.round($("text").eq(9).attr("y")) == "326", "The tenth label should have an <code>x</code> value of approximately 88 and a <code>y</code> value of approximately 326 after applying the scales.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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")
// Add your code below this line
// Add your code above this line
svg.selectAll("text")
.data(dataset)
.enter()
.append("text")
.text((d) => (d[0] + ", "
+ d[1]))
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

92
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/use-dynamic-scales.portuguese.md
View File

@@ -1,92 +0,0 @@
---
id: 587d7fac367417b2b2512bdd
title: Use Dynamic Scales
challengeType: 6
videoUrl: ''
localeTitle: Use escalas dinâmicas
---
## Description
<section id="description"> Os métodos D3 <code>min()</code> e <code>max()</code> são úteis para ajudar a definir a escala. Dado um conjunto de dados complexo, uma prioridade é definir a escala para que a visualização se ajuste à largura e altura do contêiner do SVG. Você deseja que todos os dados sejam plotados na tela do SVG para que fiquem visíveis na página da web. O exemplo abaixo define a escala do eixo x para os dados do gráfico de dispersão. O método <code>domain()</code> passa informações para a escala sobre os valores de dados brutos para o gráfico. O método <code>range()</code> fornece informações sobre o espaço real na página da web para a visualização. No exemplo, o domínio vai de 0 ao máximo no conjunto. Ele usa o método <code>max()</code> com uma função de retorno de chamada com base nos valores x nas matrizes. O intervalo usa a largura da tela do SVG ( <code>w</code> ), mas também inclui alguns preenchimentos. Isso coloca espaço entre os pontos do gráfico de dispersão e a borda da tela do SVG. <blockquote> conjunto de dados const = [ <br> [34, 78], <br> [109, 280], <br> [310, 120] <br> [79, 411] <br> [420, 220] <br> [233, 145], <br> [333, 96], <br> [222, 333] <br> [78, 320], <br> [21, 123] <br> ]; <br> const w = 500; <br> const h = 500; <br><br> // Preenchimento entre o limite de tela do SVG e o enredo <br> preenchimento const = 30; <br> const xScale = d3.scaleLinear () <br> .domain ([0, d3.max (dataset, (d) =&gt; d [0])]) <br> .range ([padding, w - padding]); </blockquote> O preenchimento pode ser confuso no início. Imagine o eixo x como uma linha horizontal de 0 a 500 (o valor da largura para a tela do SVG). Incluir o preenchimento no método <code>range()</code> força o gráfico a iniciar em 30 ao longo dessa linha (em vez de 0) e terminar em 470 (em vez de 500). </section>
## Instructions
<section id="instructions"> Use a variável <code>yScale</code> para criar uma escala linear no eixo y. O domínio deve começar em zero e ir para o valor máximo y no conjunto. O intervalo deve usar a altura do SVG ( <code>h</code> ) e incluir preenchimento. <strong>Nota</strong> <br> Lembre-se de manter o enredo com o lado direito para cima. Quando você define o intervalo para as coordenadas y, o valor mais alto (altura menos preenchimento) é o primeiro argumento e o valor inferior é o segundo argumento. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O texto no <code>h2</code> deve ser 30.
testString: 'assert(output == 30 && $("h2").text() == "30", "The text in the <code>h2</code> should be 30.");'
- text: 'O <code>domain()</code> de yScale deve ser equivalente a <code>[0, 411]</code> .'
testString: 'assert(JSON.stringify(yScale.domain()) == JSON.stringify([0, 411]), "The <code>domain()</code> of yScale should be equivalent to <code>[0, 411]</code>.");'
- text: 'O <code>range()</code> de yScale deve ser equivalente a <code>[470, 30]</code> .'
testString: 'assert(JSON.stringify(yScale.range()) == JSON.stringify([470, 30]), "The <code>range()</code> of yScale should be equivalent to <code>[470, 30]</code>.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```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;
// Padding between the SVG canvas boundary and the plot
const padding = 30;
// Create an x and y scale
const xScale = d3.scaleLinear()
.domain([0, d3.max(dataset, (d) => d[0])])
.range([padding, w - padding]);
// Add your code below this line
const yScale = undefined;
// Add your code above this line
const output = yScale(411); // Returns 30
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

64
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/use-the-d3.max-and-d3.min-functions-to-find-minimum-and-maximum-values-in-a-dataset.portuguese.md
View File

@@ -1,64 +0,0 @@
---
id: 587d7fac367417b2b2512bdc
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
challengeType: 6
videoUrl: ''
localeTitle: Use as funções d3.max e d3.min para localizar valores mínimos e máximos em um conjunto de dados
---
## Description
<section id="description"> O <code>domain()</code> métodos D3 <code>domain()</code> e <code>range()</code> definem essa informação para sua escala com base nos dados. Existem alguns métodos para tornar isso mais fácil. Muitas vezes, quando você define o domínio, você deseja usar os valores mínimo e máximo dentro do conjunto de dados. Tentar encontrar esses valores manualmente, especialmente em um grande conjunto de dados, pode causar erros. D3 tem dois métodos - <code>min()</code> e <code>max()</code> para retornar essa informação. Aqui está um exemplo: <blockquote> const exampleData = [34, 234, 73, 90, 6, 52]; <br> d3.min (exampleData) // Retorna 6 <br> d3.max (exampleData) // Retorna 234 </blockquote> Um conjunto de dados pode ter matrizes aninhadas, como os pares de coordenadas [x, y] que estavam no exemplo do gráfico de dispersão. Nesse caso, você precisa dizer ao D3 como calcular o máximo e o mínimo. Felizmente, os métodos <code>min()</code> e <code>max()</code> assumem uma função de retorno de chamada. Neste exemplo, o argumento <code>d</code> da função de retorno de chamada é para a matriz interna atual. O retorno de chamada precisa retornar o elemento da matriz interna (o valor x ou y) sobre o qual você deseja calcular o máximo ou o mínimo. Veja um exemplo de como encontrar os valores mínimo e máximo com uma matriz de matrizes: <blockquote> const locationData = [[1, 7], [6, 3], [8, 3]]; <br> // Retorna o menor número dos primeiros elementos <br> const minX = d3.min (locationData, (d) =&gt; d [0]); <br> // minX comparado 1, 6 e 8 e está definido como 1 </blockquote></section>
## Instructions
<section id="instructions"> A variável <code>positionData</code> contém um array tridimensional (3D). Use um método D3 para encontrar o valor máximo da coordenada z (o terceiro valor) das matrizes e salve-o na variável de <code>output</code> . <strong>Nota</strong> <br> Fato divertido - D3 pode traçar matrizes 3D. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: O texto no <code>h2</code> deve ser 8.
testString: 'assert(output == 8 && $("h2").text() == "8", "The text in the <code>h2</code> should be 8.");'
- text: Seu código deve usar o método <code>max()</code> .
testString: 'assert(code.match(/\.max/g), "Your code should use the <code>max()</code> method.")'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
const positionData = [[1, 7, -4],[6, 3, 8],[2, 8, 3]]
// Add your code below this line
const output = undefined; // Change this line
// Add your code above this line
d3.select("body")
.append("h2")
.text(output)
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

65
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/work-with-data-in-d3.portuguese.md
View File

@@ -1,65 +0,0 @@
---
id: 587d7fa7367417b2b2512bc4
title: Work with Data in D3
challengeType: 6
videoUrl: ''
localeTitle: Trabalhar com dados no D3
---
## Description
<section id="description"> A biblioteca D3 se concentra em uma abordagem baseada em dados. Quando você tem um conjunto de dados, você pode aplicar métodos D3 para exibi-los na página. Os dados vêm em vários formatos, mas esse desafio usa uma matriz simples de números. O primeiro passo é tornar D3 ciente dos dados. O método <code>data()</code> é usado em uma seleção de elementos DOM para anexar os dados a esses elementos. O conjunto de dados é passado como um argumento para o método. Um padrão de fluxo de trabalho comum é criar um novo elemento no documento para cada parte dos dados no conjunto. D3 tem o método <code>enter()</code> para esse propósito. Quando <code>enter()</code> é combinado com o método <code>data()</code> , ele verifica os elementos selecionados da página e compara-os com o número de itens de dados no conjunto. Se houver menos elementos que itens de dados, ele criará os elementos ausentes. Aqui está um exemplo que seleciona um elemento <code>ul</code> e cria um novo item de lista com base no número de entradas na matriz: <blockquote> &lt;body&gt; <br> &lt;ul&gt; &lt;/ ul&gt; <br> &lt;script&gt; <br> conjunto de dados const = [&quot;a&quot;, &quot;b&quot;, &quot;c&quot;]; <br> d3.select (&quot;ul&quot;). selectAll (&quot;li&quot;) <br> .data (conjunto de dados) <br> .entrar() <br> .append (&quot;li&quot;) <br> .text (&quot;Novo item&quot;); <br> &lt;/ script&gt; <br> &lt;/ body&gt; </blockquote> Pode parecer confuso selecionar elementos que ainda não existem. Este código está dizendo ao D3 para selecionar primeiro o <code>ul</code> na página. Em seguida, selecione todos os itens da lista, que retornam uma seleção vazia. Em seguida, o método <code>data()</code> revisa o conjunto de dados e executa o código a seguir três vezes, uma vez para cada item na matriz. O método <code>enter()</code> vê que não há elementos <code>li</code> na página, mas precisa de 3 (um para cada parte dos dados no <code>dataset</code> ). Novos elementos <code>li</code> são anexados ao <code>ul</code> e possuem o texto &quot;Novo item&quot;. </section>
## Instructions
<section id="instructions"> Selecione o nó do <code>body</code> , em seguida, selecione todos os elementos <code>h2</code> . Faça o D3 criar e anexar uma tag <code>h2</code> para cada item na matriz do <code>dataset</code> . O texto no <code>h2</code> deve dizer &quot;novo título&quot;. Seu código deve usar os métodos <code>data()</code> e <code>enter()</code> . </section>
## Tests
<section id='tests'>
```yml
tests:
- text: Seu documento deve ter 9 elementos <code>h2</code> .
testString: 'assert($("h2").length == 9, "Your document should have 9 <code>h2</code> elements.");'
- text: O texto nos elementos <code>h2</code> deve dizer &quot;Novo Título&quot;. A capitalização e o espaçamento devem corresponder exatamente.
testString: 'assert($("h2").text().match(/New Title/g).length == 9, "The text in the <code>h2</code> elements should say "New Title". The capitalization and spacing should match exactly.");'
- text: Seu código deve usar o método <code>data()</code> .
testString: 'assert(code.match(/\.data/g), "Your code should use the <code>data()</code> method.");'
- text: Seu código deve usar o método <code>enter()</code> .
testString: 'assert(code.match(/\.enter/g), "Your code should use the <code>enter()</code> method.");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
// Add your code below this line
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>

79
curriculum/challenges/portuguese/04-data-visualization/data-visualization-with-d3/work-with-dynamic-data-in-d3.portuguese.md
View File

@@ -1,79 +0,0 @@
---
id: 587d7fa7367417b2b2512bc5
title: Work with Dynamic Data in D3
challengeType: 6
videoUrl: ''
localeTitle: Trabalhar com dados dinâmicos no D3
---
## Description
<section id="description"> Os dois últimos desafios abrangem os fundamentos da exibição de dados dinamicamente com o D3 usando os métodos <code>data()</code> e <code>enter()</code> . Esses métodos usam um conjunto de dados e, juntamente com o método <code>append()</code> , criam um novo elemento DOM para cada entrada no conjunto de dados. No desafio anterior, você criou um novo elemento <code>h2</code> para cada item na matriz do <code>dataset</code> , mas todos continham o mesmo texto, &quot;Novo Título&quot;. Isso é porque você não fez uso dos dados que estão vinculados a cada um dos elementos <code>h2</code> . O método D3 <code>text()</code> pode ter uma string ou uma função de callback como um argumento: <code>selection.text((d) =&gt; d)</code> No exemplo acima, o parâmetro <code>d</code> se refere a uma única entrada no dataset que uma seleção é ligada para. Usando o exemplo atual como contexto, o primeiro elemento <code>h2</code> é ligado a 12, o segundo elemento <code>h2</code> é ligado a 31, o terceiro elemento <code>h2</code> é ligado a 22 e assim por diante. </section>
## Instructions
<section id="instructions"> Altere o método <code>text()</code> para que cada elemento <code>h2</code> exiba o valor correspondente da matriz do <code>dataset</code> com um único espaço e &quot;USD&quot;. Por exemplo, o primeiro cabeçalho deve ser &quot;12 USD&quot;. </section>
## Tests
<section id='tests'>
```yml
tests:
- text: A primeira <code>h2</code> deve ter o texto &quot;12 USD&quot;.
testString: 'assert($("h2").eq(0).text() == "12 USD", "The first <code>h2</code> should have the text "12 USD".");'
- text: A segunda <code>h2</code> deve ter o texto &quot;31 USD&quot;.
testString: 'assert($("h2").eq(1).text() == "31 USD", "The second <code>h2</code> should have the text "31 USD".");'
- text: A terceira <code>h2</code> deve ter o texto &quot;22 USD&quot;.
testString: 'assert($("h2").eq(2).text() == "22 USD", "The third <code>h2</code> should have the text "22 USD".");'
- text: O quarto <code>h2</code> deve ter o texto &quot;17 USD&quot;.
testString: 'assert($("h2").eq(3).text() == "17 USD", "The fourth <code>h2</code> should have the text "17 USD".");'
- text: O quinto <code>h2</code> deve ter o texto &quot;25 USD&quot;.
testString: 'assert($("h2").eq(4).text() == "25 USD", "The fifth <code>h2</code> should have the text "25 USD".");'
- text: A sexta <code>h2</code> deve ter o texto &quot;18 USD&quot;.
testString: 'assert($("h2").eq(5).text() == "18 USD", "The sixth <code>h2</code> should have the text "18 USD".");'
- text: A sétima <code>h2</code> deve ter o texto &quot;29 USD&quot;.
testString: 'assert($("h2").eq(6).text() == "29 USD", "The seventh <code>h2</code> should have the text "29 USD".");'
- text: A oitava <code>h2</code> deve ter o texto &quot;14 USD&quot;.
testString: 'assert($("h2").eq(7).text() == "14 USD", "The eighth <code>h2</code> should have the text "14 USD".");'
- text: O nono <code>h2</code> deve ter o texto &quot;9 USD&quot;.
testString: 'assert($("h2").eq(8).text() == "9 USD", "The ninth <code>h2</code> should have the text "9 USD".");'
```
</section>
## Challenge Seed
<section id='challengeSeed'>
<div id='html-seed'>
```html
<body>
<script>
const dataset = [12, 31, 22, 17, 25, 18, 29, 14, 9];
d3.select("body").selectAll("h2")
.data(dataset)
.enter()
.append("h2")
// Add your code below this line
.text("New Title");
// Add your code above this line
</script>
</body>
```
</div>
</section>
## Solution
<section id='solution'>
```js
// solution required
```
</section>