queentrudi

@queentrudi·8 public vizzes

Cars Report

This example displays a list of used cars filtered by price, showing each vehicle as a formatted line of text including the year, make, model, and price in dollars. It uses a hard-coded JSON array of five car objects as the data source, with a `generateReport` function that filters entries below a price threshold and maps them through a `formatCar` module. The report is rendered into an HTML `<pre>` element using the DOM API, with an asynchronous `getCars` promise simulating a delay, and styled via a Google Fonts stylesheet. The visualization relies on plain JavaScript ES6 modules and string template literals, with no external charting library.

Mar 26, 2019

Loading thumbnail…

Cars Report

This example demonstrates a text-based report of car listings, filtering vehicles by price and formatting each entry as a readable line combining year, make, model, and price. It uses JavaScript ES6 modules with `JSON.parse` to load the car data, a custom `formatCar` function for string interpolation, and array methods `.filter()` and `.map()` within `generateReport` to produce the output. The rendered result appears in a styled `<pre>` element with large monospace text on a dark background, with layout handled by plain HTML and CSS.

Mar 26, 2019

Loading thumbnail…

Cars Report

This example displays a simple text report of cars under a specified price threshold. It uses vanilla JavaScript with ES6 modules to filter a hardcoded JSON dataset of five cars, format each entry with the `formatCar` function, and render the output as plain text in an HTML `<pre>` element. The report is generated by `generateReport`, which filters cars and joins formatted strings with newlines. The styling uses an external Ubuntu font and a dark background.

Mar 26, 2019

Loading thumbnail…

Cars Report

This example displays a plain-text report of cars priced under $2,000, formatted as a multi-line list using the browser’s `<pre>` element. It demonstrates ES6 module imports, array filtering with `.filter()`, and mapping with `.map()` to transform each car object into a readable string via `formatCar`. The data is embedded as JSON within `cars.js` and parsed with `JSON.parse`, while the final message is set through the DOM API `document.getElementById().textContent`. Styling uses a custom Ubuntu font and dark background via CSS.

Mar 26, 2019

Loading thumbnail…

Cars Report

A text-based report displays a filtered list of cars, showing each vehicle’s year, make, model, and price in a large monospaced layout. The example uses a `generateReport` function that filters an imported JSON array by a maximum price threshold and formats matching entries with `formatCar`. The resulting message is rendered into a `<pre>` element via `document.getElementById().textContent`. The code relies on ES6 modules (`import`/`export`) and a bundled `bundle.js` for browser execution.

Mar 26, 2019

Loading thumbnail…

Cars Report

This example shows a list of used cars with their year, make, model, and price, displaying only the first car’s details on the page. It demonstrates filtering and formatting car data with JavaScript array methods like `filter` and `map`, then rendering the result via `document.getElementById().textContent`. The code uses ES6 modules, template literals, and exports data from a `cars.js` file. Styling is applied through CSS with a Google Fonts import, while `index.html` provides a minimal container for the output.

Mar 26, 2019

Loading thumbnail…

Cars Report

This example displays a large, centered “Hello VizHub!” message on a dark background using the Ubuntu font. It demonstrates a basic DOM update by selecting an element with `select` and setting its text content, while also showing an ES6 module export. The visualization relies on standard JavaScript and CSS, with no external data source or rendering library beyond the included stylesheet.

Mar 26, 2019

Loading thumbnail…

Cars Report

Mar 26, 2019