D3 - Dev Installation

> Data Visualization (vis|viz|graphic|image) > D3 (Data-Driven Documents)

1 - About

This article describe a dev environment installation with:

The work and scripts are also available on GitHub. gerardnico/create-d3-app

A static web project is still a simpler method. In every IDE, you can still start a debugging session with a javascript embedded in a HTML page

2 - Steps

2.1 - npm

2.2 - Library installation

npm init -y # Create a package.json file with the default value
npm install d3
npm install --save-dev webpack-dev-server
npm install --save-dev webpack
npm install --save-dev eslint
npm install --save-dev copy-webpack-plugin



2.3 - Directory structure

--- dist /
        -- index.html
        -- bundle.js
        -- data /
            -- file.csv
            -- file.json
--- src /
        -- myD3.js
--- data /
        -- file.csv
        -- file.json


  • dist/bundle.js is created by webpack
  • dist/index.html
    <title>D3 Home</title>
<script src="bundle.js"></script>
  • src/myD3.js.js is your source code. Example:
import * as d3 from "d3";
var section = d3.select("body").append("section");
  • webpack.config.js
const path = require('path');
const CopyWebpackPlugin = require('copy-webpack-plugin')
const paths = {
    src: path.join(__dirname, 'src'),
    dist: path.join(__dirname, 'dist'),
    data: path.join(__dirname, 'data')
module.exports = {
    // The entry key describes the entry file where the scripts and styles should be imported to
    entry: ['./src/index.js'],
    // The output key describes the wanted output
    output: {
        filename: 'bundle.js',
        path: paths.dist
    // The dev server description
    devServer: {
        contentBase: paths.dist,
        compress: true,
        port: 9000
    plugins: [
        // Copy the data
        new CopyWebpackPlugin([
            from: paths.data,
            to: paths.dist + '/data'
  • package.json
  "name": "D3",
  "version": "1.0.0",
  "description": "A D3 hot reload dev environment",
  "scripts": {
    "start": "webpack-dev-server"
  "author": "Nicolas Gerard",
  "license": "MIT",
  "dependencies": {
    "d3": "^4.10.2"
  "devDependencies": {
    "webpack": "^3.6.0",
    "webpack-dev-server": "^2.8.2",
    "eslint": "^4.7.2",
    "copy-webpack-plugin": "^4.0.1"

2.4 - Starting the server

  • you start the server with npm.
npm start

If you change your code in the file myD3.js, the page will be hot reloaded and you will see the changes.


2.5 - Documentation in IDE VsCode

VSCode lets you see the documentation. Ctrl+Q on the symbol.

  • Idea does not offer the documentation at all

3 - Others

The extension operates in two modes - it can launch an instance of Chrome navigated to your app, or it can attach to a running instance of Chrome. Both modes requires you to be serving your web application from local web server, which is started from either a VS Code task or from your commandline. Using the url parameter you simply tell VS Code which URL to either open or launch in Chrome.

4 - Documentation / Reference

viz/d3/dev.txt · Last modified: 2019/02/16 17:40 by gerardnico