100%

Javascript build tools

✓ Published2🌍 Public

Last edited Jan 7, 2023

Created on Jan 4, 2023

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.

AI-generated description

Javascript and tooling from https://www.youtube.com/watch?v=xkBheRZTkaw starting at 6:55 - 8:04

npm is company and package manager
npm is commandline tool
yarn is alternative for npm (package manager) using npm packages
rollup is module bundler. Alternatives webpack / parcel

package manager repository tool

module manager uses local packages

Guidelines (un)named exports

Default exports give other name to imports. This can be confusing.
Best practice always use named exports.

MIT Licensed

Similar vizzes

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

76% match

Loading thumbnail…

Ep6

This example demonstrates how modular JavaScript code can be assembled using ES6 imports and exports, alongside a direct integration of the D3.js library (v7). The visualization outputs a simple text string built from a constant defined in a separate module, while also logging the imported `select` function from D3 to the console. It contrasts an "old school approach" with a React-based starter template, highlighting different methods for structuring D3 projects. The code relies on D3's distribution from unpkg and does not render any graphical charts, serving only as a code-level illustration.

JJun Alvarado

73% match

Loading thumbnail…

D3 JavaScript Modules & Build Tools

This example demonstrates a minimal HTML page styled with CSS, rendering the message “Hello HTML!” as the core visualization. It uses plain JavaScript embedded in the page, with a CSS class controlling the large, centered font size. The code highlights the distinction between raw HTML/CSS/JavaScript and the modular, toolchain-driven workflow typical of D3 v3 with React, serving as a simplified baseline for understanding build tools and module bundling in data-visualization projects. No external libraries or data sources are used beyond the standard web platform.

RRashidi

73% match

Loading thumbnail…

JS in HTML

This example demonstrates a minimal, text-only visualization where the word "JS in HTML" is rendered at an extremely large font size (13em) and centered on the page. The visualization shows how D3 v6 can be imported and used alongside other JavaScript modules within a simple HTML document, with the code logging output to the browser's developer console. It uses D3's `d3.scaleLinear` and a named `select` import from the `d3` module, alongside custom modules (`something.js`, `thing.js`) that export strings. The page loads D3 from a CDN and executes both a main `script.js` and an automatically inserted `bundle.js`.

AAndre J Denais

72% match

Loading thumbnail…

JS modules Learner

This example demonstrates the JavaScript module system for importing and exporting variables between files. It shows how to share constants (`aThing`, `someThing`) across script files and how to load D3’s `select` API. The page renders a static HTML message with an inline `<style>` rule for large centered text, then logs imported values and the D3 `select` object to the console. It uses `d3.v7` from a CDN and relies on the browser’s native ES module support.

KKamalabot

72% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript modules can be seamlessly integrated into an HTML page using D3 v6. The page displays the text "Hello HTML" in large type, while the accompanying JavaScript logs greetings and exports to the browser console. It uses D3’s `select` import and modular exports from custom `something.js` and `thing.js` files, showcasing ES module syntax and dependency chaining. The rendering approach is simple static HTML with a CDN-hosted D3 script.

CCurran Kelleher

72% match

Loading thumbnail…

JS playground

This example demonstrates a minimal JavaScript playground embedded directly in an HTML page, printing “Hello” combined with imported text to the browser console. It shows how D3 v6’s `select` and `scaleLinear` modules are imported, alongside custom local modules that export constants and default values. The page renders large static text (“JS in HTML”) and relies on separate `script.js` and `bundle.js` files, with the latter representing VizHub’s automatic bundling. The code highlights modular ES6 import/export syntax and debug output via `console.log`, with no interactive or data-driven visual elements.

AAndre J Denais

72% match

Loading thumbnail…

JS in HTML

This example shows a minimal setup for using D3 within an HTML page with JavaScript modules. It demonstrates how to import functions from D3 and from a local module, logging both a custom string and the `select` function to the browser console. The code uses D3 v7 via a CDN link, React is referenced only in the README, and the visible behavior is limited to console output with no visualization rendered.

MMatthew Bruffey

71% match