2.6 KiB
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.
-
Você pode criar um mapa do zero usando fontes como - Stately.
-
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:
- Exemplos e Documentações do D3.js.
- NPashaP GitHub
- Imponente
- FreeHTML5Maps