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

where:

Advertising

2.3 - Directory structure

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

where:

  • dist/bundle.js is created by webpack
  • dist/index.html
index.html
<html>
<head>
    <title>D3 Home</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
  • src/myD3.js.js is your source code. Example:
myD3.js
import * as d3 from "d3";
 
var section = d3.select("body").append("section");
d3.select();
section.append("div")
    .html("First!");
section.append("div")
    .html("Second!");
  • webpack.config.js
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
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
First!
Second!

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

Advertising

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