D3 Custom Bundle with Webpack

100%

D3 Custom Bundle with Webpack

✓ Published0🌍 Public

Last edited Mar 16, 2017

Created on Mar 16, 2017

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.

AI-generated description

Another demonstration of a custom D3 bundle using Rollup. This demonstrates importing d3-transition, which modifies selection.prototype to define selection.transition:

import "d3-transition";

(There are other features in d3-transition, but they are not imported here because they are not used.) Note that you must also import selection from d3-selection; otherwise, Rollup doesn’t know that it needs to include the imported code from d3-transition. Rollup isn’t perfect at detecting which code needs to be included (and which code shouldn’t be included), so sometimes you need to give it a hand.

forked from <a href='http://bl.ocks.org/mbostock/'>mbostock</a>'s block: <a href='http://bl.ocks.org/mbostock/97557a39b4bfc8229786c8bccb54074d'>D3 Custom Bundle II</a>

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

84% match

Loading thumbnail…

D3 Custom Bundle

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.

Mmbostock

79% 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

75% match

Loading thumbnail…

selection-multi and transition rollup

This example demonstrates a D3.js animation that highlights the interplay between chained `.styles()` and `.transition()` methods on selected elements. Two `<h1>` headings are styled and animated in sequence: the first applies a red centered style, then transitions its color to steelblue over one second; the second starts invisible and fades in over another second after a delay. The visualization—essentially a minimal proof-of-concept—uses a custom bundling of d3-selection-multi and d3-transition to show how multi-property style and transition methods can be combined, with a note on the required prototype patching for transition chaining. The page renders text-only, with no charts or data, and relies on animation to demonstrate the effects.

11wheel

75% 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

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

73% match

Loading thumbnail…

d3

A playful set of five text elements counts up to 10 on load with staggered delays, then changes to 50 on mouseenter and back to 10 on mouseleave using `d3.transition` and `d3.interpolateRound` inside a custom `.tween`. The page background animates from red to green via a chained `transition().style()`, while an SVG renders six yellow circles with radii proportional to the square root of their data values using `d3.selectAll().data().enter().append()`. The example demonstrates D3 v7’s selection, transition, and tweening APIs in a plain HTML page.

Ssukumardunn

73% match

Loading thumbnail…

D3 animations

This example demonstrates a minimal D3 version 7 setup that renders the text "Hello D3 version 7" directly onto the page body. It loads the full D3 library from a CDN and uses the `select` API to target the body element. The example serves as a starting point for exploring D3’s animation capabilities, showing how to initialize the library and perform a basic DOM selection. The code does not include any animation logic beyond the static text insertion.

SSimone

72% match