Home

D3 (Data-Driven Documents ou D3.js) é uma biblioteca JavaScript para visualizar dados usando padrões da web. O D3 ajuda você a dar vida aos dados usando SVG, Canvas e HTML. O D3 combina técnicas poderosas de visualização e interação com uma abordagem baseada em dados para manipulação de DOM, oferecendo a você todos os recursos dos navegadores modernos e a liberdade de projetar a interface visual certa para seus dados.

Recursos

• Introdução
• Referência da API
• Releases
• Exemplos
• Tutoriais
• Plugins

Ajuda e comunidade

• Stack Overflow
• Google Group
• Slack (Invite)
• Gitter
• IRC: #d3.js on irc.freenode.net

Traduções (não oficiais)

• 한국어
• 日本語
• 中文手册
• 中文手册v4
• 简体中文
• 繁體中文
• Русский
• Türkçe
• Indonesian
• Português
• Español

Começando

Observable é a maneira mais rápida de começar a trabalhar com D3. Leia a introdução ou navegue na galeria de exemplos D3 para inspiração e, em seguida, pegue um notebook!

Instalando

Veja https://github.com/d3/d3/blob/main/README.md#installing

Ambientes suportados

O D3 5+ suporta navegadores recentes, como Chrome, Edge, Firefox e Safari. D3 4 e abaixo também suporta IE 9+. Partes do D3 podem funcionar em navegadores mais antigos, pois muitos módulos D3 têm requisitos mínimos. Por exemplo, d3-selection usa a API de seletores Nível 1, mas você pode pré-carregar Sizzle para compatibilidade. Você precisará de um navegador moderno para usar SVG e CSS3 Transitions. D3 não é uma camada de compatibilidade, portanto, se o seu navegador não oferece suporte aos padrões, você está sem sorte. Desculpe!

D3 também roda em Node e web workers. Para usar o DOM no Node, você deve fornecer sua própria implementação de DOM; JSDOM é recomendado. Para evitar a definição de um document global, passe um elemento DOM para d3.select ou um NodeList para d3.selectAll, assim:

import {select} from "d3-selection";
import {JSDOM} from "jsdom";

const jsdom = new JSDOM(html);
const svg = select(jsdom.window.document.body).append("svg");

Ao usar o D3 em um ambiente compatível com módulos ES, você pode importar o pacote D3 padrão como um namespace:

import * as d3 from "d3";

Se você deseja importar um módulo D3 que não está incluído no pacote padrão, deve atribuir a ele um namespace separado:

import * as d3 from "d3";
import * as d3GeoProjection from "d3-geo-projection";

Por esse motivo, o padrão preferido é importar símbolos dos módulos D3 diretamente, em vez de usar o pacote padrão:

import {select, selectAll} from "d3-selection";
import {geoPath} from "d3-geo";
import {geoPatterson} from "d3-geo-projection";
import "d3-transition";

Se você estiver usando um bundler, certifique-se de que seu bundler esteja configurado para consumir o ponto de entrada modules no package.json. Consulte resolve.mainFields do webpack, por exemplo.

Desenvolvimento Local

Os navegadores impõem permissões de segurança estritas para impedir que você leia arquivos do sistema de arquivos local. Para desenvolver localmente, você deve executar um servidor web local em vez de usar file://…. O http-server do Node é recomendado. Para instalar:

npm install -g http-server 

Para executar:

http-server & 

Isso iniciará o servidor em http://localhost:8080 a partir do diretório de trabalho atual.