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:

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:

Sobre o autor

Lucas Lo Ami

Cientista da computação apaixonado por educação, startups e machine learning. Sempre em busca de experiências novas que combinem suas paixões. Passou por empresas juniores, grandes empresas e startups.

Compartilhar esse post

    

Receba novidades da Superquadra no seu email