freeCodeCamp/guide/portuguese/miscellaneous/us-state-map-visualization-using-d3js/index.md

title	localeTitle
Us State Map Visualization Using D3js	Us State Map Visualização Usando D3js

Explicação do Projeto:

Temos os dados da amostra dos Estados dos EUA: Número de acidentes graves relatados para cada estado nos EUA.

Temos esses dados em três categorias: Número mais baixo reportado por um mês, Média de acidentes reportados em um ano e Número mais alto relatado em um mês, conforme mostrado nos dados abaixo da amostra.

Queremos desenhar um mapa dos EUA e visualizar esses dados de forma que, quando passarmos o mouse sobre um estado, ele mostre esses dados para esse estado específico.

Dados de amostra:

AZ: 13 41 57

CA: 41 60 81

NY: 6 35 54 e assim por diante.

Dicas e Recursos:

Instruções passo a passo:

• Primeiro, precisaremos criar um mapa dos EUA.

  1. Você pode criar um mapa do zero usando fontes como - Stately.

  2. Obtenha um mapa já criado de freehtml5maps ou use este Javascript

• Adicione seu mapa ao javascript principal usado para visualização

Por exemplo, (script src="uStates.js")(/script) (!-- creates uStates. --)

• Crie uma tag Div para manter a dica de ferramenta e crie o SVG para manter seu mapa.

Por exemplo,

javascript (div id="tooltip")(/div) (svg width="960" height="600" id="statesvg")(/svg)

• Crie a função Tooltip para criar uma string de conteúdo html na div da dica de ferramenta.

Esta função de dica de ferramenta retornará uma tabela e essa tabela será mostrada sempre que passarmos o mouse sobre o estado Tabela deve ser algo assim (conforme mostrado na primeira figura): Arizona Baixa 13 Média 41 Alta 57

• Desenhe estados em id (#statesvg no nosso exemplo) com dados e função tooltip.

Por exemplo, uStates.draw("#statesvg", sampleData, tooltipFunc);

Saída final será algo como isto: (Pairou o mouse sobre a Califórnia)

Referências:

1. Exemplos e Documentações do D3.js.
2. NPashaP GitHub
3. Imponente
4. FreeHTML5Maps