Skip to main content
SimilarExport ZIP
100%

SVG Technology

✓ Published0🌍 Public
Aamala1004
Last edited Jul 5, 2019
Created on Jul 5, 2019
Forked from Hello VizHub

This example demonstrates a minimal SVG rendering of a single large circle on a dark background, accompanied by a text message. It shows how VizHub combines static SVG markup with dynamic D3.js functionality, where the `select` function updates the displayed message. The page relies on an ES6 module export for the text content and a CSS file that imports the Ubuntu font. The SVG circle is defined directly in the HTML, while the JavaScript adds interactivity by modifying the DOM.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example shows a minimal SVG canvas with a single gray circle positioned at coordinates (100, 100) and a radius of 100, alongside a text string exported from a separate ES6 module. The visualization uses the D3.js v5 library’s `select` and `append` methods to create the circle, while the message variable is defined but never rendered. The HTML page loads D3 from a CDN, applies a global Ubuntu font via CSS, and runs the bundled JavaScript.

Ttshrsrvstv
84% match
Loading thumbnail…

Hello VizHub!

A minimal example introduces the VizHub environment with a static SVG circle on a dark background. It demonstrates an ES6 module exporting a text message, which D3.js selects and applies to a page element using the `select` function. The SVG markup is hand-authored in the HTML file, and the styling uses external Google Fonts. This example showcases basic project structure and integration of D3 v5 with custom JavaScript modules for simple visualization output.

KKexin Yu
84% match
Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG rendering by drawing a single circle element with specified coordinates and radius. It shows how VizHub supports modern JavaScript workflows, including importing D3’s `select` function via UNPKG and loading local ES6 modules. The code uses `select` from D3 to set the text content of a message div, sourcing the string from a separate `myMessage.js` module. The visualization is rendered as inline SVG within the HTML, with styling applied through an external CSS file.

GGonzaloGV
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates a simple D3.js visualization that displays a purple circle in an SVG container alongside a text message. The code imports the `select` function from D3 v5 and uses it to update the message div with a string from a local ES6 module. The SVG renders a circle with fixed coordinates and radius, while CSS styles the page with a dark background and Ubuntu font. It serves as a minimal template for combining D3 selections, SVG shapes, and modular JavaScript.

Qquiz7
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates basic SVG shape rendering and styling within a static HTML page, using D3.js as the sole imported library but leveraging standard SVG elements for the visualization. It shows circles, rectangles, lines, and a path, with groups applying stroke and fill properties to coordinate multiple shapes. The code imports a message from a local ES6 module, `myMessage.js`, and uses `d3.select` to update the page text. The `styles.css` file imports the Ubuntu font and defines classes for line and path styling, while the SVG is rendered client-side with no external data source.

KKhalid
84% match
Loading thumbnail…

SVG Technology

This example demonstrates a small collection of basic SVG shapes—circles, rectangles, a line, and a path—rendered directly in an HTML page using inline SVG markup. The combination of individual elements and transformed groups shows how simple geometric primitives can be positioned and styled. The code uses raw SVG elements with attributes like `fill`, `stroke`, `stroke-width`, and a `transform` translation, while also importing D3.js’s `select()` function to set the text of a message div. The page’s styling is defined in a linked CSS file.

Aamala1004
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates basic D3.js and ES6 module usage in VizHub. It displays a large, centered greeting message and a static SVG circle on a dark blue background. The code uses `select` from D3 v5 to set the div’s text content, and imports a custom `message` from an ES6 module. The SVG renders a single circle without interaction, while CSS styling drives the visual layout and font.

Yyaohaobin
82% match
Loading thumbnail…

SVG fundamental

This example shows a minimal SVG rendering of a single circle alongside an HTML text message. The circle uses the SVG `<circle>` element with explicit `cx`, `cy`, and `r` attributes, while a styled `<div>` with a CSS class displays large “Hello HTML” text. The page relies on plain HTML markup and CSS for layout and styling, with no JavaScript libraries or data sources involved. It demonstrates the fundamental distinction between SVG shapes and HTML content within a single document structure.

EEjenavi16
82% match