pprof/third_party/d3

Building a customized D3.js bundle

The D3.js version distributed with pprof is customized to only include the modules required by pprof.

Dependencies

First, it’s necessary to pull all bundle dependencies. We will use a JavaScript package manager, npm, to accomplish that. npm dependencies are declared in a package.json file, so create one with the following configuration:

{
  "name": "d3-pprof",
  "version": "1.0.0",
  "description": "A d3.js bundle for pprof.",
  "scripts": {
    "prepare": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js"
  },
  "license": "Apache-2.0",
  "devDependencies": {
    "d3-selection": "1.1.0",
    "d3-hierarchy": "1.1.5",
    "d3-scale": "1.0.6",
    "d3-format": "1.2.0",
    "d3-ease": "1.0.3",
    "d3-array": "1.2.1",
    "d3-collection": "1.0.4",
    "d3-transition": "1.1.0",
    "rollup": "0.51.8",
    "rollup-plugin-node-resolve": "3",
    "uglify-js": "3.1.10"
  }
}

Besides the bundle dependencies, the package.json file also specifies a script called prepare, which will be executed to create the bundle after Rollup is installed.

Bundler

The simplest way of creating a custom bundle is to use a bundler, such as Rollup or Webpack. Rollup will be used in this example.

First, create a rollup.config.js file, containing the configuration Rollup should use to build the bundle.

import node from "rollup-plugin-node-resolve";

export default {
  input: "index.js",
  output: {
    format: "umd",
    file: "d3.js"
  },
  name: "d3",
  plugins: [node()],
  sourcemap: false
};

Then create an index.js file containing all the functions that need to be exported in the bundle.

export {
  select,
  selection,
  event,
} from "d3-selection";

export {
    hierarchy,
    partition,
} from "d3-hierarchy";

export {
    scaleLinear,
} from "d3-scale";

export {
    format,
} from "d3-format";

export {
    easeCubic,
} from "d3-ease";

export {
    ascending,
} from "d3-array";

export {
    map,
} from "d3-collection";

export {
    transition,
} from "d3-transition";

Building

Once all files were created, execute the following commands to pull all dependencies and build the bundle.

% npm install
% npm run prepare

This will create two files, d3.js and d3.min.js, the custom D3.js bundle and its minified version respectively.

References

D3 Custom Bundle

A demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup.

bl.ocks.org/mbostock/bb09af4c39c79cffcde4

d3-pprof

A repository containing all previously mentioned configuration files and the generated custom bundle.

github.com/spiermar/d3-pprof