Practic03 | SVG

100%

Practic03 | SVG

✓ Published1🌍 Public

Hhimanshucse2012

Last edited Oct 17, 2021

Created on Oct 17, 2021

This example demonstrates static SVG shapes and primitives, including circles, rectangles, lines, and paths, drawn directly on a 960x500 canvas. It uses D3 v5 only to load the library, while the visualization itself is composed entirely of hand-coded SVG elements with inline styles and CSS classes for grouping and theming. A JavaScript snippet parses a hardcoded JSON array of car data, filters it by price, and formats a text report, though this output is not visibly integrated into the SVG graphic. The page also imports a `bundle.js` file, suggesting additional external code.

AI-generated description

A program that shows the top 10 most populous countries as a pathetic bar chart with no axes.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars Report

This example demonstrates a basic D3 version 6 setup with a static SVG scene containing a green circle, rectangle, and a polyline path, accompanied by a text report that lists cars priced above $2,000. The visualization shows how D3 can structure SVG elements while also illustrating asynchronous data loading. The code uses the native `fetch`-like pattern through a custom `getCars()` promise, which resolves after a two-second delay, and then applies array filtering and mapping to format the car data into readable strings. The SVG rendering is done directly with hardcoded shapes rather than data-driven joins.

Aalbatross97

81% match

Loading thumbnail…

HTML Cars Report

This example demonstrates a static SVG composition of geometric shapes—circles, rectangles, a thick line, and a polyline—arranged in a scaled and translated group. It shows how basic SVG elements can be combined with CSS styling and inline attributes to create a structured visual report. The code loads D3 via UNPKG, uses the `import` statement for both D3's `select` function and a local ES6 module, and renders the shapes directly in a 960x500 SVG canvas. No interactive behavior or data binding is present; the focus is on layout, grouping, and stroke customization.

AAuliaAmirullah15

81% match

Loading thumbnail…

Cars Report

A simple SVG sketch demonstrates basic shape rendering with three hardcoded elements: two circles and one rectangle. The page loads D3 v5 from a CDN and uses an ES6 module import to call the `select` function, though no dynamic data binding or interaction occurs. Static SVG markup defines the shapes directly in `index.html`, with basic CSS styling applied globally. The example serves as a minimal template for importing D3 and local modules in a VizHub project, showing foundational rendering without any data-driven visualization.

Aariefb315

81% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to combine SVG shapes with CSS styling and JavaScript data processing. It draws circles, rectangles, lines, and paths in an SVG canvas, using groups and CSS classes to apply stroke and fill properties. The page also displays a car report generated from hardcoded JSON data, filtered by price and formatted with ES6 template literals. The `getCars.js` file returns a Promise simulating async data loading, though the report uses the static list from the HTML.

AAnunay Biswas

80% match

Loading thumbnail…

ViniD3

This example displays static geometric shapes and imported car data in an SVG scene. It renders circles, rectangles, lines, and paths directly in markup, with some shapes grouped and transformed. The code imports a local `cars` module containing JSON-parsed data, then accesses the first year value to update a message element. D3 is loaded via UNPKG, though this version relies on plain JavaScript DOM methods rather than D3-specific APIs.

Ddaneesh543932

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates how to load and display JavaScript object data as text on an SVG-based web page. It uses asynchronous functions and modules to fetch car information, filter vehicles under a price threshold, and format the results into a readable report. The visualization renders a static SVG scene featuring a rectangle and a circle, while the report text updates below it. The code relies on ES6 module exports, Promises with `setTimeout`, and the `JSON.parse` method to handle the sample dataset.

Mmaakosu2

80% match

Loading thumbnail…

Shapes with SVG and CSS

This example showcases static SVG shapes—circles, rectangles, lines, and paths—stylized with CSS and grouped via SVG transforms. It renders a report of car listings fetched asynchronously from a JSON array using a Promise, filtering by price and formatting with custom JavaScript functions. The visualization uses raw SVG elements with attributes like `fill`, `stroke`, and `stroke-width`, alongside CSS for global styling and highlighting.

MMichelle Mac

80% match

Loading thumbnail…

Cars Report || SVG

This example shows a filtered list of cars priced below $2,000, displayed as plain text in an HTML `<pre>` element. The page renders a static SVG scene containing circles, rectangles, lines, and a path, with CSS styling for colors and fonts. JavaScript uses `Promise`-based data loading, `JSON.parse`, and string formatting to generate the report. The SVG markup demonstrates basic shapes, transforms, and stroke styling.

SSungmi

80% match