Fork of Shapes with SVG and CSS

100%

Fork of Shapes with SVG and CSS

✓ Published0🌍 Public

Last edited Apr 27, 2022

Created on Apr 27, 2022

This example demonstrates how SVG shapes (a circle and a rectangle) are rendered directly in HTML using CSS for styling, while D3.js is loaded via UNPKG and used with local ES6 modules. The code imports `getCars` from a local module, which returns a promise resolving to an array of car data after a two-second delay, and `generateReport`, which filters cars by price and formats them using `formatCar`. The report is then displayed in a message element, showcasing asynchronous data handling and module imports within a VizHub project.

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…

Shapes with SVG and CSS

This example shows how SVG shapes and CSS styling combine in a VizHub page. It draws a circle and a rectangle directly in the HTML markup, with a gray border around the SVG canvas. The page also demonstrates ES6 module imports, as `getCars` returns a promise that resolves after a delay to feed car data into `generateReport`, which filters by price and formats a text report. The report appears in a separate message element, while the SVG rendering stays static. The code uses native SVG elements and standard JavaScript promises, with no external visualization libraries.

Ppuru001

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

SsunilthkGmail

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

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—styled through CSS classes and inline attributes. It also displays a car report that filters and formats JSON data loaded asynchronously via a Promise from a simulated data source. The visualization uses raw SVG markup in `index.html` with CSS rules for stroke and fill, while JavaScript modules handle data parsing and text generation for the report.

MMarketaInce

84% match

Loading thumbnail…

Shapes with SVG and CSS

This example illustrates a car pricing report asynchronously loaded via a JavaScript Promise. The `getCars` module parses a static JSON array and resolves it after a two-second delay. `index.js` then filters this data by a maximum price using `generateReport`, formats each car with the `formatCar` template, and injects the resulting text into the DOM. The page also contains an SVG circle rendered solely with HTML and CSS, while the report text updates dynamically without any visualization library.

Kkimgarrard

84% match

Loading thumbnail…

Fork of HTML Cars Report and Shapes with SVG jls

This example displays a set of basic SVG shapes—two circles and two rectangles—positioned on a 960×500 canvas. It demonstrates how to define shapes and apply fill colors using SVG attributes. The first circle and rectangle rely on default black fill, while the second pair use explicit red and green hex values. The page is styled with CSS, setting a monospace font and hiding overflow, while the shapes are rendered directly inline in HTML without any JavaScript libraries or data sources.

Jjlspangl

83% match

Loading thumbnail…

Shapes with SVG and CSS

This example demonstrates a simple SVG circle rendered on a page with CSS styling, accompanied by a JavaScript module tutorial. It uses native SVG elements for the circle shape and CSS for layout and typography. The code loads car data from a static JSON array via a Promise (`getCars`), filters and formats it with ES modules (`formatCar`, `generateReport`), and updates the DOM text content asynchronously. The example highlights JavaScript object handling, array methods, and module imports/exports, alongside basic SVG markup.

Mmaakosu2

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

83% match