D3.js - Instalação

Neste capítulo, aprenderemos como configurar o ambiente de desenvolvimento D3.js. Antes de começar, precisamos dos seguintes componentes -

  • Biblioteca D3.js
  • Editor
  • Navegador da web
  • servidor web

Vamos seguir as etapas uma a uma em detalhes.

Biblioteca D3.js

Precisamos incluir a biblioteca D3.js em sua página HTML para usar o D3.js para criar a visualização de dados. Podemos fazer isso das duas maneiras a seguir -

  • Inclua a biblioteca D3.js da pasta do seu projeto.
  • Inclui a biblioteca D3.js da CDN (Content Delivery Network).

Baixe a biblioteca D3.js

D3.js é uma biblioteca de código aberto e o código-fonte da biblioteca está disponível gratuitamente na web em https://d3js.org/local na rede Internet. Visite o site do D3.js e baixe a versão mais recente do D3.js (d3.zip). A partir de agora, a versão mais recente é 4.6.0.

Após a conclusão do download, descompacte o arquivo e procure d3.min.js. Esta é a versão reduzida do código-fonte D3.js. Copie o arquivo d3.min.js e cole-o na pasta raiz do seu projeto ou em qualquer outra pasta, onde deseja manter todos os arquivos da biblioteca. Inclua o arquivo d3.min.js em sua página HTML, conforme mostrado abaixo.

Example - Vamos considerar o seguinte exemplo.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "/path/to/d3.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

D3.js é um código JavaScript, então devemos escrever todo o nosso código D3 dentro da tag “script”. Podemos precisar manipular os elementos DOM existentes, portanto, é aconselhável escrever o código D3 logo antes do final da tag “body”.

Incluir Biblioteca D3 do CDN

Podemos usar a biblioteca D3.js vinculando-a diretamente à nossa página HTML da Content Delivery Network (CDN). CDN é uma rede de servidores onde os arquivos são hospedados e entregues a um usuário com base em sua localização geográfica. Se usarmos o CDN, não precisamos baixar o código-fonte.

Incluir a biblioteca D3.js usando o URL CDN https://d3js.org/d3.v4.min.js em nossa página conforme mostrado abaixo.

Example - Vamos considerar o seguinte exemplo.

<!DOCTYPE html>
<html lang = "en">
   <head>
      <script src = "https://d3js.org/d3.v4.min.js"></script>
   </head>

   <body>
      <script>
         // write your d3 code here.. 
      </script>
   </body>
</html>

Editor D3.js

Precisamos de um editor para começar a escrever seu código. Existem alguns grandes IDEs (Ambiente de Desenvolvimento Integrado) com suporte para JavaScript como -

  • Código Visual Studio
  • WebStorm
  • Eclipse
  • Sublime Text

Esses IDEs fornecem conclusão de código inteligente e também oferecem suporte a algumas das estruturas JavaScript modernas. Se você não tem um IDE sofisticado, você sempre pode usar um editor básico como Notepad, VI, etc.

Navegador da web

D3.js funciona em todos os navegadores, exceto IE8 e inferior.

Servidor web

A maioria dos navegadores fornece arquivos HTML locais diretamente do sistema de arquivos local. No entanto, existem certas restrições quando se trata de carregar arquivos de dados externos. Nos últimos capítulos deste tutorial, estaremos carregando dados de arquivos externos comoCSV e JSON. Portanto, será mais fácil para nós se configurarmos o servidor web desde o início.

Você pode usar qualquer servidor web com o qual se sinta confortável - por exemplo, IIS, Apache, etc.

Visualizando sua página

Na maioria dos casos, podemos apenas abrir seu arquivo HTML em um navegador da web para visualizá-lo. No entanto, ao carregar fontes de dados externas, é mais confiável executar um servidor da web local e visualizar sua página a partir do servidor(http://localhost:8080).