Skip to main content
SimilarExport ZIP
100%

Hello VizHub

✓ Published1🌍 Public
Jjakirst
Last edited Aug 3, 2019
Created on Aug 3, 2019
Forked from 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.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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
100% match
Loading thumbnail…

Hello VizHub

This example demonstrates an asynchronous data-fetching and reporting workflow in VizHub. It retrieves a hardcoded JSON array of car records via a custom `getCars()` promise, then formats each entry into a text line using `formatCar` and `generateReport`. The final report is displayed in a styled `div` using plain DOM manipulation via `document.getElementById`, alongside D3 v5’s `select` import. The page features a large Ubuntu font and a dark blue background from the linked stylesheet.

Llareyes72
91% match
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
89% match
Loading thumbnail…

Hello VizHub

This example demonstrates a simple asynchronous data-loading and reporting workflow using D3.js v5. It fetches a hardcoded JSON array of car objects via a custom `getall()` promise, filters cars priced under $2000, formats each record with `formatCars`, and joins the results into a report displayed in the page’s message div. The code uses D3’s `select()` to update the DOM text initially with “loading…”, then replaces it with the generated report after a five-second delay. Styling relies on an external Ubuntu font and a dark theme from `styles.css`.

Aasimplesinger
88% match
Loading thumbnail…

Hello VizHub

This example demonstrates how to load and display a list of car records in the browser. The code uses a simulated asynchronous data source via `getCars`, which returns a JavaScript Promise after a two-second delay, and formats the data with custom ES6 modules (`formatCar` and `generateReport`). The final report is rendered as plain text into a `<div>` using the native `document.getElementById` method, while D3 v5 is loaded but only used for its `select` import. The page’s dark blue background and large Ubuntu font come from the linked CSS file.

Llareyes72
88% 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
87% match
Loading thumbnail…

Hello VizHub

This example demonstrates asynchronous data loading and text generation. It fetches a hardcoded JSON array of car objects using a custom Promise-based `getCars` function, then filters and formats entries under a price threshold with `generateReport` and `formatCar`, displaying the result in a `<pre>` element. The page initializes with a “Loading….” message, then updates to the report. It uses ES6 modules, template literals, and D3 v5 from a CDN, though no D3-specific visualization APIs are invoked.

NNarong
87% match
Loading thumbnail…

Cars Report

This example shows a text-based report of car listings filtered by price. It demonstrates asynchronous data loading and ES6 module imports in VizHub. The code uses `getCars()` to return a promise that resolves after two seconds, then applies `generateReport` with a filter and formatting via `formatCar`. D3 is loaded from UNPKG, and local modules handle data parsing and report generation. The output renders as a plain text message in an HTML element.

PPioustu
86% match