d3.js

The d3.js module provides integration of D3 visualization library with Drupal. There are several javascript charts & graphs libraries out there, googleapi and jqplot for example. The D3 library, however, is not only a much more flexible library, but also offers more than just charts and graphs.

Just to give a few examples:

1. Multiple line graphs
2. Pie charts / Donut charts
3. Bar charts / Histograms
4. Contours
5. Trees (tidy, indented, radial)
6. Treemaps
7. Sunbursts
8. Force-directed graphs
9. Chord diagrams
10. Scatterplot / Dot plot
11. Bubble charts
12. Chloropleth maps
13. etc.

Information on d3.js

• http://mbostock.github.com/d3/
• https://leanpub.com/D3-Tips-and-Tricks

New D10/11 Release (2026)

The Drupal 10/11 release is a complete rewrite of previous Drupal 7 version of the module. It provides better support for D3 libraries as well as a new support to extract data from Drupal contents.

Installation

This module uses d3.js library and JSONPath library for mapping operations. When installing with composer, the JSONPath library is automatically installed. While the module does not require to download D3.js library locally as it can use the version provided by d3js.org, it is however recommended to download it and install it in your site libraries directory. See README.md file for details.

Features

The module provides a custom configuration entity type "Data Structure Builder"
for generating data structures suitable for D3 visualizations from any suitable
Drupal content entity type. As a configuration entity, Data Structure Builder
entities can be exported and imported using Drupal's configuration management.

The module also provides a plugin definition for D3 Renderer. A D3 Renderer is
a D3 script that can render data provided by a Data Structure Builder instance
or an external data file (JSON, CSV, Newick, ...). A set of plugin is provided
as well as an example module that demonstrates how to create a custom 3D
renderer.

To benefit from Data Structure Builder and D3 Renderers, the module also
provides 2 field formatters, a text filter, and view style and area plugins to
display data using D3 on Drupal.

There are currently only 3 D3 renderers shipped with this module (as of beta 1) but more are coming. Adding new D3 renderers is not a complicated task (see companion example module). There is also a development documentation.

Usage

Extensive usage explanations are available in the README.md file.

Basically, with the provided D3 renderers, you can render both static data files (or generated files) and data from any Drupal content type. To render Drupal content, your content must contain the appropriate data (values, identifiers, categories, relationships between elements, etc.). Then, you will have to define the mapping between your Drupal content structure and a data structure expected by a D3 renderer. To do so, you will use a Data Structure Builder instance that you will configure according to your data use case. Some mapping recipes are provided in the README.md file.

Once you got a data source, you may use your favorite D3 renderer on a page using a configured text format that uses the D3 filter, or on a view either as the main rendering part or at the top or the bottom of you view, or even on content entity field display (a field could provide either a data file or a set of data values to use as data source).

To have an overview of the available D3 renderers, log as admin on your Drupal site and got to Manage > Reports > D3 Renderer Plugins (/admin/reports/d3renderers).