Skip to content

Instantly share code, notes, and snippets.

@mbostock
Last active August 7, 2020 22:45
Show Gist options
  • Star 11 You must be signed in to star a gist
  • Fork 3 You must be signed in to fork a gist
  • Save mbostock/bb09af4c39c79cffcde4 to your computer and use it in GitHub Desktop.
Save mbostock/bb09af4c39c79cffcde4 to your computer and use it in GitHub Desktop.
D3 Custom Bundle
license: gpl-3.0
.DS_Store
node_modules
npm-debug.log
d3.js

This is a demonstration of building a custom D3 4.0 bundle using ES2015 modules and Rollup. Custom bundles can be optimized to contain only the code you need. This example exposes just three fields on the d3 object: d3.event, d3.select and d3.selectAll. The minified and gzipped bundle is only 3,691 bytes, a savings of 93% over the default build!

To build:

npm install
npm run prepublish

You may also run Rollup and UglifyJS directly:

rollup -c && uglifyjs d3.js -c -m -o d3.min.js
!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?n(exports):"function"==typeof define&&define.amd?define(["exports"],n):n(t.d3=t.d3||{})}(this,function(t){"use strict";function n(t){return function(){var n=this.ownerDocument,e=this.namespaceURI;return e===K&&n.documentElement.namespaceURI===K?n.createElement(t):n.createElementNS(e,t)}}function e(t){return function(){return this.ownerDocument.createElementNS(t.space,t.local)}}function r(t,n,e){return t=i(t,n,e),function(n){var e=n.relatedTarget;e&&(e===this||8&e.compareDocumentPosition(this))||t.call(this,n)}}function i(n,e,r){return function(i){var o=t.event;t.event=i;try{n.call(this,this.__data__,e,r)}finally{t.event=o}}}function o(t){return t.trim().split(/^|\s+/).map(function(t){var n="",e=t.indexOf(".");return e>=0&&(n=t.slice(e+1),t=t.slice(0,e)),{type:t,name:n}})}function u(t){return function(){var n=this.__on;if(n){for(var e,r=0,i=-1,o=n.length;r<o;++r)e=n[r],t.type&&e.type!==t.type||e.name!==t.name?n[++i]=e:this.removeEventListener(e.type,e.listener,e.capture);++i?n.length=i:delete this.__on}}}function s(t,n,e){var o=rt.hasOwnProperty(t.type)?r:i;return function(r,i,u){var s,a=this.__on,c=o(n,i,u);if(a)for(var l=0,f=a.length;l<f;++l)if((s=a[l]).type===t.type&&s.name===t.name)return this.removeEventListener(s.type,s.listener,s.capture),this.addEventListener(s.type,s.listener=c,s.capture=e),void(s.value=n);this.addEventListener(t.type,c,e),s={type:t.type,name:t.name,value:n,listener:c,capture:e},a?a.push(s):this.__on=[s]}}function a(){}function c(){return[]}function l(t,n){this.ownerDocument=t.ownerDocument,this.namespaceURI=t.namespaceURI,this._next=null,this._parent=t,this.__data__=n}function f(t,n,e,r,i,o){for(var u,s=0,a=n.length,c=o.length;s<c;++s)(u=n[s])?(u.__data__=o[s],r[s]=u):e[s]=new l(t,o[s]);for(;s<a;++s)(u=n[s])&&(i[s]=u)}function h(t,n,e,r,i,o,u){var s,a,c,f={},h=n.length,p=o.length,_=new Array(h);for(s=0;s<h;++s)(a=n[s])&&(_[s]=c=_t+u.call(a,a.__data__,s,n),c in f?i[s]=a:f[c]=a);for(s=0;s<p;++s)c=_t+u.call(t,o[s],s,o),(a=f[c])?(r[s]=a,a.__data__=o[s],f[c]=null):e[s]=new l(t,o[s]);for(s=0;s<h;++s)(a=n[s])&&f[_[s]]===a&&(i[s]=a)}function p(t,n){return t<n?-1:t>n?1:t>=n?0:NaN}function _(t){return function(){this.removeAttribute(t)}}function d(t){return function(){this.removeAttributeNS(t.space,t.local)}}function v(t,n){return function(){this.setAttribute(t,n)}}function m(t,n){return function(){this.setAttributeNS(t.space,t.local,n)}}function y(t,n){return function(){var e=n.apply(this,arguments);null==e?this.removeAttribute(t):this.setAttribute(t,e)}}function g(t,n){return function(){var e=n.apply(this,arguments);null==e?this.removeAttributeNS(t.space,t.local):this.setAttributeNS(t.space,t.local,e)}}function w(t){return function(){this.style.removeProperty(t)}}function A(t,n,e){return function(){this.style.setProperty(t,n,e)}}function x(t,n,e){return function(){var r=n.apply(this,arguments);null==r?this.style.removeProperty(t):this.style.setProperty(t,r,e)}}function b(t){return function(){delete this[t]}}function S(t,n){return function(){this[t]=n}}function E(t,n){return function(){var e=n.apply(this,arguments);null==e?delete this[t]:this[t]=e}}function N(t){return t.trim().split(/^|\s+/)}function C(t){return t.classList||new M(t)}function M(t){this._node=t,this._names=N(t.getAttribute("class")||"")}function L(t,n){for(var e=C(t),r=-1,i=n.length;++r<i;)e.add(n[r])}function P(t,n){for(var e=C(t),r=-1,i=n.length;++r<i;)e.remove(n[r])}function q(t){return function(){L(this,t)}}function O(t){return function(){P(this,t)}}function D(t,n){return function(){(n.apply(this,arguments)?L:P)(this,t)}}function B(){this.textContent=""}function T(t){return function(){this.textContent=t}}function j(t){return function(){var n=t.apply(this,arguments);this.textContent=null==n?"":n}}function z(){this.innerHTML=""}function H(t){return function(){this.innerHTML=t}}function I(t){return function(){var n=t.apply(this,arguments);this.innerHTML=null==n?"":n}}function R(){this.nextSibling&&this.parentNode.appendChild(this)}function U(){this.previousSibling&&this.parentNode.insertBefore(this,this.parentNode.firstChild)}function k(){return null}function V(){var t=this.parentNode;t&&t.removeChild(this)}function X(t,n,e){var r=Ct(t),i=r.CustomEvent;i?i=new i(n,e):(i=r.document.createEvent("Event"),e?(i.initEvent(n,e.bubbles,e.cancelable),i.detail=e.detail):i.initEvent(n,!1,!1)),t.dispatchEvent(i)}function $(t,n){return function(){return X(this,t,n)}}function F(t,n){return function(){return X(this,t,n.apply(this,arguments))}}function G(t,n){this._groups=t,this._parents=n}function J(){return new G([[document.documentElement]],Rt)}var K="http://www.w3.org/1999/xhtml",Q={svg:"http://www.w3.org/2000/svg",xhtml:K,xlink:"http://www.w3.org/1999/xlink",xml:"http://www.w3.org/XML/1998/namespace",xmlns:"http://www.w3.org/2000/xmlns/"},W=function(t){var n=t+="",e=n.indexOf(":");return e>=0&&"xmlns"!==(n=t.slice(0,e))&&(t=t.slice(e+1)),Q.hasOwnProperty(n)?{space:Q[n],local:t}:t},Y=function(t){var r=W(t);return(r.local?e:n)(r)},Z=function(t){return function(){return this.matches(t)}};if("undefined"!=typeof document){var tt=document.documentElement;if(!tt.matches){var nt=tt.webkitMatchesSelector||tt.msMatchesSelector||tt.mozMatchesSelector||tt.oMatchesSelector;Z=function(t){return function(){return nt.call(this,t)}}}}var et=Z,rt={};if(t.event=null,"undefined"!=typeof document){var it=document.documentElement;"onmouseenter"in it||(rt={mouseenter:"mouseover",mouseleave:"mouseout"})}var ot=function(t,n,e){var r,i,a=o(t+""),c=a.length;{if(!(arguments.length<2)){for(l=n?s:u,null==e&&(e=!1),r=0;r<c;++r)this.each(l(a[r],n,e));return this}var l=this.node().__on;if(l)for(var f,h=0,p=l.length;h<p;++h)for(r=0,f=l[h];r<c;++r)if((i=a[r]).type===f.type&&i.name===f.name)return f.value}},ut=function(t){return null==t?a:function(){return this.querySelector(t)}},st=function(t){"function"!=typeof t&&(t=ut(t));for(var n=this._groups,e=n.length,r=new Array(e),i=0;i<e;++i)for(var o,u,s=n[i],a=s.length,c=r[i]=new Array(a),l=0;l<a;++l)(o=s[l])&&(u=t.call(o,o.__data__,l,s))&&("__data__"in o&&(u.__data__=o.__data__),c[l]=u);return new G(r,this._parents)},at=function(t){return null==t?c:function(){return this.querySelectorAll(t)}},ct=function(t){"function"!=typeof t&&(t=at(t));for(var n=this._groups,e=n.length,r=[],i=[],o=0;o<e;++o)for(var u,s=n[o],a=s.length,c=0;c<a;++c)(u=s[c])&&(r.push(t.call(u,u.__data__,c,s)),i.push(u));return new G(r,i)},lt=function(t){"function"!=typeof t&&(t=et(t));for(var n=this._groups,e=n.length,r=new Array(e),i=0;i<e;++i)for(var o,u=n[i],s=u.length,a=r[i]=[],c=0;c<s;++c)(o=u[c])&&t.call(o,o.__data__,c,u)&&a.push(o);return new G(r,this._parents)},ft=function(t){return new Array(t.length)},ht=function(){return new G(this._enter||this._groups.map(ft),this._parents)};l.prototype={constructor:l,appendChild:function(t){return this._parent.insertBefore(t,this._next)},insertBefore:function(t,n){return this._parent.insertBefore(t,n)},querySelector:function(t){return this._parent.querySelector(t)},querySelectorAll:function(t){return this._parent.querySelectorAll(t)}};var pt=function(t){return function(){return t}},_t="$",dt=function(t,n){if(!t)return d=new Array(this.size()),c=-1,this.each(function(t){d[++c]=t}),d;var e=n?h:f,r=this._parents,i=this._groups;"function"!=typeof t&&(t=pt(t));for(var o=i.length,u=new Array(o),s=new Array(o),a=new Array(o),c=0;c<o;++c){var l=r[c],p=i[c],_=p.length,d=t.call(l,l&&l.__data__,c,r),v=d.length,m=s[c]=new Array(v),y=u[c]=new Array(v),g=a[c]=new Array(_);e(l,p,m,y,g,d,n);for(var w,A,x=0,b=0;x<v;++x)if(w=m[x]){for(x>=b&&(b=x+1);!(A=y[b])&&++b<v;);w._next=A||null}}return u=new G(u,r),u._enter=s,u._exit=a,u},vt=function(){return new G(this._exit||this._groups.map(ft),this._parents)},mt=function(t){for(var n=this._groups,e=t._groups,r=n.length,i=e.length,o=Math.min(r,i),u=new Array(r),s=0;s<o;++s)for(var a,c=n[s],l=e[s],f=c.length,h=u[s]=new Array(f),p=0;p<f;++p)(a=c[p]||l[p])&&(h[p]=a);for(;s<r;++s)u[s]=n[s];return new G(u,this._parents)},yt=function(){for(var t=this._groups,n=-1,e=t.length;++n<e;)for(var r,i=t[n],o=i.length-1,u=i[o];--o>=0;)(r=i[o])&&(u&&u!==r.nextSibling&&u.parentNode.insertBefore(r,u),u=r);return this},gt=function(t){function n(n,e){return n&&e?t(n.__data__,e.__data__):!n-!e}t||(t=p);for(var e=this._groups,r=e.length,i=new Array(r),o=0;o<r;++o){for(var u,s=e[o],a=s.length,c=i[o]=new Array(a),l=0;l<a;++l)(u=s[l])&&(c[l]=u);c.sort(n)}return new G(i,this._parents).order()},wt=function(){var t=arguments[0];return arguments[0]=this,t.apply(null,arguments),this},At=function(){var t=new Array(this.size()),n=-1;return this.each(function(){t[++n]=this}),t},xt=function(){for(var t=this._groups,n=0,e=t.length;n<e;++n)for(var r=t[n],i=0,o=r.length;i<o;++i){var u=r[i];if(u)return u}return null},bt=function(){var t=0;return this.each(function(){++t}),t},St=function(){return!this.node()},Et=function(t){for(var n=this._groups,e=0,r=n.length;e<r;++e)for(var i,o=n[e],u=0,s=o.length;u<s;++u)(i=o[u])&&t.call(i,i.__data__,u,o);return this},Nt=function(t,n){var e=W(t);if(arguments.length<2){var r=this.node();return e.local?r.getAttributeNS(e.space,e.local):r.getAttribute(e)}return this.each((null==n?e.local?d:_:"function"==typeof n?e.local?g:y:e.local?m:v)(e,n))},Ct=function(t){return t.ownerDocument&&t.ownerDocument.defaultView||t.document&&t||t.defaultView},Mt=function(t,n,e){var r;return arguments.length>1?this.each((null==n?w:"function"==typeof n?x:A)(t,n,null==e?"":e)):Ct(r=this.node()).getComputedStyle(r,null).getPropertyValue(t)},Lt=function(t,n){return arguments.length>1?this.each((null==n?b:"function"==typeof n?E:S)(t,n)):this.node()[t]};M.prototype={add:function(t){var n=this._names.indexOf(t);n<0&&(this._names.push(t),this._node.setAttribute("class",this._names.join(" ")))},remove:function(t){var n=this._names.indexOf(t);n>=0&&(this._names.splice(n,1),this._node.setAttribute("class",this._names.join(" ")))},contains:function(t){return this._names.indexOf(t)>=0}};var Pt=function(t,n){var e=N(t+"");if(arguments.length<2){for(var r=C(this.node()),i=-1,o=e.length;++i<o;)if(!r.contains(e[i]))return!1;return!0}return this.each(("function"==typeof n?D:n?q:O)(e,n))},qt=function(t){return arguments.length?this.each(null==t?B:("function"==typeof t?j:T)(t)):this.node().textContent},Ot=function(t){return arguments.length?this.each(null==t?z:("function"==typeof t?I:H)(t)):this.node().innerHTML},Dt=function(){return this.each(R)},Bt=function(){return this.each(U)},Tt=function(t){var n="function"==typeof t?t:Y(t);return this.select(function(){return this.appendChild(n.apply(this,arguments))})},jt=function(t,n){var e="function"==typeof t?t:Y(t),r=null==n?k:"function"==typeof n?n:ut(n);return this.select(function(){return this.insertBefore(e.apply(this,arguments),r.apply(this,arguments)||null)})},zt=function(){return this.each(V)},Ht=function(t){return arguments.length?this.property("__data__",t):this.node().__data__},It=function(t,n){return this.each(("function"==typeof n?F:$)(t,n))},Rt=[null];G.prototype=J.prototype={constructor:G,select:st,selectAll:ct,filter:lt,data:dt,enter:ht,exit:vt,merge:mt,order:yt,sort:gt,call:wt,nodes:At,node:xt,size:bt,empty:St,each:Et,attr:Nt,style:Mt,property:Lt,classed:Pt,text:qt,html:Ot,raise:Dt,lower:Bt,append:Tt,insert:jt,remove:zt,datum:Ht,on:ot,dispatch:It};var Ut=function(t){return"string"==typeof t?new G([[document.querySelector(t)]],[document.documentElement]):new G([[t]],Rt)},kt=function(t){return"string"==typeof t?new G([document.querySelectorAll(t)],[document.documentElement]):new G([null==t?[]:t],Rt)};t.select=Ut,t.selectAll=kt,Object.defineProperty(t,"__esModule",{value:!0})});
<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="d3.min.js"></script>
<script>
d3.select("body").append("h1").text("Hello, world!");
</script>
export {
event,
select,
selectAll
} from "d3-selection";
{
"name": "d3-custom-example",
"version": "0.0.1",
"scripts": {
"prepublish": "rollup -c && uglifyjs d3.js -c -m -o d3.min.js"
},
"devDependencies": {
"d3-selection": "1",
"rollup": "0.36",
"rollup-plugin-node-resolve": "2",
"uglify-js": "2"
}
}
import node from "rollup-plugin-node-resolve";
export default {
entry: "index.js",
format: "umd",
moduleName: "d3",
plugins: [node()],
dest: "d3.js"
};
@Lucent
Copy link

Lucent commented Mar 26, 2018

I'm only including d3-array, scale, color, and interpolate individually, but building them using this method, and only selecting a few functions from each, rollup builds a larger file than the sum of the four files concatenated together. Even building d3-interpolate alone and importing only interpolateLab creates a file exactly as large as d3-interpolate. Upon inspection, it has a lot of code that d3-interpolate alone does not have, such as color name definitions. Is there an option to create a more minimalistic build?

@adriennn
Copy link

it seems to be "prepublishOnly"

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment