Is it possible to use d3.js with gatsby.js framework?

Question

I'm in the process of creating a personal website/portfolio, and I stumbled upon the robust gatsby.js package.

I also have to visualize a complicated dataset for research purposes and I want to use d3.js, and include the dashboard I create in my Gatsby powered site.

It's possible to use d3 in react components -> https://medium.com/@Elijah_Meeks/interactive-applications-with-react-d3-f76f7b3ebc71

Theoretically,Gatsby should be able to support d3 integration, but my attempts thus far have failed.

Here is what I have tried:

Complete the Gatsby tutorials https://www.gatsbyjs.org/tutorial/

I am using a completed 4th tutorial site from the gatsbyjs documentation with the following additions

npm install --save d3

added utils/d3.js

file contents

import d3 from "d3"
module.exports = d3

I also added d3 to the gatsby-config.js plugins.

I run gatsby develop, and receive the following error, which hangs.

success delete html files from previous builds — 0.005 s
success open and validate gatsby-config.js — 0.003 s
(node:8725) UnhandledPromiseRejectionWarning: Unhandled promise rejection 
(rejection id: 2): Error: Unable to find plugin "d3"
(node:8725) [DEP0018] DeprecationWarning: Unhandled promise rejections are deprecated.
 In the future, promise rejections that are not handled will terminate the Node.js process with a non-zero exit code.

Any feedback would be helpful, if this is an intractable feat, what would be my path of least resistance to accomplish my goal of d3 integration and an easy personal site framework?

UPDATE 09/08/17

I switched to the Hello World! tutorial to debug the d3 issue. I have tried d3 and d3-node npm packages.

Upon adding import d3 from "d3" to my index.js file, I get two similar errors that occur after the bootstrap finishes.

Both errors loop in compile attempts and respectively output:

d3 error

ERROR  Failed to compile with 2 errors  
These dependencies were not found:

* child_process in ./~/xmlhttprequest/lib/XMLHttpRequest.js

* fs in ./~/xmlhttprequest/lib/XMLHttpRequest.js

To install them, you can run: npm install --save child_process fs

d3-node error switch the import on index.js to "d3-node"

ERROR  Failed to compile with 13 errors

These dependencies were not found:

* fs in ./~/jsdom/lib/jsdom.js, ./~/jsdom/lib/jsdom/browser/resource-loader.js and 3 others
* net in ./~/tough-cookie/lib/cookie.js, ./~/forever-agent/index.js and 1 other
* child_process in ./~/jsdom/lib/jsdom/living/xmlhttprequest.js
* tls in ./~/forever-agent/index.js, ./~/tunnel-agent/index.js

To install them, you can run: npm install --save fs net child_process tls

These relative modules were not found:

* ../file-api/FileReader-impl.js in ./~/jsdom/lib/jsdom/living/generated/FileReader.js
* ../events/MutationEvent-impl.js in ./~/jsdom/lib/jsdom/living/generated/MutationEvent.js

Jimmy Longley Jimmy Longley · Accepted Answer · 2017-11-02T01:00:58

The problem has to do with the fact that the most recent version of D3 v4 uses a bunch of node.js dependencies, as explained in this gatsby github issue:

https://github.com/gatsbyjs/gatsby/issues/2107

The solution is to modify your webpack config so that it loads the correct version of d3.

I'm using D3 in a gatsby project to create a force-directed graph, and I discovered I could sidestep this issue by only loading the d3-force library instead of the entire d3 package. This is preferable anyways because it is anti-react to let D3 directly manipulate the DOM. A better approach is to use D3 for the calculation and react for the rendering as shown here:

https://medium.com/walmartlabs/d3v4-forcesimulation-with-react-8b1d84364721

Is it possible to use d3.js with gatsby.js framework?

2 Answers