Como implementar o mapa do Brasil em D3.js
Nas últimas semanas temos feito alguns experimentos com a D3.js, uma biblioteca de visualização de dados que faz uma camada de abstração que permite trabalhar facilmente com SVG.
“D3.js te ajuda a criar gráficos bem elaborados e customizados com muita facilidade.”
Preparamos um pequeno vídeo ensinando a usar D3.js na prática. Você vai aprender a montar o mapa do Brasil colorindo os seus estados de acordo com uma regrinha simples. Fácil e direto ao ponto! Vamos nessa?
Pra fazer esse vídeo usamos as seguintes tecnologias:
- D3.js
- Queue.js
- Topojson.js
- br-atlas (projeto da Carolina Bigonha que nos ajudou a gerar dados geográficos do Brasil)
Depois desse vídeo, aposto que você já se sente mais preparado para usar a D3.js, não é? Já aproveito para lançar um desafio para você caso queira se aprofundar nesse exemplo:
- Altere a cor do estado com o evento hover do mouse
- Desenhe na tela os municípios de cada um dos estados
- Desenhe o mapa apenas com alguns estados (por exemplo, os estados da região centro-oeste)
- Desenhe um mapa dividido por regiões ao invés de estados
Por fim, compartilho com vocês os materiais de referência dos quais falei durante o vídeo:
