Last Time I Swear Before I crush Something

100%

Last Time I Swear Before I crush Something

✓ Published0🌍 Public

Last edited Oct 30, 2019

Created on Oct 30, 2019

This example demonstrates the simplest possible use of ES6 modules and DOM manipulation in VizHub. It imports a string message from one module and displays it as plain text in an HTML `<pre>` element using `document.getElementById` and `textContent`. The page applies a styled dark background and large Ubuntu font via CSS, while the code parses a static JSON snippet from another module but does not render it. No external visualization libraries are used.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates how a static text message can be rendered on a webpage using D3.js and ES6 modules. It shows a single text element, “Hello VizHub!”, displayed prominently on a dark blue background with white Ubuntu font styling. The page loads D3 v5 from a CDN and uses the `d3.select` API to insert the message into a div, while the message content is defined in a separate module and imported via ES6 `import` syntax. The visualization relies on basic DOM manipulation rather than data binding or complex rendering.

Aa-ydobon

78% match

Loading thumbnail…

Hello Hagen

This example displays the text “Hello VizHub!” centered on a dark blue background using a large Ubuntu font. It demonstrates basic ES6 module import/export and DOM manipulation with D3 v5. The code exports a string from `myMessage.js`, imports it in `index.js` via a `cars.js` re-export, and writes it into a `<pre>` element using `document.getElementById` with `textContent`. Styling comes from CSS applied to the body element.

CcloudXia777

78% match

Loading thumbnail…

Hello VizHub

This example displays the text "Hello VizHub!" centered on a dark blue background using the Ubuntu font. It demonstrates basic DOM manipulation with plain JavaScript, retrieving a message from an ES6 module and setting it as the text content of a `<pre>` element via `document.getElementById`. The page loads D3 v5 from a CDN and applies styling through an external stylesheet.

SSaki

78% match

Loading thumbnail…

Hello VizHub

This example displays a large, centered "Hello VizHub!" message in a dark blue scene with Ubuntu typography. It demonstrates basic DOM manipulation and ES6 module imports within the VizHub environment. The code uses D3 v5 to load the library, standard JavaScript to set the text content via a `rep` element, and CSS for styling. The message originates from an exported constant in `myMessage.js`, while `index.js` also defines an unused "Hello World" variable. The visualization relies on static HTML, CSS, and modular JavaScript rather than dynamic data or canvas rendering.

KKarrasYiannnis

78% match

Loading thumbnail…

JS Practice

This example demonstrates a minimal VizHub project that displays a static text message on a styled web page. It shows how to combine D3.js, ES6 modules, and custom CSS within a single visualization. The code uses `d3.select` to target the `#message` div and set its text content to a string imported from a separate module. The page renders “Hello VizHub!” in large Ubuntu font against a dark blue background, with no dynamic data or interaction. The source includes an HTML shell, a JavaScript entry point, and a modular message file.

CConnor Bailey

78% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal text-rendering setup in VizHub, showing how to display a static message with large, styled typography. The page loads D3 v5 from a CDN, imports a custom ES6 module (`myMessage.js`) that exports the string "Hello VizHub!", and writes that string into the DOM using `document.getElementById().textContent`. Styling comes from an external CSS file that sets a dark navy background, light text, and the Ubuntu font from Google Fonts. No data or interactive behavior is involved; the visualization is purely presentational.

Bbobi0017

78% match

Loading thumbnail…

Try

This example demonstrates a minimal setup for loading D3 and local ES6 modules within VizHub. It displays the text "Hello World" in a `<pre>` element by importing a message from a separate `myMessage.js` module. The page uses `import` from `"d3"` via UNPKG and local module syntax, with styling from `styles.css` that centers and enlarges the text. The code targets the element by ID and sets its text content directly.

Eeveryfin-in

78% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to combine ES6 modules with D3.js to render a simple text-based message. The page uses D3’s `select` method to target a div element and set its text content, while a separate module exports a string constant. Styling is applied via CSS with a Google Fonts import and a dark background. The visualization highlights basic module imports, DOM manipulation with D3 v5, and external stylesheet integration.

Sshawchand

78% match