custom d3-selection bundle

100%

custom d3-selection bundle

✓ Published0🌍 Public

Last edited Sep 13, 2018

Created on Sep 15, 2016

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.

AI-generated description

Custom build of D3 with d3-jetpack-module and geoNaturalEarth

To modify:

add or remove packages in index.js
> npm run build

Forked from D3 Custom Bundle II

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

77% match

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

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

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

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…

D3 - Edge Bundling

This example demonstrates edge bundling for a directed graph, visualizing connections between nodes as smoothly curved paths. The code uses D3.js force-directed layout via `d3.forceSimulation` to position nodes and employs `d3.geoPath` for drawing the bundled edges. It renders the graph on an HTML5 Canvas, with the bundling achieved by iteratively adjusting control points along each edge. The implementation references a static JSON dataset containing nodes and links, and all styling and interactivity are handled through React components and D3's selection API.

CChandana Srinivas

68% match

Loading thumbnail…

D3 Selections

This example demonstrates how D3 selections bind data to SVG elements. It renders five circles across the viewport, each with a random radius between 10 and 50, generated by a custom `Data` function using `d3.range`. The `Circles` module applies a re-usable selection pattern with `selectAll`, `data`, and `join` to create and style the circles. The main script uses `d3.select`, appends an SVG sized to the window, and calls the circle component, showing a modular approach to D3 v7 development in an ES modules setup.

AAdan Rodriguez

68% match

Loading thumbnail…

D3 Selection Exploration

This example demonstrates animated data binding in D3.js, showing how SVG circles are dynamically added, removed, and updated as the dataset changes in real time. The visualization uses D3's `selectAll` and `join` methods within a custom `vizData` function to manage circle elements, while a `setInterval` loop drives the animation at 60 frames per second. Data is generated procedurally using `d3.range` and `scaleLinear`, with each circle's position and radius varying based on sine functions of time and index. The source code imports from the D3 v6 module and renders directly to an SVG canvas in the browser.

Aainhoadieruiz@gmail.com

68% match