Skip to main content
SimilarExport ZIP
100%

HTML practice

✓ Published2🌍 Public
VVivek H
Last edited Nov 18, 2019
Created on Nov 18, 2019
Forked from Shapes with SVG

This example demonstrates a simple HTML page with bullet points and multilingual greetings, alongside a dynamic message injected via D3.js. The page displays a highlighted list item in red and renders the text “Hello VizHub!” in a dedicated div. The code imports the `select` function from D3 and an ES6 module `myMessage.js` to set the message content, while `styles.css` applies global typography and color styling. It shows foundational DOM manipulation and module usage without any data or visualization logic.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

HTML practice

This example demonstrates a simple HTML page with a styled bullet-point list and a greeting message. The page includes a heading, an unordered list with three greetings, and a highlighted item styled in red via CSS. Using D3.js v3, the code selects a div element with the ID `message` and sets its text content to a string exported from an ES6 module. The body text uses the Source Sans Pro font, and the example highlights basic DOM manipulation with D3’s `select` method.

VVivek H
91% match
Loading thumbnail…

Hello VizHub

A minimal "Hello VizHub" example displays a large, centered greeting message in bold Ubuntu type on a deep blue background. The page uses D3 v5’s `select` function to set the text content of a `div` with the ID `message`. The message string is imported as an ES6 module from `myMessage.js`, demonstrating modular code organization. Styling comes from a linked CSS file that sets typography and color, while `index.html` loads D3 from a CDN.

MMarc
83% match
Loading thumbnail…

Hello VizHub

This example demonstrates the fundamental capability of VizHub: rendering a personalized message directly in the browser. It displays the text "Hello!" prominently against a dark blue background with large, centered Ubuntu typography. The code imports the D3.js `select` function to target a specific HTML element and set its content. It also showcases ES6 module usage by importing the message string from a separate `myMessage.js` file, illustrating how VizHub projects can organize code into reusable components.

Llaughinging
82% match
Loading thumbnail…

Hello VizHub

This example demonstrates the fundamental use of D3.js to display a simple text message on a webpage. It shows how a div element’s content is dynamically set using `select('#message')` and the `.text()` method. The code imports the `select` function from D3 v5 and defines a reusable ES6 module for the message string. Styling relies on an external Google Fonts stylesheet, while the page structure is defined in a minimal HTML file with a linked JavaScript bundle.

AAmirHossein Roozbahany
82% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal interactive web page that displays the text “Hello VizHub!” in a large, styled font. The visualization uses D3.js v5, specifically the `select` method, to target an HTML `div` element and set its content with the text message. A local ES6 module, `myMessage.js`, exports the greeting string, which is imported and used by the main `index.js` script. The page is styled with an external CSS file, emphasizing a dark navy background, white text, and the Ubuntu font family.

Nnyan90
82% match
Loading thumbnail…

Hello

This example demonstrates a minimalist Web page that displays the text “Hello VizHub!” prominently in a large, light-colored Ubuntu font against a dark navy background. The text is rendered inside a single `div` element, with its content set dynamically using D3.js’s `select().text()` method. The page imports D3 v5 from a CDN and uses an ES6 module (`myMessage.js`) to supply the greeting string. It also pulls in custom CSS rules from `styles.css` for layout and typography, offering a clean, straightforward introduction to combining D3, modules, and styling in VizHub.

RRoman Strakhov
82% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message within a web page using D3.js. It shows a static greeting rendered in large, styled typography against a dark blue background. The code imports the `select` function from the D3 library and applies the message text to a `<div>` element using `select('#message').text()`. The project also illustrates ES6 module usage, importing a string from a separate local file, along with CSS styling via Google Fonts.

Ggrandbleu916
82% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to display a simple text message within a web page using D3.js and ES6 modules. It renders the phrase “Hello VizHub!” in large, centered Ubuntu font against a dark blue background, showing the integration of HTML, CSS, and JavaScript. The code imports the `select` function from D3.js and a custom message from a local module, then sets the text content of a `div` element. The styling is defined in an external stylesheet, and the visualization is built for the VizHub platform.

GGloal
81% match