Add languages Russian, Arabic, Chinese, Portuguese (#18305)
This commit is contained in:
Beau Carnes
committed by
mrugesh mohapatra
mrugesh mohapatra
parent
09d3eca712
commit
2ca3a2093f
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: bd7168d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Bar Chart
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Visualize dados com um gráfico de barras
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/GrZVaM" target="_blank">https://codepen.io/freeCodeCamp/full/GrZVaM</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>História do usuário 1:</strong> meu gráfico deve ter um título com um <code>id="title"</code> . <strong>História do usuário # 2:</strong> Meu gráfico deve ter um eixo x do elemento <code>g</code> com um <code>id="x-axis"</code> . <strong>User Story # 3:</strong> Meu gráfico deve ter um eixo y do elemento <code>g</code> com um <code>id="y-axis"</code> . <strong>User Story # 4: Os</strong> dois eixos devem conter vários rótulos de ticks, cada um com a <code>class="tick"</code> correspondente <code>class="tick"</code> . <strong>User Story # 5:</strong> Meu gráfico deve ter um elemento <code>rect</code> para cada ponto de dados com uma <code>class="bar"</code> exibindo os dados. <strong>User Story # 6:</strong> Cada barra deve ter as propriedades <code>data-date</code> e <code>data-gdp</code> contendo data e valores do PIB. <strong>User Story # 7:</strong> As propriedades <code>data-date</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>User Story # 8:</strong> As propriedades do <code>data-gdp</code> dos elementos da barra devem corresponder à ordem dos dados fornecidos. <strong>História do usuário nº 9:</strong> a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. <strong>User Story # 10:</strong> O atributo <code>data-date</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. <strong>User Story # 11:</strong> O atributo <code>data-gdp</code> e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. <strong>User Story # 12:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 13:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-date</code> que corresponda à <code>data-date</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> . Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Visualize dados com um mapa coroplético
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/EZKqza" target="_blank">https://codepen.io/freeCodeCamp/full/EZKqza</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>User Story # 1:</strong> Meu choropleth deve ter um título com um <code>id="title"</code> . <strong>User Story # 2:</strong> Meu choropleth deve ter um elemento de descrição com um <code>id="description"</code> . <strong>User Story # 3:</strong> Meu choropleth deve ter condados com uma <code>class="county"</code> correspondente <code>class="county"</code> que represente os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos quatro cores de preenchimento diferentes usadas para os municípios. <strong>História do usuário # 5:</strong> Meus municípios devem ter propriedades de <code>data-fips</code> e <code>data-education</code> contendo seus valores de educação e fips correspondentes. <strong>História do Usuário # 6:</strong> Meu coroplópio deve ter um condado para cada ponto de dados fornecido. <strong>História do usuário nº 7:</strong> os municípios devem ter dados-fips e valores de dados-educação que correspondam aos dados da amostra. <strong>User Story # 8:</strong> Meu choropleth deve ter uma legenda com um <code>id="legend"</code> . <strong>User Story # 9:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para a legenda. <strong>User Story # 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 11:</strong> Minha dica de ferramenta deve ter uma propriedade de <code>data-education</code> que corresponda à <code>data-education</code> da área ativa. Aqui estão os conjuntos de dados necessários para concluir este projeto: <br><ul><li> <strong>Dados educacionais dos EUA:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/for_user_education.json</code> </li><li> <strong>Dados do Condado dos EUA:</strong> <code>https://raw.githubusercontent.com/no-stack-dub-sack/testable-projects-fcc/master/src/data/choropleth_map/counties.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Visualize dados com um mapa de calor
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/JEXgeY" target="_blank">https://codepen.io/freeCodeCamp/full/JEXgeY</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>User Story # 1:</strong> Meu heat map deve ter um título com um <code>id="title"</code> . <strong>User Story # 2:</strong> Meu heat map deve ter uma descrição com um <code>id="description"</code> . <strong>User Story # 3:</strong> Meu mapa de calor deve ter um eixo x com um <code>id="x-axis"</code> . <strong>História do Usuário # 4:</strong> Meu mapa de calor deve ter um eixo y com um <code>id="y-axis"</code> . <strong>User Story # 5:</strong> Meu heat map deve ter elementos <code>rect</code> com uma <code>class="cell"</code> que representa os dados. <strong>User Story # 6:</strong> Deve haver pelo menos 4 cores de preenchimento diferentes usadas para as células. <strong>User Story # 7:</strong> Cada célula terá as propriedades <code>data-month</code> , <code>data-year</code> , <code>data-temp</code> contendo seus valores correspondentes de mês, ano e temperatura. <strong>User Story # 8:</strong> O <code>data-month</code> , <code>data-year</code> de cada célula deve estar dentro do intervalo dos dados. <strong>História do usuário nº 9:</strong> Meu mapa de calor deve ter células alinhadas com o mês correspondente no eixo y. <strong>User Story # 10:</strong> Meu mapa de calor deve ter células alinhadas com o ano correspondente no eixo x. <strong>User Story # 11:</strong> Meu mapa de calor deve ter vários marcadores de escala no eixo y com o nome completo do mês. <strong>User Story # 12:</strong> Meu heat map deve ter vários rótulos de ticks no eixo x com os anos entre 1754 e 2015. <strong>User Story # 13:</strong> Meu heat map deve ter uma legenda com um <code>id="legend"</code> . <strong>User Story # 14:</strong> Minha legenda deve conter elementos <code>rect</code> . <strong>User Story # 15:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 4 cores de preenchimento diferentes. <strong>User Story # 16:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 16:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao <code>data-year</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Visualize dados com um gráfico de gráfico de dispersão
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/bgpXyK" target="_blank">https://codepen.io/freeCodeCamp/full/bgpXyK</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>User Story # 1:</strong> Eu posso ver um elemento título que tem um <code>id="title"</code> . <strong>User Story # 2:</strong> Eu posso ver um eixo x que tem um <code>id="x-axis"</code> . <strong>User Story # 3:</strong> Eu posso ver um eixo y que tem um <code>id="y-axis"</code> . <strong>User Story # 4:</strong> Eu posso ver pontos, cada um com uma classe de <code>dot</code> , que representa os dados sendo plotados. <strong>História do Usuário # 5:</strong> Cada ponto deve ter as propriedades <code>data-xvalue</code> e <code>data-yvalue</code> contendo seus valores x e y correspondentes. <strong>História do usuário nº 6:</strong> O valor <code>data-xvalue</code> <code>data-yvalue</code> e o <code>data-xvalue</code> y de <code>data-yvalue</code> de cada ponto devem estar dentro do intervalo dos dados reais e no formato de dados correto. Para <code>data-xvalue</code> , inteiros (anos completos) ou objetos Date são aceitáveis para avaliação de teste. Para <code>data-yvalue</code> (minutos), use objetos Date. <strong>História do Usuário # 7:</strong> O <code>data-xvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo x. <strong>História do usuário # 8:</strong> O valor de y dos <code>data-yvalue</code> e seu ponto correspondente devem estar alinhados com o ponto / valor correspondente no eixo y. <strong>História do usuário nº 9:</strong> posso ver vários rótulos de escala no eixo y com o formato de hora <code>%M:%S</code> <strong>História do usuário nº 10:</strong> posso ver vários rótulos de escala no eixo x que mostram o ano. <strong>User Story # 11:</strong> Eu posso ver que o intervalo dos rótulos do eixo x estão dentro do intervalo dos dados reais do eixo x. <strong>User Story # 12:</strong> Eu posso ver que o intervalo dos rótulos do eixo y estão dentro do intervalo dos dados reais do eixo y. <strong>User Story # 13:</strong> Eu posso ver uma legenda contendo um texto descritivo que possui <code>id="legend"</code> . <strong>User Story # 14:</strong> Eu posso passar o mouse sobre uma área e ver uma dica com uma <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 15:</strong> Minha dica de ferramenta deve ter uma propriedade <code>data-year</code> que corresponda ao valor <code>data-xvalue</code> da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: <code>https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json</code> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,38 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
isRequired: true
|
||||
challengeType: 3
|
||||
videoUrl: ''
|
||||
localeTitle: Visualize dados com um diagrama de mapa de árvore
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> <strong>Objetivo:</strong> criar um aplicativo <a href="https://codepen.io" target="_blank">CodePen.io</a> que seja funcionalmente semelhante a este: <a href="https://codepen.io/freeCodeCamp/full/KaNGNR" target="_blank">https://codepen.io/freeCodeCamp/full/KaNGNR</a> . Cumpra as <a href="https://en.wikipedia.org/wiki/User_story" target="_blank">histórias de usuário</a> abaixo e faça todos os testes para passar. Dê seu estilo pessoal. Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização baseada em svg D3. Os testes exigem que os eixos sejam gerados usando a propriedade do eixo D3, que gera automaticamente marcações ao longo do eixo. Esses tiques são necessários para passar nos testes D3, porque suas posições são usadas para determinar o alinhamento dos elementos gráficos. Você encontrará informações sobre como gerar eixos em <a href="https://github.com/d3/d3/blob/master/API.md#axes-d3-axis" target="_blank">https://github.com/d3/d3/blob/master/API.md#axes-d3-axis</a> . Elementos DOM (não virtuais) requeridos são consultados no momento de cada teste. Se você usar uma estrutura frontend (como o Vue, por exemplo), os resultados do teste podem ser imprecisos para o conteúdo dinâmico. Esperamos acomodá-los eventualmente, mas esses frameworks não são suportados atualmente para projetos D3. <strong>User Story # 1:</strong> Meu mapa da árvore deve ter um título com um <code>id="title"</code> . <strong>User Story # 2:</strong> Meu mapa de árvore deve ter uma descrição com um <code>id="description"</code> . <strong>User Story # 3:</strong> Meu mapa de árvore deve ter elementos <code>rect</code> com uma <code>class="tile"</code> que representa os dados. <strong>História do usuário nº 4:</strong> deve haver pelo menos duas cores de preenchimento diferentes usadas para as peças. <strong>História do usuário nº 5:</strong> Cada bloco deve ter as propriedades <code>data-name</code> , <code>data-category</code> e <code>data-value</code> contendo seu nome, categoria e valor correspondentes. <strong>História do usuário nº 6:</strong> a área de cada bloco deve corresponder ao valor do valor dos dados: blocos com um valor de dados maior devem ter uma área maior. <strong>User Story # 7:</strong> Meu mapa da árvore deve ter uma legenda com <code>id="legend"</code> . <strong>User Story # 8:</strong> Minha legenda deve ter elementos <code>rect</code> com uma <code>class="legend-item"</code> . <strong>User Story # 9:</strong> Os elementos <code>rect</code> na legenda devem usar pelo menos 2 cores de preenchimento diferentes. <strong>User Story # 10:</strong> Eu posso passar o mouse sobre uma área e ver uma dica de ferramenta com um <code>id="tooltip"</code> que exibe mais informações sobre a área. <strong>User Story # 11:</strong> minha dica de ferramenta deve ter uma propriedade de <code>data-value</code> que corresponda ao <code>data-value</code> de <code>data-value</code> da área ativa. Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados: <br><ul><li> <strong>Promessas do Kickstarter:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/kickstarter-funding-data.json</code> </li><li> <strong>Vendas de filmes:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/movie-data.json</code> </li><li> <strong>Vendas de videogames:</strong> <code>https://cdn.rawgit.com/freeCodeCamp/testable-projects-fcc/a80ce8f9/src/data/tree_map/video-game-sales-data.json</code> </li></ul> Você pode criar seu projeto, bifurcando <a href="https://codepen.io/freeCodeCamp/pen/MJjpwO" target="_blank">essa caneta CodePen</a> . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: <code>https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js</code> Quando terminar, envie a URL para o seu trabalho. projeto com todos os seus testes passando. Lembre-se de usar o método <a href="https://forum.freecodecamp.org/t/how-to-get-help-when-you-are-stuck/19514" target="_blank">Read-Search-Ask</a> se você ficar preso. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions">
|
||||
</section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests: []
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd4
|
||||
title: Add a Hover Effect to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,111 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd6
|
||||
title: Add a Tooltip to a D3 Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd8
|
||||
title: Add Attributes to the Circle Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,119 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512bdf
|
||||
title: Add Axes to a Visualization
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("g") <br> .attr ("transformar", "traduzir (0," + (h - preenchimento) + ")") <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>
|
||||
@@ -0,0 +1,75 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc8
|
||||
title: Add Classes with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 "container" a uma seleção: <code>selection.attr("class", "container");</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>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc2
|
||||
title: Add Document Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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("a");</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 "d3" 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 ("ul") <br> .append ("li") <br> .text ("Item muito importante"); </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 "Learning D3" 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 "Aprendizagem D3".
|
||||
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>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc6
|
||||
title: Add Inline Styling to Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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("color","blue");</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>
|
||||
@@ -0,0 +1,99 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd2
|
||||
title: Add Labels to D3 Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,113 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd9
|
||||
title: Add Labels to Scatter Plot Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 é "34, 78". 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 "34, 78", 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 "109, 280", 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 "310, 120", 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 "79, 411", 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 "420, 220", 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 "233, 145", 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 "333, 96", 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 "222, 333", 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 "78, 320", 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 "21, 123", 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>
|
||||
@@ -0,0 +1,82 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc7
|
||||
title: Change Styles Based on Data
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("cor", (d) => { <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á "vermelho", caso contrário, retornará "verde". <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>
|
||||
@@ -0,0 +1,77 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd1
|
||||
title: Change the Color of an SVG Element
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 "preenchimento" de todas as barras para a cor "navy". </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>
|
||||
@@ -0,0 +1,92 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bca
|
||||
title: Change the Presentation of a Bar Chart
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 "px"). <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>
|
||||
@@ -0,0 +1,80 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcd
|
||||
title: Create a Bar for Each Data Point in the Set
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("body"). selectAll ("div") <br> .data (conjunto de dados) <br> .entrar() <br> .append ("div") </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>
|
||||
@@ -0,0 +1,69 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bda
|
||||
title: Create a Linear Scale with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,83 @@
|
||||
---
|
||||
id: 587d7fab367417b2b2512bd7
|
||||
title: Create a Scatterplot with SVG Circles
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,76 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcc
|
||||
title: Display Shapes with SVG
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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><rect></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>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bcf
|
||||
title: Dynamically Change the Height of Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("propriedade", (d, i) => { <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>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bce
|
||||
title: Dynamically Set the Coordinates for Each Bar
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("propriedade", (d, i) => { <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>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fa9367417b2b2512bd0
|
||||
title: Invert SVG Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,74 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bcb
|
||||
title: Learn About SVG in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Aprenda sobre o SVG no D3
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> SVG significa <code>Scalable Vector Graphics</code> . Aqui, "escalável" 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>
|
||||
@@ -0,0 +1,68 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc3
|
||||
title: Select a Group of Elements with D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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("a");</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 "item de lista" 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 "item da lista". 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>
|
||||
@@ -0,0 +1,72 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdb
|
||||
title: Set a Domain and a Range on a Scale
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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>
|
||||
@@ -0,0 +1,88 @@
|
||||
---
|
||||
id: 587d7faa367417b2b2512bd3
|
||||
title: Style D3 Labels
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 "font-family" ou "font-size". </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>
|
||||
@@ -0,0 +1,90 @@
|
||||
---
|
||||
id: 587d7fa8367417b2b2512bc9
|
||||
title: Update the Height of an Element Dynamically
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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("cssProperty", (d) => 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 "px" 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>
|
||||
@@ -0,0 +1,147 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bde
|
||||
title: Use a Pre-Defined Scale to Place Elements
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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 ("x", (d) => 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>
|
||||
@@ -0,0 +1,94 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdd
|
||||
title: Use Dynamic Scales
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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) => 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>
|
||||
@@ -0,0 +1,66 @@
|
||||
---
|
||||
id: 587d7fac367417b2b2512bdc
|
||||
title: Use the d3.max and d3.min Functions to Find Minimum and Maximum Values in a Dataset
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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) => 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>
|
||||
@@ -0,0 +1,67 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc4
|
||||
title: Work with Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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> <body> <br> <ul> </ ul> <br> <script> <br> conjunto de dados const = ["a", "b", "c"]; <br> d3.select ("ul"). selectAll ("li") <br> .data (conjunto de dados) <br> .entrar() <br> .append ("li") <br> .text ("Novo item"); <br> </ script> <br> </ body> </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 "Novo item". </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 "novo título". 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 "Novo Título". 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>
|
||||
@@ -0,0 +1,81 @@
|
||||
---
|
||||
id: 587d7fa7367417b2b2512bc5
|
||||
title: Work with Dynamic Data in D3
|
||||
required:
|
||||
- src: 'https://cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js'
|
||||
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, "Novo Título". 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) => 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 "USD". Por exemplo, o primeiro cabeçalho deve ser "12 USD". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: A primeira <code>h2</code> deve ter o texto "12 USD".
|
||||
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 "31 USD".
|
||||
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 "22 USD".
|
||||
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 "17 USD".
|
||||
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 "25 USD".
|
||||
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 "18 USD".
|
||||
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 "29 USD".
|
||||
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 "14 USD".
|
||||
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 "9 USD".
|
||||
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>
|
||||
@@ -0,0 +1,100 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be4
|
||||
title: Access the JSON Data from an API
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Acessar os dados JSON de uma API
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> No desafio anterior, você viu como obter dados JSON da FreeCodeCamp Cat Photo API. Agora, você examinará mais de perto os dados retornados para entender melhor o formato JSON. Lembre-se de algumas notações em JavaScript: <blockquote> [] -> colchetes representam uma matriz <br> {} -> colchetes encaracolados representam um objeto <br> "" -> Aspas duplas representam uma string. Eles também são usados para nomes de chaves no JSON </blockquote> Compreender a estrutura dos dados que uma API retorna é importante porque influencia a maneira como você recupera os valores necessários. À direita, clique no botão "Obter Mensagem" para carregar o JSON da API do FreeCodeCamp Cat Photo no HTML. O primeiro e último caractere que você vê nos dados JSON são colchetes <code>[ ]</code> . Isso significa que os dados retornados são uma matriz. O segundo caractere nos dados JSON é um colchete <code>{</code> cruzado, que inicia um objeto. Olhando de perto, você pode ver que existem três objetos separados. Os dados JSON são uma matriz de três objetos, onde cada objeto contém informações sobre uma foto de gato. Você aprendeu anteriormente que os objetos contêm "pares de valores-chave" separados por vírgulas. No exemplo Cat Photo, o primeiro objeto tem <code>"id":0</code> onde "id" é uma chave e 0 é seu valor correspondente. Da mesma forma, existem chaves para "imageLink", "altText" e "codeNames". Cada objeto de foto de gato tem essas mesmas chaves, mas com valores diferentes. Outro par "chave-valor" interessante no primeiro objeto é <code>"codeNames":["Juggernaut","Mrs. Wallace","ButterCup"]</code> . Aqui "codeNames" é a chave e seu valor é uma matriz de três strings. É possível ter matrizes de objetos, bem como uma chave com uma matriz como um valor. Lembre-se de como acessar dados em matrizes e objetos. Os arrays usam a notação de colchetes para acessar um índice específico de um item. Os objetos usam a notação entre colchetes ou pontos para acessar o valor de uma determinada propriedade. Aqui está um exemplo que imprime o "altText" da primeira foto do gato - note que os dados JSON analisados no editor são salvos em uma variável chamada <code>json</code> : <blockquote> console.log (json [0] .altText); <br> // Prints "Um gato branco usando um capacete verde em forma de melão na cabeça." </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Para o gato com o "id" de 2, imprima para o console o segundo valor na matriz <code>codeNames</code> . Você deve usar a notação de colchetes e pontos no objeto (que é salvo na variável <code>json</code> ) para acessar o valor. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar a notação de colchetes e pontos para acessar o nome de código adequado e imprimir "Loki" no console.
|
||||
testString: 'assert(code.match(/(?:json\[2\]\.codeNames\[1\]|json\[2\]\[("|")codeNames\1\]\[1\])/g), "Your code should use bracket and dot notation to access the proper code name, and print "Loki" to the console.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
document.getElementsByClassName('message')[0].innerHTML=JSON.stringify(json);
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be2
|
||||
title: Change Text with click Events
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Alterar texto com eventos de clique
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Quando o evento click acontece, você pode usar o JavaScript para atualizar um elemento HTML. Por exemplo, quando um usuário clica no botão "Obter mensagem", ele altera o texto do elemento com a <code>message</code> da classe para dizer "Aqui está a mensagem". Isso funciona adicionando o seguinte código dentro do evento click: <code>document.getElementsByClassName('message')[0].textContent="Here is the message";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione código dentro do manipulador de eventos <code>onclick</code> para alterar o texto dentro do elemento da <code>message</code> para dizer "Aqui está a mensagem". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método <code>document.getElementsByClassName</code> para selecionar o elemento com <code>message</code> classe e definir seu <code>textContent</code> para a string dada.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.textContent\s*?=\s*?("|")Here is the message\2/g), "Your code should use the <code>document.getElementsByClassName</code> method to select the element with class <code>message</code> and set its <code>textContent</code> to the given string.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
}
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,106 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be5
|
||||
title: Convert JSON Data to HTML
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Converter dados JSON em HTML
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Agora que você está obtendo dados de uma API JSON, é possível exibi-los no HTML. Você pode usar um método <code>forEach</code> para percorrer os dados, pois os objetos photo do cat são mantidos em um array. Ao chegar em cada item, você pode modificar os elementos HTML. Primeiro, declare uma variável html com <code>var html = "";</code> . Em seguida, percorra o JSON, adicionando HTML à variável que encapsula os nomes das chaves em tags <code>strong</code> , seguida do valor. Quando o loop terminar, você o renderiza. Aqui está o código que faz isso: <blockquote> json.forEach (function (val) { <br> var keys = Object.keys (val); <br> html + = "<div class = 'cat'>"; <br> keys.forEach (função (chave) { <br> html + = "<strong>" + chave + "</ strong>:" + val [tecla] + "<br>"; <br> }); <br> html + = "</ div> <br>"; <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um método <code>forEach</code> para fazer um loop pelos dados JSON e crie os elementos HTML para exibi-los. Aqui está um exemplo de JSON <blockquote> [ <br> { <br> "id": 0, <br> "imageLink": "https://s3.amazonaws.com/freecodecamp/funny-cat.jpg", <br> "altText": "Um gato branco usando um capacete verde em forma de melão na cabeça.", <br> "codeNames": ["Juggernaut", "Sra. Wallace", "Buttercup" <br> ] <br> } <br> ] </blockquote></section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve armazenar os dados na variável <code>html</code>
|
||||
testString: 'assert(code.match(/html\s+?(\+=|=\shtml\s\+)/g), "Your code should store the data in the <code>html</code> variable");'
|
||||
- text: Seu código deve usar um método <code>forEach</code> para executar um loop pelos dados JSON da API.
|
||||
testString: 'assert(code.match(/json\.forEach/g), "Your code should use a <code>forEach</code> method to loop over the JSON data from the API.");'
|
||||
- text: Seu código deve envolver os nomes das chaves em tags <code>strong</code> .
|
||||
testString: 'assert(code.match(/<strong>.+<\/strong>/g), "Your code should wrap the key names in <code>strong</code> tags.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,64 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be8
|
||||
title: Get Geolocation Data to Find A User's GPS Coordinates
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Obter dados de localização geográfica para localizar coordenadas de GPS de um usuário
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Outra coisa legal que você pode fazer é acessar a localização atual do seu usuário. Cada navegador possui um navegador integrado que pode fornecer essas informações. O navegador obterá a longitude e a latitude atuais do usuário. Você verá um aviso para permitir ou bloquear este site de saber sua localização atual. O desafio pode ser concluído de qualquer forma, desde que o código esteja correto. Ao selecionar Permitir, você verá o texto no telefone de saída alterado para sua latitude e longitude. Aqui está o código que faz isso: <blockquote> if (navigator.geolocation) { <br> navigator.geolocation.getCurrentPosition (function (position) { <br> document.getElementById ('data'). innerHTML = "latitude:" + position.coords.latitude + "<br> longitude:" + position.coords.longitude; <br> }); <br> } </blockquote> Primeiro, verifica se o objeto <code>navigator.geolocation</code> existe. Em caso afirmativo, o método <code>getCurrentPosition</code> nesse objeto é chamado, o que inicia uma solicitação assíncrona para a posição do usuário. Se a solicitação for bem-sucedida, a função de retorno de chamada no método será executada. Essa função acessa os valores do objeto de <code>position</code> para latitude e longitude usando a notação de ponto e atualiza o HTML. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o código de exemplo dentro das tags de <code>script</code> para verificar a localização atual de um usuário e inseri-lo no HTML. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar <code>navigator.geolocation</code> para acessar a localização atual do usuário.
|
||||
testString: 'assert(code.match(/navigator\.geolocation\.getCurrentPosition/g), "Your code should use <code>navigator.geolocation</code> to access the user's current location.");'
|
||||
- text: Seu código deve usar <code>position.coords.latitude</code> para exibir a localização latitudinal do usuário.
|
||||
testString: 'assert(code.match(/position\.coords\.latitude/g), "Your code should use <code>position.coords.latitude</code> to display the user's latitudinal location.");'
|
||||
- text: Seu código deve usar <code>position.coords.longitude</code> para exibir a localização longitudinal do usuário.
|
||||
testString: 'assert(code.match(/position\.coords\.longitude/g), "Your code should use <code>position.coords.longitude</code> to display the user's longitudinal location.");'
|
||||
- text: Você deve exibir a posição do usuário no elemento div de <code>data</code> .
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")data\1\s*?\)\.innerHTML/g), "You should display the user's position within the <code>data</code> div element.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
</script>
|
||||
<h4>You are here:</h4>
|
||||
<div id="data">
|
||||
|
||||
</div>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,103 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be3
|
||||
title: Get JSON with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Obtenha o JSON com o método JavaScript XMLHttpRequest
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você também pode solicitar dados de uma fonte externa. É aqui que entram as APIs. Lembre-se de que as APIs - ou Interfaces de Programação de Aplicativos - são ferramentas que os computadores usam para se comunicarem entre si. Você aprenderá a atualizar o HTML com os dados que obtemos das APIs usando uma tecnologia chamada AJAX. A maioria das APIs da web transfere dados em um formato chamado JSON. JSON significa JavaScript Object Notation. A sintaxe JSON é muito semelhante à notação literal do objeto JavaScript. O JSON tem propriedades de objeto e seus valores atuais, entre um <code>{</code> e um <code>}</code> . Essas propriedades e seus valores são geralmente chamados de "pares de valor-chave". No entanto, o JSON transmitido por APIs é enviado como <code>bytes</code> e seu aplicativo o recebe como uma <code>string</code> . Estes podem ser convertidos em objetos JavaScript, mas eles não são objetos JavaScript por padrão. O método <code>JSON.parse</code> analisa a sequência e constrói o objeto JavaScript descrito por ela. Você pode solicitar o JSON da Cat Photo API do freeCodeCamp. Aqui está o código que você pode colocar no seu evento de clique para fazer isso: <blockquote> req = new XMLHttpRequest (); <br> req.open ("GET", '/ json / cats.json', true); <br> req.send (); <br> req.onload = function () { <br> json = JSON.parse (req.responseText); <br> document.getElementsByClassName ('message') [0] .innerHTML = JSON.stringify (json); <br> }; </blockquote> Aqui está uma revisão do que cada peça está fazendo. O objeto JavaScript <code>XMLHttpRequest</code> possui várias propriedades e métodos usados para transferir dados. Primeiro, uma instância do objeto <code>XMLHttpRequest</code> é criada e salva na variável <code>req</code> . Em seguida, o método <code>open</code> inicializa uma solicitação - este exemplo está solicitando dados de uma API, portanto, é uma solicitação "GET". O segundo argumento para <code>open</code> é o URL da API da qual você está solicitando dados. O terceiro argumento é um valor booleano em que <code>true</code> faz dele uma solicitação assíncrona. O método <code>send</code> envia o pedido. Finalmente, o manipulador de eventos <code>onload</code> analisa os dados retornados e aplica o método <code>JSON.stringify</code> para converter o objeto JavaScript em uma string. Essa sequência é inserida como o texto da mensagem. </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Atualize o código para criar e enviar uma solicitação "GET" para a FreeCodeCamp Cat Photo API. Em seguida, clique no botão "Obter mensagem". Sua função AJAX substituirá o texto "A mensagem irá para cá" pela saída JSON bruta da API. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve criar um novo <code>XMLHttpRequest</code> .
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: Seu código deve usar o método <code>open</code> para inicializar uma solicitação "GET" para a FreeCodeCamp Cat Photo API.
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")GET\1\s*?,\s*?("|")\/json\/cats\.json\2\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "GET" request to the freeCodeCamp Cat Photo API.");'
|
||||
- text: Seu código deve usar o <code>send</code> método para enviar o pedido.
|
||||
testString: 'assert(code.match(/\.send\(\s*\)/g), "Your code should use the <code>send</code> method to send the request.");'
|
||||
- text: Seu código deve ter um manipulador de eventos <code>onload</code> configurado para uma função.
|
||||
testString: 'assert(code.match(/\.onload\s*=\s*function\(\s*?\)\s*?{/g), "Your code should have an <code>onload</code> event handler set to a function.");'
|
||||
- text: Seu código deve usar o método <code>JSON.parse</code> para analisar o <code>responseText</code> .
|
||||
testString: 'assert(code.match(/JSON\.parse\(.*\.responseText\)/g), "Your code should use the <code>JSON.parse</code> method to parse the <code>responseText</code>.");'
|
||||
- text: Seu código deve obter o elemento com <code>message</code> classe e alterar seu HTML interno para a string de dados JSON.
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?JSON\.stringify\(.+?\)/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the string of JSON data.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,93 @@
|
||||
---
|
||||
id: 587d7fad367417b2b2512be1
|
||||
title: Handle Click Events with JavaScript using the onclick property
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Manipular eventos de clique com JavaScript usando a propriedade onclick
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Você quer que seu código seja executado somente quando a página terminar de carregar. Para esse propósito, você pode anexar um evento JavaScript ao documento chamado <code>DOMContentLoaded</code> . Aqui está o código que faz isso: <blockquote> document.addEventListener ('DOMContentLoaded', function () { <br><br> }); </blockquote> Você pode implementar manipuladores de eventos que vão dentro da função <code>DOMContentLoaded</code> . Você pode implementar um manipulador de eventos <code>onclick</code> que é acionado quando o usuário clica no elemento com o ID <code>getMessage</code> , adicionando o seguinte código: <blockquote> document.getElementById ('getMessage'). onclick = function () {}; </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione um manipulador de eventos click dentro da função <code>DOMContentLoaded</code> para o elemento com o id de <code>getMessage</code> . </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método <code>document.getElementById</code> para selecionar o elemento <code>getMessage</code> .
|
||||
testString: 'assert(code.match(/document\.getElementById\(\s*?("|")getMessage\1\s*?\)/g), "Your code should use the <code>document.getElementById</code> method to select the <code>getMessage</code> element.");'
|
||||
- text: Seu código deve adicionar um manipulador de eventos <code>onclick</code> .
|
||||
testString: 'assert(typeof document.getElementById("getMessage").onclick === "function", "Your code should add an <code>onclick</code> event handler.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7faf367417b2b2512be9
|
||||
title: Post Data with the JavaScript XMLHttpRequest Method
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Postar dados com o método JavaScript XMLHttpRequest
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Nos exemplos anteriores, você recebeu dados de um recurso externo. Você também pode enviar dados para um recurso externo, desde que esse recurso suporte solicitações AJAX e você saiba o URL. O método <code>XMLHttpRequest</code> do JavaScript também é usado para postar dados em um servidor. Aqui está um exemplo: <blockquote> req = new XMLHttpRequest (); <br> req.open ("POST", url, true); <br> req.setRequestHeader ('Content-Type', 'text / plain'); <br> req.onreadystatechange = function () { <br> if (req.readyState == 4 && req.status == 200) { <br> document.getElementsByClassName ('message') [0] .innerHTML = req.responseText; <br> } <br> }; <br> req.send (userName); </blockquote> Você já viu vários desses métodos antes. Aqui, o método <code>open</code> inicializa a solicitação como um "POST" para a URL fornecida do recurso externo e usa o booleano <code>true</code> para torná-lo assíncrono. O método <code>setRequestHeader</code> define o valor de um cabeçalho de solicitação HTTP, que contém informações sobre o remetente e a solicitação. Deve ser chamado após o método <code>open</code> , mas antes do método <code>send</code> . Os dois parâmetros são o nome do cabeçalho e o valor a ser definido como o corpo desse cabeçalho. Em seguida, o ouvinte de evento <code>onreadystatechange</code> manipula uma alteração no estado da solicitação. Um <code>readyState</code> de 4 significa que a operação está completa e um <code>status</code> de 200 significa que foi uma solicitação bem-sucedida. O HTML do documento pode ser atualizado. Finalmente, o método <code>send</code> envia a solicitação com o valor <code>userName</code> , que foi dado pelo usuário no campo de <code>input</code> . </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Atualize o código para criar e enviar uma solicitação "POST". Em seguida, digite seu nome na caixa de entrada e clique em "Enviar mensagem". Sua função AJAX substituirá "Responder pelo servidor estará aqui". com a resposta do servidor. Neste caso, é o seu nome acrescentado com "ama gatos". </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve criar um novo <code>XMLHttpRequest</code> .
|
||||
testString: 'assert(code.match(/new\s+?XMLHttpRequest\(\s*?\)/g), "Your code should create a new <code>XMLHttpRequest</code>.");'
|
||||
- text: Seu código deve usar o método <code>open</code> para inicializar uma solicitação "POST" para o servidor.
|
||||
testString: 'assert(code.match(/\.open\(\s*?("|")POST\1\s*?,\s*?url\s*?,\s*?true\s*?\)/g), "Your code should use the <code>open</code> method to initialize a "POST" request to the server.");'
|
||||
- text: Seu código deve usar o método <code>setRequestHeader</code> .
|
||||
testString: 'assert(code.match(/\.setRequestHeader\(\s*?("|")Content-Type\1\s*?,\s*?("|")text\/plain\2\s*?\)/g), "Your code should use the <code>setRequestHeader</code> method.");'
|
||||
- text: Seu código deve ter um manipulador de eventos <code>onreadystatechange</code> definido para uma função.
|
||||
testString: 'assert(code.match(/\.onreadystatechange\s*?=/g), "Your code should have an <code>onreadystatechange</code> event handler set to a function.");'
|
||||
- text: Seu código deve obter o elemento com <code>message</code> classe e alterar seu HTML interno para o <code>responseText</code> .
|
||||
testString: 'assert(code.match(/document\.getElementsByClassName\(\s*?("|")message\1\s*?\)\[0\]\.innerHTML\s*?=\s*?.+?\.responseText/g), "Your code should get the element with class <code>message</code> and change its inner HTML to the <code>responseText</code>.");'
|
||||
- text: Seu código deve usar o método <code>send</code> .
|
||||
testString: 'assert(code.match(/\.send\(\s*?userName\s*?\)/g), "Your code should use the <code>send</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('sendMessage').onclick=function(){
|
||||
|
||||
var userName=document.getElementById('name').value;
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Friends</h1>
|
||||
<p class="message box">
|
||||
Reply from Server will be here
|
||||
</p>
|
||||
<p>
|
||||
<label for="name">Your name:
|
||||
<input type="text" id="name"/>
|
||||
</label>
|
||||
<button id="sendMessage">
|
||||
Send Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,108 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be7
|
||||
title: Pre-filter JSON to Get the Data You Need
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Pré-filtre JSON para obter os dados de que você precisa
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Se você não quiser renderizar todas as fotos de gatos que você recebe da FreeCodeCamp Cat Photo API, é possível pré-filtrar o JSON antes de fazer um loop por ele. Dado que os dados JSON são armazenados em uma matriz, você pode usar o método <code>filter</code> para filtrar o gato cuja chave "id" tem um valor de 1. Aqui está o código para fazer isso: <blockquote> json = json.filter (function (val) { <br> retorno (val.id! == 1); <br> }); </blockquote></section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione o código para <code>filter</code> os dados do json para remover o gato com o valor "id" de 1. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Seu código deve usar o método de <code>filter</code> .
|
||||
testString: 'assert(code.match(/json\.filter/g), "Your code should use the <code>filter</code> method.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>"
|
||||
|
||||
html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>"
|
||||
|
||||
html += "</div>"
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
@@ -0,0 +1,105 @@
|
||||
---
|
||||
id: 587d7fae367417b2b2512be6
|
||||
title: Render Images from Data Sources
|
||||
challengeType: 6
|
||||
videoUrl: ''
|
||||
localeTitle: Renderizar imagens de fontes de dados
|
||||
---
|
||||
|
||||
## Description
|
||||
<section id="description"> Os últimos desafios mostraram que cada objeto no array JSON contém uma chave <code>imageLink</code> com um valor que é o URL da imagem de um gato. Quando você está circulando por esses objetos, você pode usar essa propriedade <code>imageLink</code> para exibir essa imagem em um elemento <code>img</code> . Aqui está o código que faz isso: <code>html += "<img src = '" + val.imageLink + "' " + "alt='" + val.altText + "'>";</code> </section>
|
||||
|
||||
## Instructions
|
||||
<section id="instructions"> Adicione código para usar os <code>imageLink</code> e <code>altText</code> propriedades em uma <code>img</code> tag. </section>
|
||||
|
||||
## Tests
|
||||
<section id='tests'>
|
||||
|
||||
```yml
|
||||
tests:
|
||||
- text: Você deve usar a propriedade <code>imageLink</code> para exibir as imagens.
|
||||
testString: 'assert(code.match(/val\.imageLink/g), "You should use the <code>imageLink</code> property to display the images.");'
|
||||
|
||||
```
|
||||
|
||||
</section>
|
||||
|
||||
## Challenge Seed
|
||||
<section id='challengeSeed'>
|
||||
|
||||
<div id='html-seed'>
|
||||
|
||||
```html
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded',function(){
|
||||
document.getElementById('getMessage').onclick=function(){
|
||||
req=new XMLHttpRequest();
|
||||
req.open("GET",'/json/cats.json',true);
|
||||
req.send();
|
||||
req.onload=function(){
|
||||
json=JSON.parse(req.responseText);
|
||||
var html = "";
|
||||
json.forEach(function(val) {
|
||||
html += "<div class = 'cat'>";
|
||||
// Add your code below this line
|
||||
|
||||
|
||||
// Add your code above this line
|
||||
html += "</div><br>";
|
||||
});
|
||||
document.getElementsByClassName('message')[0].innerHTML=html;
|
||||
};
|
||||
};
|
||||
});
|
||||
</script>
|
||||
<style>
|
||||
body {
|
||||
text-align: center;
|
||||
font-family: "Helvetica", sans-serif;
|
||||
}
|
||||
h1 {
|
||||
font-size: 2em;
|
||||
font-weight: bold;
|
||||
}
|
||||
.box {
|
||||
border-radius: 5px;
|
||||
background-color: #eee;
|
||||
padding: 20px 5px;
|
||||
}
|
||||
button {
|
||||
color: white;
|
||||
background-color: #4791d0;
|
||||
border-radius: 5px;
|
||||
border: 1px solid #4791d0;
|
||||
padding: 5px 10px 8px 10px;
|
||||
}
|
||||
button:hover {
|
||||
background-color: #0F5897;
|
||||
border: 1px solid #0F5897;
|
||||
}
|
||||
</style>
|
||||
<h1>Cat Photo Finder</h1>
|
||||
<p class="message box">
|
||||
The message will go here
|
||||
</p>
|
||||
<p>
|
||||
<button id="getMessage">
|
||||
Get Message
|
||||
</button>
|
||||
</p>
|
||||
|
||||
```
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</section>
|
||||
|
||||
## Solution
|
||||
<section id='solution'>
|
||||
|
||||
```js
|
||||
// solution required
|
||||
```
|
||||
</section>
|
||||
Reference in New Issue
Block a user