Hello VizHub

100%

✓ Published0🌍 Public

Last edited Sep 15, 2019

Created on Sep 14, 2019

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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

A static SVG scene demonstrates basic shapes and styling with D3 v5. The visualization renders circles, rectangles, lines, and a path inside a scaled group, using CSS classes to apply stroke properties. The HTML file includes D3 from a CDN, while separate JavaScript modules export a text message and select a DOM element to display it. The example highlights fundamental SVG rendering and ES6 module integration through D3’s select function.

Oowenizedd

90% match

Loading thumbnail…

Hello VizHub

This example renders a static SVG canvas containing basic geometric shapes—a red circle with a blue outline and a red square with an orange outline—alongside a grouped set of shapes transformed via the SVG `translate` attribute. The code uses D3.js v5, loaded from a CDN, and demonstrates direct SVG element construction within an HTML file. Styling is handled through an external CSS file that imports the Ubuntu font and sets a dark background. The visualization does not rely on data binding or interactive features, focusing instead on primitive shape composition and graphical styling.

Aasimplesinger

87% match

Loading thumbnail…

vizhub

This example demonstrates the fundamental building blocks of SVG graphics and D3.js integration within the VizHub environment. It displays basic geometric shapes—circles, rectangles, and a line—positioned on a 960×500 canvas, with some shapes colored explicitly and others inheriting styles from parent groups via the `transform` attribute. The code imports D3’s `select` function from the D3 v5 library loaded via UNPKG, alongside a local ES6 module, `myMessage.js`, which provides a greeting string. A separate script uses `select` to set the text of a `#message` div element, showing how D3 can manipulate DOM content beyond SVG. The rendering is done entirely through inline SVG markup in `index.html`, with styles defined in `styles.css`.

PPhilipe Allan Almeida

87% match

Loading thumbnail…

Hello VizHub

This example displays a simple green circle drawn with D3 v5, positioned on a blank SVG canvas. It demonstrates basic SVG shape creation using `d3.select` and `append`, along with setting circle attributes like `r`, `cx`, and `cy`. The code imports a message from an ES6 module and renders the visualization without any data or interaction. Styling is handled through an external stylesheet that sets the page font to Ubuntu and removes default margins.

Ttshrsrvstv

87% match

Loading thumbnail…

Fork of Hello VizHub

This example shows static SVG shapes—a red circle and a green rectangle—positioned on a black background, demonstrating basic D3 selection and styling via `d3.select`. The page loads D3 v5 from UNPKG and uses a local ES6 module (`myMessage.js`) to export a message, though the message is not rendered in the visible output. The SVG is defined directly in `index.html`, while `index.js` applies the background color through a D3 selection. The code illustrates VizHub’s support for CDN imports, local modules, and inline SVG markup.

AAyush Morankar

87% match

Loading thumbnail…

Hello VizHub

This example demonstrates static SVG shapes composed from circles and a rectangle, rendered within a 960-by-500 viewport. It highlights how SVG elements can be grouped and repositioned using the `transform` attribute, with the lower group translated and filled blue. The code imports D3 v5 for basic utility access, though no data binding or dynamic behavior occurs. An ES6 module exports a greeting message, while external styling via Google Fonts and hidden overflow completes the minimal setup.

Rrafiurrafi

86% match

Loading thumbnail…

Hello VizHub

This example demonstrates a minimal SVG composition: a single thick black line crossing a pink path shape, both rendered against a dark navy background with large, centered text. The page is styled using an external Ubuntu font and a CSS ruleset that sets the color scheme. The static graphic is drawn directly in the index.html markup, while the accompanying JavaScript imports the D3 `select` API to set the text of a message div to "Hello VizHub!", a value defined in a local ES6 module.

Llori99-data

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

86% match