D3 Custom Bundle II

100%

D3 Custom Bundle II

✓ Published0🌍 Public

Last edited Mar 21, 2017

Created on May 20, 2016

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.

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.

gpl-3.0 Licensed

Similar vizzes

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

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

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

78% 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…

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

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

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

69% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates a minimal D3 setup using React. It creates an empty SVG element appended to the page body, showing how to initialize D3 selections alongside a React environment. The code imports the `select` function from D3 and applies it directly to the DOM, adding an SVG container without any visual content or data binding. The visualization leverages D3 version 7.8.5, with the rendering handled entirely by SVG, though no shapes or marks are drawn in this bare-bones exploration.

Nnreinig3@gatech.edu

69% match