Skip to main content
SimilarExport ZIP
100%

JS playground

✓ Published0🌍 Public
AAndre J Denais
Last edited Jun 4, 2021
Created on Jun 3, 2021
Forked from JS in HTML

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.

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 a minimal HTML page that loads D3 v7 and logs its core APIs to the browser console while displaying a simple text message. It imports modules like `select` from D3 and a custom constant from `something.js`, then outputs the imported values alongside D3’s `scaleLinear` function. The page uses a plain `<style>` rule for large text formatting and pulls D3 from an unpkg CDN link in the HTML head. No data visualization is rendered; the focus is on verifying module imports and D3 availability in a self-contained starter.

Wwspwll@gmail.com
84% 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
83% 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
83% 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
83% match
Loading thumbnail…

JS in HTML_Redone

This example demonstrates the contrast between static HTML content and dynamic JavaScript data visualization within a single webpage. It displays a large "Hello HTML!" message while using D3 v7’s `select` function in the console, importing and concatenating strings from separate modules to log a composed message. The code relies on ES6 module imports, including a default and named export, and bundles them via `bundle.js` alongside the D3 library loaded from a CDN. No interactive or visual D3 elements are rendered; the visualization is purely textual and console-based.

Ppawelsapiecha
82% match
Loading thumbnail…

JS in HTML

This example demonstrates embedding D3.js directly within an HTML page, displaying a large “Hello HTML!” message styled with CSS. The code imports `select` from D3 and ES6 modules from separate JavaScript files, logging composed strings and the imported function to the console. It uses D3 v6 loaded via a CDN, alongside a bundled local script, showing how to structure small multi-file projects with modular imports and exports. The visualization itself is static, focusing on setup and module wiring rather than interactive data rendering.

Kkhaledakanan@gmail.com
82% match
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
82% match
Loading thumbnail…

JS in HTML

This example demonstrates a minimal setup for combining D3.js with modular JavaScript in an HTML page. It shows a static “Hello HMTL” message styled with large centered text, while the console logs a greeting built from imported modules and the D3 library itself. The code uses d3.v7 loaded via CDN, along with ES module imports (`import { selection } from "d3"`, `import { something } from "./something.js"`) to chain exports from separate files. The rendering approach is plain HTML and CSS, with no data or interactive visualization involved.

Ttverdone
82% match