avglim3

@avglim3·3 public vizzes

Shapes with SVG and CSS

This example demonstrates the basic drawing of primitive SVG shapes—circles, rectangles, lines, and paths—arranged in a fixed layout on a 960×500 canvas. It shows how SVG styling is applied in several ways: directly with inline `fill` and `stroke` attributes, through inherited properties on a `<g>` group, and via CSS rules defined in an external `styles.css` file. The React-based code uses raw SVG elements within an HTML page, leveraging group transforms for scaling and translation.

Jul 20, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple, static HTML page titled “Cars Report” that lists three used vehicles with their prices, highlighting the first entry in green. It uses plain HTML elements like an unordered list and a heading, with CSS styling applied through a linked stylesheet. The code demonstrates basic document structure and class-based styling rather than any JavaScript or data visualization library.

Jul 20, 2020

Loading thumbnail…

Cars Report

This example demonstrates a text-based car report generated from a JSON array of five used vehicles, filtering by price and formatting each entry as a readable line. It illustrates asynchronous data handling with a `Promise` and `setTimeout` in `getCars.js`, while `generateReport.js` chains `filter`, `map`, and `join` to produce the final output. The page uses a `<pre>` element in `index.html` to display the result, with JavaScript modules (`import`/`export`) orchestrating the logic. The report updates after a simulated two-second delay, showing only cars priced under $2,000.

Jul 20, 2020