chore(i18n,curriculum): processed translations (#43008)
This commit is contained in:
@ -14,31 +14,31 @@ Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_sto
|
||||
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**Especificação de usuário nº 1:** Meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
**Especificação de usuário nº 1:** meu gráfico deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 2:** Meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
**Especificação de usuário nº 2:** meu gráfico deve ter um elemento `g` no eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 3:** Meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
**Especificação de usuário nº 3:** meu gráfico deve ter um elemento `g` no eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 4:** Ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
**Especificação de usuário nº 4:** ambos os eixos devem conter múltiplos rótulos (labels) de marcação, cada um com uma `class="tick"` correspondente.
|
||||
|
||||
**Especificação de usuário nº 5:** Meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
**Especificação de usuário nº 5:** meu gráfico deve ter um elemento `rect` para cada ponto com uma classe `class="bar"` correspondente exibindo os dados.
|
||||
|
||||
**Especificação de usuário nº 6:** Cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
**Especificação de usuário nº 6:** cada barra deve ter as propriedades `data-date` e `data-gdp`, contendo os valores `date` e `GDP`, respectivamente.
|
||||
|
||||
**Especificação de usuário nº 7:** As propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 7:** as propriedades `data-date` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 8:** As propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
**Especificação de usuário nº 8:** as propriedades `data-gdp` das barras devem corresponder à ordem fornecida pelos dados.
|
||||
|
||||
**Especificação de usuário nº 9:** A altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
**Especificação de usuário nº 9:** a altura de cada barra deve representar corretamente os dados de `GDP` correspondentes.
|
||||
|
||||
**Especificação de usuário nº 10:** O atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
**Especificação de usuário nº 10:** o atributo `data-date` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo x.
|
||||
|
||||
**Especificação de usuário nº 11:** O atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
**Especificação de usuário nº 11:** o atributo `data-gdp` e sua barra correspondente devem estar alinhados com o seu valor correspondente no eixo y.
|
||||
|
||||
**Especificação de usuário nº 12:** Eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
**Especificação de usuário nº 12:** eu posso passar o mouse sobre uma área e ver uma dica com uma `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**Especificação de usuário nº 13:** Minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa, isto é, onde o mouse está em cima.
|
||||
**Especificação de usuário nº 13:** minha ferramenta de dica (tooltip) deve ter uma propriedade `data-date` que corresponda à `data-date` da área ativa.
|
||||
|
||||
Aqui está o dataset de que você precisará para completar este projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json`
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bbf
|
||||
title: Visualize Data with a Choropleth Map
|
||||
title: Visualizar dados com um mapa coroplético
|
||||
challengeType: 3
|
||||
forumTopicId: 301465
|
||||
dashedName: visualize-data-with-a-choropleth-map
|
||||
@ -8,42 +8,42 @@ dashedName: visualize-data-with-a-choropleth-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/EZKqza>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário](https://en.wikipedia.org/wiki/User_story) abaixo para passar em todos os testes. Dê à página o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM obrigatórios (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My choropleth should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu coropleto deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My choropleth should have a description element with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu coropleto deve ter um elemento de descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My choropleth should have counties with a corresponding `class="county"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu coropleto deve ter condados com um `class="county"` correspondente que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 4 different fill colors used for the counties.
|
||||
**Especificação de usuário nº 4: ** deve haver pelo menos 4 cores de preenchimento diferentes usadas para os condados.
|
||||
|
||||
**User Story #5:** My counties should each have `data-fips` and `data-education` properties containing their corresponding `fips` and `education` values.
|
||||
**Especificação de usuário nº 5:** cada um dos meus condados devem ter propriedades `data-fips` e `data-education` contendo seus correspondentes valores de `fips` e `education`.
|
||||
|
||||
**User Story #6:** My choropleth should have a county for each provided data point.
|
||||
** Especificação de usuário nº 6: ** meu coropleto deve ter um condado para cada dado fornecido.
|
||||
|
||||
**User Story #7:** The counties should have `data-fips` and `data-education` values that match the sample data.
|
||||
**Especificação de usuário nº 7:** os condados devem ter os valores `data-fips` e `data-education` que correspondam aos dados da amostra.
|
||||
|
||||
**User Story #8:** My choropleth should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 8:** meu cloropleto deve ter uma legenda com um `id="legend"` correspondente.
|
||||
|
||||
**User Story #9:** There should be at least 4 different fill colors used for the legend.
|
||||
**Especificação de usuário nº 9:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para a legenda.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-education` property that corresponds to the `data-education` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-education` que corresponde ao `data-education` da área ativa.
|
||||
|
||||
Here are the datasets you will need to complete this project:
|
||||
Aqui estão os conjuntos de dados de que você precisará para completar esse projeto:
|
||||
|
||||
- **US Education Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **US County Data:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
- **Dados educacionais dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/for_user_education.json`
|
||||
- **Dados dos condados dos EUA:**`https://cdn.freecodecamp.org/testable-projects-fcc/data/choropleth_map/counties.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7188d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Heat Map
|
||||
title: Visualizar dados com um mapa de calor
|
||||
challengeType: 3
|
||||
forumTopicId: 301466
|
||||
dashedName: visualize-data-with-a-heat-map
|
||||
@ -8,51 +8,51 @@ dashedName: visualize-data-with-a-heat-map
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/JEXgeY>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My heat map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu mapa de calor deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My heat map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu mapa de calor deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My heat map should have an x-axis with a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 3:** meu mapa de calor deve ter eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #4:** My heat map should have a y-axis with a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 4:** meu mapa de calor deve ter eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #5:** My heat map should have `rect` elements with a `class="cell"` that represent the data.
|
||||
**Especificação de usuário nº 5: ** meu mapa de calor deve ter elementos `rect` com uma `class="cell"` correspondente que representa os dados.
|
||||
|
||||
**User Story #6:** There should be at least 4 different fill colors used for the cells.
|
||||
**Especificação de usuário nº 6:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para as células.
|
||||
|
||||
**User Story #7:** Each cell will have the properties `data-month`, `data-year`, `data-temp` containing their corresponding `month`, `year`, and `temperature` values.
|
||||
**Especificação de usuário nº 7:** cada célula deve ter as propriedades `data-month`, `data-year`, `data-temp` contendo os valores de `month`, `year` e `temperature` correspondentes.
|
||||
|
||||
**User Story #8:** The `data-month`, `data-year` of each cell should be within the range of the data.
|
||||
**Especificação de usuário nº 8:** os valores `data-month` e `data-year` de cada célula devem estar dentro do intervalo dos dados.
|
||||
|
||||
**User Story #9:** My heat map should have cells that align with the corresponding month on the y-axis.
|
||||
**Especificação de usuário nº 9:** meu mapa de calor deve ter células que estejam alinhadas com o mês correspondente no eixo y.
|
||||
|
||||
**User Story #10:** My heat map should have cells that align with the corresponding year on the x-axis.
|
||||
**Especificação de usuário nº 10:** meu mapa de calor deve ter células que estejam alinhadas com o ano correspondente no eixo x.
|
||||
|
||||
**User Story #11:** My heat map should have multiple tick labels on the y-axis with the full month name.
|
||||
**Especificação de usuário nº 11:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo y com o nome do mês por extenso.
|
||||
|
||||
**User Story #12:** My heat map should have multiple tick labels on the x-axis with the years between 1754 and 2015.
|
||||
**Especificação de usuário nº 12:** meu mapa de calor deve ter diversas etiquetas de confirmação no eixo x com os anos entre 1754 e 2015.
|
||||
|
||||
**User Story #13:** My heat map should have a legend with a corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 13:** meu mapa de calor deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #14:** My legend should contain `rect` elements.
|
||||
**Especificação de usuário nº 14:** minha legenda deve conter elementos `rect`.
|
||||
|
||||
**User Story #15:** The `rect` elements in the legend should use at least 4 different fill colors.
|
||||
**Especificação de usuário nº 15:** os elementos `rect` na legenda devem usar pelo menos 4 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #16:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 16:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #17:** My tooltip should have a `data-year` property that corresponds to the `data-year` of the active area.
|
||||
**Especificação de usuário nº 17:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-year` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/global-temperature.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: bd7178d8c242eddfaeb5bd13
|
||||
title: Visualize Data with a Scatterplot Graph
|
||||
title: Visualizar dados com um gráfico de dispersão
|
||||
challengeType: 3
|
||||
forumTopicId: 301467
|
||||
dashedName: visualize-data-with-a-scatterplot-graph
|
||||
@ -8,47 +8,47 @@ dashedName: visualize-data-with-a-scatterplot-graph
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/bgpXyK>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** I can see a title element that has a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1:** eu posso ver um elemento de título que tem um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** I can see an x-axis that has a corresponding `id="x-axis"`.
|
||||
**Especificação de usuário nº 2:** eu posso ver um eixo x com um `id="x-axis"` correspondente.
|
||||
|
||||
**User Story #3:** I can see a y-axis that has a corresponding `id="y-axis"`.
|
||||
**Especificação de usuário nº 3:** eu posso ver um eixo y com um `id="y-axis"` correspondente.
|
||||
|
||||
**User Story #4:** I can see dots, that each have a class of `dot`, which represent the data being plotted.
|
||||
**Especificação de usuário nº 4:** eu posso ver pontos e cada um deles tem uma classe `dot`, que representa os dados a serem plotados.
|
||||
|
||||
**User Story #5:** Each dot should have the properties `data-xvalue` and `data-yvalue` containing their corresponding `x` and `y` values.
|
||||
**Especificação de usuário nº 5:** cada ponto deve ter as propriedades `data-xvalue` e `data-yvalue` contendo seus valores correspondentes de `x` e de `y`.
|
||||
|
||||
**User Story #6:** The `data-xvalue` and `data-yvalue` of each dot should be within the range of the actual data and in the correct data format. For `data-xvalue`, integers (full years) or `Date` objects are acceptable for test evaluation. For `data-yvalue` (minutes), use `Date` objects.
|
||||
**Especificação de usuário nº 6:** os valores `data-xvalue` e `data-yvalue` de cada ponto devem estar dentro do intervalo factual de dados e no formato de dados correto. Para `data-xvalue`, objetos de inteiros (anos completos) ou `Date` são aceitáveis para a avaliação dos testes. Para `data-yvalue` (minutos), use objetos `Date`.
|
||||
|
||||
**User Story #7:** The `data-xvalue` and its corresponding dot should align with the corresponding point/value on the x-axis.
|
||||
**Especificação de usuário nº 7:** o `data-xvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo x.
|
||||
|
||||
**User Story #8:** The `data-yvalue` and its corresponding dot should align with the corresponding point/value on the y-axis.
|
||||
**Especificação de usuário nº 8:** o `data-yvalue` e seu ponto correspondente devem estar alinhados com o ponto/valor correspondente no eixo y.
|
||||
|
||||
**User Story #9:** I can see multiple tick labels on the y-axis with `%M:%S` time format.
|
||||
**Especificação de usuário nº 9:** eu posso ver diversas etiquetas de confirmação no eixo y com o formato de tempo `%M:%S`.
|
||||
|
||||
**User Story #10:** I can see multiple tick labels on the x-axis that show the year.
|
||||
**Especificação de usuário nº 10:** eu posso ver diversas etiquetas de confirmação no eixo x que mostram o ano.
|
||||
|
||||
**User Story #11:** I can see that the range of the x-axis labels are within the range of the actual x-axis data.
|
||||
**Especificação de usuário nº 11:** eu posso ver que o intervalo de etiquetas com o eixo x está dentro do intervalo factual de dados do eixo x.
|
||||
|
||||
**User Story #12:** I can see that the range of the y-axis labels are within the range of the actual y-axis data.
|
||||
**Especificação de usuário nº 12:** eu posso ver que o intervalo de etiquetas com o eixo y está dentro do intervalo factual de dados do eixo y.
|
||||
|
||||
**User Story #13:** I can see a legend containing descriptive text that has `id="legend"`.
|
||||
**Especificação de usuário nº 13:** eu posso ver uma legenda que tem `id="legend"` e contém texto descritivo.
|
||||
|
||||
**User Story #14:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 14:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #15:** My tooltip should have a `data-year` property that corresponds to the `data-xvalue` of the active area.
|
||||
**Especificação de usuário nº 15:** minha dica deve ter uma propriedade `data-year` que corresponde ao `data-xvalue` da área ativa.
|
||||
|
||||
Here is the dataset you will need to complete this project: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
Aqui está o conjunto de dados de que você vai precisar para completar esse projeto: `https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/cyclist-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e, logo após, clicar em `Save` para criar seu próprio projeto. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
@ -1,6 +1,6 @@
|
||||
---
|
||||
id: 587d7fa6367417b2b2512bc0
|
||||
title: Visualize Data with a Treemap Diagram
|
||||
title: Visualizar dados com um diagrama Treemap
|
||||
challengeType: 3
|
||||
forumTopicId: 301468
|
||||
dashedName: visualize-data-with-a-treemap-diagram
|
||||
@ -8,43 +8,43 @@ dashedName: visualize-data-with-a-treemap-diagram
|
||||
|
||||
# --description--
|
||||
|
||||
**Objective:** Build a [CodePen.io](https://codepen.io) app that is functionally similar to this: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
**Objetivo:** criar uma aplicação no [CodePen.io](https://codepen.io) que tenha função semelhante a esta: <https://codepen.io/freeCodeCamp/full/KaNGNR>.
|
||||
|
||||
Fulfill the below [user stories](https://en.wikipedia.org/wiki/User_story) and get all of the tests to pass. Give it your own personal style.
|
||||
Atenda às [especificações de usuário abaixo](https://en.wikipedia.org/wiki/User_story) e obtenha aprovação em todos os testes. Dê a ele o seu próprio estilo pessoal.
|
||||
|
||||
You can use HTML, JavaScript, CSS, and the D3 svg-based visualization library. The tests require axes to be generated using the D3 axis property, which automatically generates ticks along the axis. These ticks are required for passing the D3 tests because their positions are used to determine alignment of graphed elements. You will find information about generating axes at <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Required (non-virtual) DOM elements are queried on the moment of each test. If you use a frontend framework (like Vue for example), the test results may be inaccurate for dynamic content. We hope to accommodate them eventually, but these frameworks are not currently supported for D3 projects.
|
||||
Você pode usar HTML, JavaScript, CSS e a biblioteca de visualização D3, baseada em svg. Os testes requerem que os eixos sejam gerados usando a propriedade de eixos do D3, que geram automaticamente marcações ao longo do eixo. Essas marcações são exigidas para passar nos testes do D3 porque suas posições são usadas para determinar o alinhamento dos elementos do gráfico. Você vai encontrar informações sobre a geração de eixos em <https://github.com/d3/d3/blob/master/API.md#axes-d3-axis>. Os elementos DOM necessários (não virtuais) são consultados no momento de cada teste. Se você usar um framework de front-end (como o Vue por exemplo), os resultados dos testes podem ser imprecisos para conteúdo dinâmico. Esperamos dar suporte a eles um dia, mas atualmente esses frameworks não são suportados para os projetos de D3.
|
||||
|
||||
**User Story #1:** My tree map should have a title with a corresponding `id="title"`.
|
||||
**Especificação de usuário nº 1: ** meu treemap deve ter um título com um `id="title"` correspondente.
|
||||
|
||||
**User Story #2:** My tree map should have a description with a corresponding `id="description"`.
|
||||
**Especificação de usuário nº 2: ** meu treemap deve ter uma descrição com uma `id="description"` correspondente.
|
||||
|
||||
**User Story #3:** My tree map should have `rect` elements with a corresponding `class="tile"` that represent the data.
|
||||
**Especificação de usuário nº 3: ** meu treemap deve ter elementos `rect` com uma `class="tile"` que representa os dados.
|
||||
|
||||
**User Story #4:** There should be at least 2 different fill colors used for the tiles.
|
||||
**Especificação de usuário nº 4:** deve haver pelo menos 4 cores diferentes de preenchimento usadas para os blocos.
|
||||
|
||||
**User Story #5:** Each tile should have the properties `data-name`, `data-category`, and `data-value` containing their corresponding `name`, `category`, and `value`.
|
||||
**Especificação de usuário nº 5:** cada bloco deve ter as propriedades `data-name`, `data-category` e `data-value` contendo os valores de `name`, `category` e `value` correspondentes.
|
||||
|
||||
**User Story #6:** The area of each tile should correspond to the `data-value` amount: tiles with a larger `data-value` should have a bigger area.
|
||||
**Especificação de usuário nº 6:** a área de cada bloco deve corresponder à quantidade de `data-value`: blocos com um `data-value` maior devem ter uma área maior.
|
||||
|
||||
**User Story #7:** My tree map should have a legend with corresponding `id="legend"`.
|
||||
**Especificação de usuário nº 7:** meu treemap deve ter uma legenda com o `id="legend"` correspondente.
|
||||
|
||||
**User Story #8:** My legend should have `rect` elements with a corresponding `class="legend-item"`.
|
||||
**Especificação de usuário nº 8:** minha legenda deve ter elementos `rect` com um `class="legend-item"` correspondente.
|
||||
|
||||
**User Story #9:** The `rect` elements in the legend should use at least 2 different fill colors.
|
||||
**Especificação de usuário nº 9:** os elementos `rect` na legenda devem usar pelo menos 2 cores diferentes de preenchimento.
|
||||
|
||||
**User Story #10:** I can mouse over an area and see a tooltip with a corresponding `id="tooltip"` which displays more information about the area.
|
||||
**Especificação de usuário nº 10:** eu posso passar com o mouse sobre uma área e ver uma dica com o `id="tooltip"` correspondente, que exibe mais informações sobre a área.
|
||||
|
||||
**User Story #11:** My tooltip should have a `data-value` property that corresponds to the `data-value` of the active area.
|
||||
**Especificação de usuário nº 11:** minha dica deve ter uma propriedade `data-value` que corresponda à `data-value` da área ativa.
|
||||
|
||||
For this project you can use any of the following datasets:
|
||||
Para este projeto, você pode usar qualquer um dos seguintes conjuntos de dados:
|
||||
|
||||
- **Kickstarter Pledges:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Movie Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Video Game Sales:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
- **Contribuições do Kickstarter:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/kickstarter-funding-data.json`
|
||||
- **Venda de filmes:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/movie-data.json`
|
||||
- **Venda de videogames:** `https://cdn.freecodecamp.org/testable-projects-fcc/data/tree_map/video-game-sales-data.json`
|
||||
|
||||
You can build your project by <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>using this CodePen template</a> and clicking `Save` to create your own pen. Or you can use this CDN link to run the tests in any environment you like: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
Você pode fazer o seu projeto <a href='https://codepen.io/pen?template=MJjpwO' target='_blank' rel='nofollow'>usando este modelo da CodePen</a> e clicando em `Save` para criar seu próprio pen. Como alternativa, use este link da nossa CDN para executar os testes em qualquer ambiente que você preferir: `https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js`
|
||||
|
||||
Once you're done, submit the URL to your working project with all its tests passing.
|
||||
Quando tiver terminado, envie o URL do seu projeto depois de ele haver passado em todos os testes.
|
||||
|
||||
# --solutions--
|
||||
|
||||
|
Reference in New Issue
Block a user