Skip to main content
SimilarExport ZIP
100%

Shapes with SVG & CSS

✓ Published2🌍 Public
Ddielaenge
Last edited Sep 2, 2018
Created on Sep 2, 2018
Forked from Cars Report

A data report generated from a JavaScript array displays luxury car details—year, make, model, and price—filtered by a price threshold and formatted with commas and currency symbols. The example demonstrates ES6 modules and JSON parsing, using `cars.js` to define the dataset and `generateReport.js` to filter and map entries via `formatCar`. The final text output appears in the browser, styled with CSS.

AI-generated description

Davids code along Curan Kehellers example tutorial of how to use JavaScript objects, arrays and modules.

MIT Licensed

Similar vizzes

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
88% 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
88% match
Loading thumbnail…

Shapes with SVG and CSS

This example shows how to build a simple HTML car report using SVG-free CSS styling and JavaScript modules. It renders a list of car entries, highlighting one with a red color class, while the JavaScript imports functions from separate modules to generate a report message. The code uses vanilla DOM APIs like `document.getElementById` and `textContent` to update the page, with CSS defining a monospace font and red emphasis. No visualization library or data source is demonstrated beyond the static HTML list and commented-out module imports.

Sssd4
88% 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
86% 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
86% 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
85% 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
84% match
Loading thumbnail…

Shapes with SVG and CSS

This example displays a simple car report using SVG-ready HTML markup, listing three vehicles with their model years and prices. The page highlights the 2012 Nissan Leaf in red text, while the other entries remain in the default monospace font. The implementation relies on plain HTML list elements (`<ul>` and `<li>`) and CSS styling from an external `styles.css` file. No JavaScript or data visualization libraries are used; instead, the example demonstrates how static CSS classes can add visual emphasis to structured data without any dynamic rendering.

Hhberrong
84% match