ES6 Import Maps

100%

ES6 Import Maps

✓ Published0🌍 Public

Last edited Oct 26, 2021

Created on Oct 26, 2021

This example demonstrates how a web page can display large text entirely through an ES module import map, rendering the phrase "Import Maps" in the browser. Using a vanilla HTML structure, it defines an import map that aliases the package name `d3-selection` to a remote URL, then imports the `select` function from that package. The code applies the selection to the body element and sets its text content, showcasing the ability to use external libraries without a module bundler or build step.

AI-generated description

An example of import maps.

This is exciting because it allows us to write ES modules that import from packages using only vanilla HTML, no module bundler.

MIT Licensed

Similar vizzes

Loading thumbnail…

Importing D3 Function Using ES6

A red SVG canvas demonstrates ES6 module imports in D3 v6, loading the library from UNPKG and styling the backdrop with `d3.select` and `style`. The example highlights how to use `import` statements for D3 functions while rendering a fixed 960×500 viewport, with `index.html` linking the script and bundled JavaScript.

Gguinessjulie

73% match

Loading thumbnail…

JS in HTML

This example demonstrates that D3 v7 functions can be used directly within an HTML page, where the body displays the static text "Hello HTML". The page imports D3 from a CDN and logs the `select` function to the console, while separate ES modules (`index.js`, `something.js`, `thing.js`) chain together to form and log the string "Hello A Planet Earth." The visualization highlights modular JavaScript composition and D3’s importability in a plain HTML context.

LLouis Astorg

70% match

Loading thumbnail…

JS in HTML

This example demonstrates how JavaScript can be imported and executed within an HTML document, with D3.js loaded via a CDN. The HTML file includes an empty body and a stylesheet, while the JavaScript imports `select` from D3 and logs it to the console, alongside a separate `script.js` that logs 'Hello'. A custom module `something.js` exports a string, showing ES module imports in action. The example highlights module structure and console output rather than visual rendering, using `d3.select` implicitly for demonstration.

JJavan Friedel

69% match

Loading thumbnail…

Activity 67

A simple D3 example demonstrates how to load external libraries and local ES6 modules within a basic HTML page. It uses `import { select } from 'd3'` to select the `#message` div and sets its text content to a string imported from a separate `myMessage.js` module. The page loads D3 v5 from a CDN and renders the message "Hello VizHub!" in large, centered text, showcasing modular code organization and D3's selection API.

AArun Pratap

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

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

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

69% match

Loading thumbnail…

Untitled

This example demonstrates how to load D3 via UNPKG and use ES6 module imports with Vue. The page renders an SVG element containing an embedded JPEG image, while the JavaScript uses `select` from D3 to set the text content of an HTML element with a message imported from a local module. The code also includes CSS styling for the message, showing integration between D3, custom modules, and Vue framework.

LLakshmanRangisetti

69% match