4.5 KiB
4.5 KiB
id | title | isRequired | challengeType | videoUrl | localeTitle |
---|---|---|---|---|---|
bd7168d8c242eddfaeb5bd13 | Visualize Data with a Bar Chart | true | 3 | Visualize dados com um gráfico de barras |
Description
id="title"
. História do usuário # 2: Meu gráfico deve ter um eixo x do elemento g
com um id="x-axis"
. User Story # 3: Meu gráfico deve ter um eixo y do elemento g
com um id="y-axis"
. User Story # 4: Os dois eixos devem conter vários rótulos de ticks, cada um com a class="tick"
correspondente class="tick"
. User Story # 5: Meu gráfico deve ter um elemento rect
para cada ponto de dados com uma class="bar"
exibindo os dados. User Story # 6: Cada barra deve ter as propriedades data-date
e data-gdp
contendo data e valores do PIB. User Story # 7: As propriedades data-date
dos elementos da barra devem corresponder à ordem dos dados fornecidos. User Story # 8: As propriedades do data-gdp
dos elementos da barra devem corresponder à ordem dos dados fornecidos. História do usuário nº 9: a altura de cada elemento da barra deve representar com precisão o PIB correspondente dos dados. User Story # 10: O atributo data-date
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo x. User Story # 11: O atributo data-gdp
e seu elemento de barra correspondente devem estar alinhados com o valor correspondente no eixo y. User Story # 12: Eu posso passar o mouse sobre uma área e ver uma dica com uma id="tooltip"
que exibe mais informações sobre a área. User Story # 13: Minha dica de ferramenta deve ter uma propriedade data-date
que corresponda à data-date
da área ativa. Aqui está o conjunto de dados necessário para concluir este projeto: https://raw.githubusercontent.com/freeCodeCamp/ProjectReferenceData/master/GDP-data.json
Você pode criar seu projeto, bifurcando essa caneta CodePen . Ou você pode usar este link CDN para executar os testes em qualquer ambiente que desejar: https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js
. Quando terminar, envie o URL para o seu projeto de trabalho com todos os testes sendo aprovados. Lembre-se de usar o método Read-Search-Ask se você ficar preso. Instructions
Tests
tests: []
Challenge Seed
Solution
// solution required