D3 Custom Bundle

100%

D3 Custom Bundle

✓ Published0🌍 Public

Last edited Oct 13, 2016

Created on May 29, 2015

This example demonstrates a custom D3 4.0 bundle built with ES2015 modules and Rollup, exposing only `d3.event`, `d3.select`, and `d3.selectAll` from the `d3-selection` module. The minified and gzipped bundle is 3,691 bytes, a 93% savings over the default build. The code uses `d3.select("body").append("h1").text("Hello, world!")` to render a heading, with Rollup and UglifyJS handling the build process.

AI-generated description

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

gpl-3.0 Licensed

Similar vizzes

Loading thumbnail…

D3 Custom Bundle II

This example demonstrates a minimal custom D3 bundle built with Rollup. It imports `selection`, `select`, `selectAll`, and `event` from `d3-selection`, along with `d3-transition` to enable the `transition` method on selections. The page appends an `<h1>` element, applies initial inline styles, then animates a transformation over 1.5 seconds using a chained transition. The code highlights how Rollup can include only the necessary D3 modules when explicitly importing required dependencies.

Mmbostock

86% match

Loading thumbnail…

D3 Custom Bundle with Webpack

A custom D3 bundle built with Webpack demonstrates importing `d3-transition` alongside `d3-selection` to animate a text element. The code appends an "Hello, world!" heading, rotates and scales it down, then uses `.transition().duration(1500)` to restore the transform over 1.5 seconds. The example shows how Webpack’s module resolution includes only the imported transition features, while the minified `d3.min.js` output is generated via UglifyJS. This illustrates a minimal setup for tree-shaking D3 modules in a browser environment.

CCurran Kelleher

79% match

Loading thumbnail…

custom d3-selection bundle

This example demonstrates a custom-built D3 bundle, assembled via npm and a build script, that combines the d3-jetpack-module with geoNaturalEarth projections. The visualization uses SVG and canvas rendering with animation, leveraging the custom D3 build to showcase modular selection utilities and geographic projections. The bundle is configured through index.js and built with npm, as detailed in the included README.

11wheel

77% match

Loading thumbnail…

JS packs D3

This example demonstrates the basic setup for using D3 version 7, rendering the text “Hello D3 version 7” in the browser body at a large font size. It imports D3’s `select` method and combines it with custom ES modules from separate files, including a `something.js` module that exports a string combining values from `thing.js`. The `index.html` loads D3 from a CDN as a global script, while a pre-built `bundle.js` (compiled from the JavaScript modules) is invoked afterward to execute the D3 selection and text assignment.

CCameron Wehr

74% match

Loading thumbnail…

Gist e6f198ff61f5d2d9ec3a540a0ac3b9ca

This example demonstrates a minimal D3.js v5 application that uses the `d3.select` method to target an HTML element with the ID `hello` and replace its text content with "Hello World!!". The code imports D3 as a module from a bundled file path (`/-/d3@5.9.2.bundle.js`), which is configured via an Airdrop setup for dependency management. The rendering approach is simple DOM manipulation, not a data-driven visualization, as no scales, shapes, or data bindings are present. The example serves as a basic integration test for loading D3 in a module-based project.

HHypercubed

72% match

Loading thumbnail…

Fork of D3 Starter

This example shows a minimal D3 version 7 setup where the page displays the text “Hello D3 version 7” in the browser body. It demonstrates the basic import and use of the `select` function from the d3 module to target the body element and set its text content. The code loads the full D3 library from unpkg and bundles the main script as `bundle.js`, with no additional data or complex rendering involved.

WWilliam Niemiec

71% match

Loading thumbnail…

Javascript build tools

This example illustrates the JavaScript build-tool ecosystem, mapping tools like npm, yarn, rollup, and webpack to their roles as package managers or module bundlers. It uses plain DOM elements and D3 v7’s `select` and `version` to display text, while the underlying code demonstrates module syntax with named and default exports. The visualization’s source files show how `index.js` imports from `something.js` and `thing.js`, and the HTML references a rollup-injected bundle, clarifying how bundlers assemble local packages into browser-ready scripts.

BBart van Pelt

70% match

Loading thumbnail…

JS in HTML_Redone

This example demonstrates the contrast between static HTML content and dynamic JavaScript data visualization within a single webpage. It displays a large "Hello HTML!" message while using D3 v7’s `select` function in the console, importing and concatenating strings from separate modules to log a composed message. The code relies on ES6 module imports, including a default and named export, and bundles them via `bundle.js` alongside the D3 library loaded from a CDN. No interactive or visual D3 elements are rendered; the visualization is purely textual and console-based.

Ppawelsapiecha

70% match