Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published0🌍 Public
Kkestefon
Last edited Nov 23, 2019
Created on Nov 23, 2019
Forked from Hello VizHub

This example demonstrates a simple text-reporting application. It filters a hardcoded collection of car data to show only vehicles manufactured before 2010, formats each entry into a readable string, and displays the resulting report on a webpage. The visualization is built using ES6 modules, with the data parsed from a JSON string in `cars.js` and the report generation logic in `generateReport.js`. The page's styling relies on CSS, and the final output is rendered as plain text in an HTML `<pre>` element.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example shows a simple textual report generated from a small, hardcoded dataset of used cars. After a two-second simulated delay via a promise, it displays a list of vehicles priced under $2,000, formatted with D3’s `select` API. The report is built using ES6 modules (`getCars`, `generateReport`, `formatCar`) and styled with the Ubuntu font on a dark background. It demonstrates basic D3 v5 DOM selection and module-based code organization in VizHub.

JJenny
85% match
Loading thumbnail…

Hello VizHub

This example demonstrates the core workflow of a VizHub project, showing how a simple web page can load data, process it, and display a formatted text report. The page initially displays "Loading..." and then presents a list of cars priced under $2,000 after a simulated two-second delay, using `getCars()` with a Promise and `setTimeout`. The code leverages ES6 modules, including `formatCar.js` and `generateReport.js`, to filter and format car data, while `index.html` and `styles.css` define the visual presentation with a large Ubuntu font and dark blue background.

Ppothurisathish
85% match
Loading thumbnail…

Cars Report

The cars report demonstrates basic data filtering and text rendering in VizHub. It imports a small hardcoded dataset of car objects from an ES6 module, filters the entries to those priced under $2000, and formats each remaining car into a string with its year, make, model, and price using template literals. The resulting report is concatenated with a line break and displayed as plain text inside an HTML `<pre>` element via the DOM’s `textContent` property. The example uses no external visualization libraries, relying solely on vanilla JavaScript and the module import syntax.

DDuarte Meneses
85% match
Loading thumbnail…

Hello VizHub

This example generates a text-based report from a hard-coded dataset of four car records. It fetches the data asynchronously through the `getCars` promise, formats each entry using `formatCar`, and joins the results with newlines. The display uses vanilla DOM manipulation (`textContent`) within a D3 v5 environment, rendering a styled, centered message against a dark background.

Jjakirst
85% match
Loading thumbnail…

Hello VizHub

This example generates a text-based report from a hard-coded dataset of four car records. It fetches the data asynchronously through the `getCars` promise, formats each entry using `formatCar`, and joins the results with newlines. The display uses vanilla DOM manipulation (`textContent`) within a D3 v5 environment, rendering a styled, centered message against a dark background.

Jjakirst
85% match
Loading thumbnail…

Hello VizHub

This example displays a short text report built from a small dataset of cars, filtering entries with a price under 2000 and formatting each record as a line with year, name, and price. The page renders the resulting message in a large, styled font on a dark background. The code imports the `select` function from D3 v5, though it primarily uses plain DOM methods to set the text content, and relies on ES6 modules to organize data and formatting logic in separate files.

HHarry Hackett
85% match
Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report of car listings, filtering entries by price and formatting each match into a readable line. It shows how VizHub projects can load D3 via UNPKG and use ES6 module imports to organize code. The data is embedded as JSON and fetched asynchronously with a custom `getCars()` promise, while `generateReport()` applies a price filter and `formatCar` transforms each car object into a string. The output is displayed in a `<pre>` element, with a loading message shown until the data arrives.

Ooptimizeresume
84% match
Loading thumbnail…

Cars Report

This example displays a static report page for a cars dataset, rendering the text “Hello VizHub!” in large, styled typography. The visualization demonstrates basic DOM manipulation and ES6 module imports within a VizHub project structure. The page uses plain JavaScript to set text content via `document.getElementById`, while a separate module exports the message string. Styling relies on CSS with an imported Ubuntu font, a dark blue background, and centered layout. The project includes no data loading, charts, or interactive elements, showing VizHub’s minimal setup for a simple text-based output.

YYilmazSalman
84% match