dvherrera

@dvherrera·4 public vizzes

Cars Report 2

This example displays a static text report titled “Cars Report 2” using D3 v5 and ES6 modules. It loads a hardcoded JSON array of car objects with make, model, year, and price via `carsPepe.js`, parses it, and logs it to the console. The page renders the string “pepe” in a large `<pre>` element using `document.getElementById`, while a separate module exports a message but remains unused. The presentation relies on plain HTML and CSS styling, with no interactive or data-driven visualization.

Oct 31, 2019

Loading thumbnail…

Cars Report2

This example demonstrates a simple report generator for car listings. It shows a text-based output of cars priced under $2,000, formatted as a list of year, make, model, and price. The code uses asynchronous data loading via a Promise-based `getCars` function to simulate a fetch. After loading, it filters and formats the data using `generateReport` and `formatCar` modules. The rendered output appears in a pre-formatted HTML element, presenting a concise data summary.

Oct 31, 2019

Loading thumbnail…

Hello VizHub

This example displays a single message, "Hello VizHub!", centered on a dark blue background using the Ubuntu font. It demonstrates the basic structure of a VizHub project, including an HTML entry point, a bundled JavaScript module, and a separate stylesheet. The visualization uses D3.js version 5’s `select` method to set the text content of a div element, while a custom ES6 module exports the message string. The styling is applied through CSS, with the page layout handled by standard HTML elements.

Oct 31, 2019

Loading thumbnail…

Hello VizHub

This example demonstrates a filtered list of used car entries, showing only models priced under $2,000 from a small embedded JSON dataset, by formatting each car’s year, make, model, and price into text lines. The visualization renders plain text into a DOM element via `document.getElementById` and sets `textContent` from a computed message. It uses D3 v5 for potential data manipulation, though the core logic relies on native JavaScript array methods (`filter`, `map`, `join`) and ES6 module imports. Styling is applied through an external Ubuntu font and a dark background via CSS.

Oct 31, 2019