Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Jan 7, 2021

Created on Jan 7, 2021

This example demonstrates a hand-coded collection of SVG shapes, including circles, rectangles, lines, and paths, arranged in groups with transforms and styling. It shows both static elements and a grouping of shapes with explicit fill and stroke attributes, as well as a second group using a CSS class to apply stroke styling. The code uses plain SVG within an HTML document, applying D3 only via the page title and structure; actual visualization is achieved through direct SVG markup and CSS, with no JavaScript-driven data binding or D3 API calls in the visible source.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub

This fork of the Hello VizHub example combines static SVG shapes and paths to create a playful geometric composition. It renders a red rectangle with a thick black stroke that transitions to green on hover, alongside a series of cubic Bézier curves forming abstract patterns and a yellow filled path. The code imports D3’s `select` API from `d3` v5 to set text content from a local ES6 module, while styling is handled through embedded CSS and an external stylesheet. No external data is used; the visualization relies entirely on hardcoded SVG markup.

JJeppeOEM

86% match

Loading thumbnail…

Fork of Hello VizHub

This example displays a simple SVG path rendered as a blue-filled, red-stroked shape, repositioned with a CSS transform. It demonstrates VizHub’s core workflow: loading D3 v5 via UNPKG, using the `select` function from D3 to set text content, and importing a local ES6 module for a greeting message. The SVG markup is static, with styling applied through an external stylesheet.

PPiotr Paszek

85% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a polyline path—styled through both inline attributes and an external CSS stylesheet. It shows how fill colors, stroke widths, transparency, and geometric transforms like scaling and translation apply to grouped elements. The visualization uses raw SVG markup within an HTML document, with CSS classes controlling line styles and joint/endpoint rounding. No JavaScript libraries are involved; the rendering relies entirely on the browser's native SVG support and CSS styling rules.

Ii211775

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

85% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and CSS styling within an HTML page. The visualization displays circles, rectangles, lines, and a path, with groups using inline attributes for fill and stroke colors, while CSS classes apply stroke properties to line elements. The SVG is scaled using a transform, and the code references D3.js through an import but primarily relies on standard SVG and CSS for rendering. The accompanying JavaScript, though incomplete, attempts to create SVG elements dynamically using the Document API.

Ccsantiagopaz

85% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates a collection of basic SVG shapes—circles, rectangles, lines, and a path—arranged in a grid and styled with both inline attributes and CSS classes. The visualization uses raw SVG markup within an HTML file, applying transforms for scaling and translation, while the stylesheet controls stroke properties, line joins, and caps. It showcases how SVG elements can be combined with CSS to create a static, decorative composition.

Bbakar294

85% match

Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example showcases basic SVG shapes, including circles, rectangles, lines, and paths, styled with CSS and inline attributes. It demonstrates grouping and transformation using the `transform` attribute, such as `scale` and `translate`, while applying fills, strokes, and stroke widths. The SVG is embedded directly in an HTML file, with external CSS controlling stroke properties for line elements. The rendering approach uses static SVG code, and the visual output is presented without any external data sources or JavaScript libraries.

Ppei9223

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

84% match