Text file src/cmd/vendor/github.com/google/pprof/third_party/d3/README.md
1 # Building a customized D3.js bundle
2
3 The D3.js version distributed with pprof is customized to only include the modules required by pprof.
4
5 ## Dependencies
6
7 First, it's necessary to pull all bundle dependencies. We will use a JavaScript package manager, [npm](https://www.npmjs.com/), to accomplish that. npm dependencies are declared in a `package.json` file, so create one with the following configuration:
8
9 ```js
10 {
11 "name": "d3-pprof",
12 "version": "1.0.0",
13 "description": "A d3.js bundle for pprof.",
14 "scripts": {
15 "prepare": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js"
16 },
17 "license": "Apache-2.0",
18 "devDependencies": {
19 "d3-selection": "1.1.0",
20 "d3-hierarchy": "1.1.5",
21 "d3-scale": "1.0.6",
22 "d3-format": "1.2.0",
23 "d3-ease": "1.0.3",
24 "d3-array": "1.2.1",
25 "d3-collection": "1.0.4",
26 "d3-transition": "1.1.0",
27 "rollup": "0.51.8",
28 "rollup-plugin-node-resolve": "3",
29 "uglify-js": "3.1.10"
30 }
31 }
32 ```
33
34 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.
35
36 ## Bundler
37
38 The simplest way of creating a custom bundle is to use a bundler, such as [Rollup](https://rollupjs.org/) or [Webpack](https://webpack.js.org/). Rollup will be used in this example.
39
40 First, create a `rollup.config.js` file, containing the configuration Rollup should use to build the bundle.
41
42 ```js
43 import node from "rollup-plugin-node-resolve";
44
45 export default {
46 input: "index.js",
47 output: {
48 format: "umd",
49 file: "d3.js"
50 },
51 name: "d3",
52 plugins: [node()],
53 sourcemap: false
54 };
55 ```
56
57 Then create an `index.js` file containing all the functions that need to be exported in the bundle.
58
59 ```js
60 export {
61 select,
62 selection,
63 event,
64 } from "d3-selection";
65
66 export {
67 hierarchy,
68 partition,
69 } from "d3-hierarchy";
70
71 export {
72 scaleLinear,
73 } from "d3-scale";
74
75 export {
76 format,
77 } from "d3-format";
78
79 export {
80 easeCubic,
81 } from "d3-ease";
82
83 export {
84 ascending,
85 } from "d3-array";
86
87 export {
88 map,
89 } from "d3-collection";
90
91 export {
92 transition,
93 } from "d3-transition";
94 ```
95
96 ## Building
97
98 Once all files were created, execute the following commands to pull all dependencies and build the bundle.
99
100 ```
101 % npm install
102 % npm run prepare
103 ```
104
105 This will create two files, `d3.js` and `d3.min.js`, the custom D3.js bundle and its minified version respectively.
106
107 # References
108
109 ## D3 Custom Bundle
110
111 A demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup.
112
113 [bl.ocks.org/mbostock/bb09af4c39c79cffcde4](https://bl.ocks.org/mbostock/bb09af4c39c79cffcde4)
114
115 ## d3-pprof
116
117 A repository containing all previously mentioned configuration files and the generated custom bundle.
118
119 [github.com/spiermar/d3-pprof](https://github.com/spiermar/d3-pprof)View as plain text