tomaskrupa

@tomaskrupa·7 public vizzes

HTML Cars Report

This example presents a static, three-item list of used cars with model years, names, and prices. It shows the entries in a monospaced, large-font layout with the first car, a 2012 Nissan Leaf, highlighted in red. The page is built with a plain HTML file that links to a separate stylesheet. The styled presentation is achieved using a CSS class named `.highlighted` within the `styles.css` file, which sets the color property, while the body-level typography is defined via the `font-size` and `font-family` rules. No JavaScript or external data source is used.

Jul 19, 2020

Loading thumbnail…

HTML Cars Report

This example displays a simple HTML list of used cars with their model years and prices, presenting the data as static text and bullet points. The page relies on plain HTML for content structure, while an external CSS stylesheet (`styles.css`) resets the body font size to 2em and defines styling for `.lines` and `.lines path` elements, though no such elements appear in the markup. The visualization does not use any JavaScript libraries, SVG, or canvas APIs; it is purely a static report rendered by the browser’s default HTML and CSS engine, with no interactive or procedural graphics.

Jul 19, 2020

Loading thumbnail…

Let's Make a Face Part I

A first step toward a smiley face, this SVG drawing shows a yellow circle with a black outline, flanked by two smaller empty circles for eyes. The code positions these shapes using absolute coordinates within an `svg` element sized 960 by 500. Each circle is defined with the SVG `circle` tag, setting `cx`, `cy`, `r`, and fill and stroke properties directly in the markup. The work uses no JavaScript or external libraries, relying purely on static SVG markup for rendering.

Jul 19, 2020

Loading thumbnail…

Cars Report

This example shows a filtered list of cars priced under $2000, formatted as plain text lines like "2012 Nissan Leaf: $1800". It renders the report into a `<pre>` element with large font size. The code uses React as the framework, parses inline JSON car data with `JSON.parse`, and applies array methods `filter`, `map`, and `join` to build the report string. The final message is set via `document.getElementById().textContent`.

Jul 19, 2020

Loading thumbnail…

Cars Report

This example displays a text-based report of cars priced under $2,000 from a small embedded JSON dataset. It shows each filtered vehicle as a formatted line containing its year, make, model, and price. The code uses the native JavaScript `JSON.parse` to read the data, then applies `Array.filter` and `Array.map` to process the records, and assigns the resulting string to a DOM element’s `textContent` property within a React starter project.

Jul 19, 2020

Loading thumbnail…

Cars Report

This visualization shows a text-only report of cars filtered by price, displaying each matching vehicle on its own line. It renders a static list of five car entries from embedded JSON data, showing only those priced under $2,000 (the Nissan Leaf, Ford F150, and Chevrolet Trailblazer) formatted as “year make model: $price”. The React-based example uses `JSON.parse` to load the data, JavaScript array methods `filter` and `map` for processing, and accesses the DOM via `document.getElementById` to set the text content of a preformatted `<pre>` element.

Jul 19, 2020

Loading thumbnail…

Cars Report

This example shows a JavaScript tutorial that filters a list of cars and formats them into a text report. The code parses a hardcoded JSON array using `JSON.parse`, applies `.filter()` to select cars priced under $2000, and uses `.map()` with a `formatCar` function to format each car’s year, make, model, and price. The resulting report is rendered as plain text into an HTML `<pre>` element via `document.getElementById('msg').textContent`. It demonstrates basic array methods, object destructuring, and template literals without external libraries.

Jul 19, 2020