SVG Example

100%

✓ Published0🌍 Public

Last edited Aug 7, 2019

Created on Aug 6, 2019

This example displays a single pink diamond shape drawn on an SVG canvas, demonstrating basic vector graphics rendering within a VizHub project. The shape is defined by an SVG `<path>` element with explicit coordinate points, while the page layout and text styling are handled through CSS. The code imports D3.js utilities and a local ES6 module to inject a "Hello VizHub!" message, showcasing how D3’s `select` function interacts with HTML elements. The visualization relies solely on static SVG markup rather than dynamic data or interactive features.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

84% match

Loading thumbnail…

Shapes with SVG & CSS

This example demonstrates how to create SVG shapes using CSS styling within a VizHub project. It shows a single large circle rendered on an SVG canvas with a 960-pixel width, generated from an HTML template. The code uses ES6 modules to export a message string from `myMessage.js`, which is imported into the main `index.js` file. The visualization relies on basic SVG elements and JavaScript module syntax to structure the example, with the circle positioned at a 400-pixel radius.

Ddielaenge

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

83% match

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

82% match

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, lines, and paths, rendered on a 1000x1000 canvas. The visualization uses static, hard-coded coordinates and attributes to show basic vector graphics primitives with varied fills, strokes, and sizes. The code relies on SVG markup within the HTML structure, while the accompanying JavaScript imports D3’s `select` function to update a message element. It also showcases local ES6 module imports, highlighting how VizHub integrates D3 via UNPKG with modular code.

TTobi Olabode

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

82% match

Loading thumbnail…

Shapes with SVG new

A minimal SVG shapes example renders a single circle element inside an SVG container sized 960 by 500 pixels. The page imports D3.js’s `select` function and a local ES6 module exporting a "Hello VizHub!" message, though the circle remains static without any data binding or interaction. The rendering relies entirely on raw SVG markup in the HTML, with no JavaScript-driven updates to the shape’s attributes. The example demonstrates basic SVG structure and ES6 module usage within a VizHub project.

Mmirna981

82% match

Loading thumbnail…

Creating SVG

This example demonstrates how to create and manipulate SVG shapes directly in HTML while also integrating D3.js for DOM selection and updates. It includes a static red circle rendered inside an SVG element and uses D3's `select` function to target the `#message` div, though the text-setting functionality is currently commented out. The code loads D3 v5 from UNPKG and shows basic project structure with local ES6 modules, CSS styling, and a bundled script, highlighting the foundational workflow for building interactive visualizations in VizHub.

WWilliam Ofosu Agyapong

82% match