JS in HTML

100%

✓ Published2🌍 Public

Last edited Apr 29, 2021

Created on Apr 29, 2021

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`.

AI-generated description

some notes from Get it Right in Black and White Episode 6

MIT Licensed

Similar vizzes

Loading thumbnail…

JS in HTML

This example demonstrates how D3 v7 can be embedded directly within an HTML page alongside modular JavaScript imports to create a simple text-based visualization. The page displays the static string “Hello HTML!” centered on a blank canvas, while the accompanying script logs output to the browser console using `console.log`. The code imports D3’s `select` function, along with custom modules, illustrating a modular structure where constants like `thing` and `something` are composed across files. The visualization itself is minimal, focusing on the integration of D3’s selection API within a standard HTML document.

Rroyable88

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

90% match

Loading thumbnail…

JS in HTML

This example showcases a minimal D3 v7 setup where JavaScript and HTML interact directly. It displays a large, centered "Hello HTML!!" message styled via CSS, while the accompanying `index.js` module logs both an imported string from `something.js` and the D3 library object to the browser console. The page loads D3 from a CDN, and the code demonstrates basic module imports and console output rather than data visualization.

EEdgar Cortez

89% match

Loading thumbnail…

JS in HTML

This example demonstrates a basic HTML page that loads D3.js and executes a simple JavaScript logging sequence. It shows how D3 can be integrated directly into an HTML file alongside custom modules, with the page displaying the text "Hello HTML!" styled at a large font size. The code imports D3 v7 from a CDN and uses ES module imports (`something.js`, `thing.js`) to log a concatenated message to the console. The visualization relies on standard DOM manipulation and console output rather than D3-specific rendering methods.

Aajoua

89% match

Loading thumbnail…

JS in HTML

This example shows how to embed JavaScript directly in an HTML page alongside D3.js. It displays a large "Hello HTML!" message styled with CSS, while the bundled script.js and index.js modules log output to the console. The code imports named exports from something.js and other.js using ES module syntax, and loads D3 v7 from a CDN via a script tag. No data visualization is present; it demonstrates basic file structure and module wiring for a D3 starter project.

Nnim@brejnholt.dk

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

88% match

Loading thumbnail…

JS in HTML

This example shows a minimal HTML page that combines plain text with the D3.js library, serving as a bare-bones starting point for web-based visualizations. The page renders the text “Hello HTML!” using CSS for styling with a large font size and center alignment. The HTML file loads D3 v7 via a CDN script tag, while a separate JavaScript file imports a named export from another module and logs both that imported value and the D3 object to the console. This illustrates basic module import and script loading patterns without any data or visual rendering.

Kkathrynrbernard

88% match

Loading thumbnail…

JS in HTML

This example shows a minimal HTML page that displays a large “Hello HTML!” message centered on the screen. It demonstrates the basic structure of combining HTML, CSS, and JavaScript in a single file, with the styling applied through a CSS class. The page loads D3 v7 from a CDN and includes a separate JavaScript module that imports a value from another file and logs it, along with the D3 `select` function, to the console. The visualization itself is static text, not a chart.

Mmegan-grannan

88% match