freeCodeCamp/curriculum/challenges/portuguese/04-data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart.portuguese.md

id, title, isRequired, challengeType, videoUrl, localeTitle

id	title	isRequired	challengeType	videoUrl	localeTitle
bd7168d8c242eddfaeb5bd13	Visualize Data with a Bar Chart	true	3		Visualize dados com um gráfico de barras

Description

Objetivo: criar um aplicativo CodePen.io que seja funcionalmente semelhante a este: https://codepen.io/freeCodeCamp/full/GrZVaM . Cumpra as histórias de usuário 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 https://github.com/d3/d3/blob/master/API.md#axes-d3-axis . 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. História do usuário 1: meu gráfico deve ter um título com um 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