folbrich001

@folbrich001·4 public vizzes

Smiley Face

A static yellow smiley face rendered as SVG, drawn with three black-filled circles for eyes and a large yellow circle for the head, outlined with a black stroke. The example uses React 16.13.1, loaded via UMD, and relies solely on SVG primitives (circle) and inline CSS. No interactions or animations are present; fixed coordinate attributes position the elements on a 960×500 canvas.

Apr 23, 2020

Loading thumbnail…

HTML Cars Report

This example presents a simple HTML cars report as a plain-text list of three vehicles with model years, names, and prices. It uses a basic HTML unordered list and CSS from `styles.css` to apply a large monospace font to the body. The data is hardcoded directly in the markup rather than loaded from an external source, and no JavaScript libraries or frameworks are employed—only static HTML and CSS render the report. React is mentioned in the metadata but not used in the displayed code, which relies solely on native browser APIs for styling and layout.

Apr 22, 2020

Loading thumbnail…

Cars Report

This example displays a filtered list of used cars, showing each vehicle’s year, make, model, and price as plain text. The report is generated by filtering car data below a price threshold and formatting each entry with a template literal. It uses a React starter structure with vanilla JavaScript, JSON parsing for the car dataset, and functions like `generateReport`, `formatCar`, and `Array.filter`/`map`/`join` to produce the output. The result is rendered into a pre-formatted element via the Document Object Model.

Apr 22, 2020

Loading thumbnail…

Cars Report

The Cars Report example displays a short list of automobiles, showing each vehicle’s year, make, model, and price, but filters the data to display only cars priced under $2,300. The code loads an inline JSON array via `JSON.parse`, then uses `Array.prototype.filter` and `map` to transform the entries into formatted text strings. The final list is joined with newlines and rendered into a DOM element using `document.getElementById().textContent`. The visualization is purely text-based, with no charting or drawing libraries, relying solely on React’s starter structure and the provided `cars.js` data source.

Apr 22, 2020