Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Jan 25, 2021

Created on Jan 25, 2021

This example demonstrates a simple D3.js application that fetches a hardcoded list of cars and generates a text report of models priced under $2,000. It uses a Promise-based `getCars` function to simulate a delayed data load, then renders the filtered and formatted car details into an HTML `<pre>` element. The visualization highlights modular ES6 imports, including a local `formatCar` utility and a `generateReport` function that chains `filter` and `map` on the data.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Fork of Hello VizHub 3524

This example shows a simple text-based car report that loads a hardcoded JSON dataset and displays a filtered list of cars under a specified price. It demonstrates asynchronous data loading with a Promise-based `getCars` function and ES6 module imports across local files. The code uses D3 via UNPKG only for import, while the report generation relies on native JavaScript array methods like `filter`, `map`, and `join`. The final output renders as formatted text in an HTML `<pre>` element using vanilla DOM manipulation.

Qqliu50@fordham.edu

92% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to use D3.js to filter and display data from a static array of car objects. The code imports car specifications from a local module, applies a filter to select vehicles priced over $2,000, and formats each entry as a text line showing the car name and price. Using the `select` API from D3 v5, the resulting report is rendered directly into an HTML `<pre>` element, combining data processing with DOM manipulation.

OofficialClint

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a data-report generator that filters a small JSON array of car records by price and displays the matching entries as formatted text in the page. The visualization relies on D3 v5, accessed via UNPKG, using the `select` API to set the text content of a `#message` div. The code also showcases local ES6 module imports, with `generateReport.js` filtering cars and `formatCar.js` formatting each record with year, make, model, and price.

RRobertWell

88% match

Loading thumbnail…

Fork of Cars Report

This example displays a text-based report of cars filtered by price. It shows how to compose local ES6 modules and import them into a main script, with `generateReport` filtering a hardcoded `cars` array and mapping each entry through `formatCar` to produce formatted strings. The resulting message is rendered into a `<pre>` element using `document.getElementById`. It relies on D3 v5 loaded via UNPKG, though the report itself uses no D3-specific APIs, instead demonstrating modular JavaScript organization in a VizHub environment.

Ppuru001

88% match

Loading thumbnail…

Cars Report

This example renders a text-based report of used cars, showing the power of VizHub to load D3 from UNPKG and modularize code with ES6 `import` statements. It displays a list of cars under a $2000 price threshold, with each entry formatted as "year make model: price." The code relies on a local `generateReport` module that filters and formats the data, a `getCars` module that parses embedded JSON and returns a Promise with a simulated 2-second delay, and an `index.html` with a `<pre>` element updated via the DOM API.

JJustin

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple text report generated from a hardcoded list of car objects, displayed in the browser using D3. It shows how to load D3 v5 via UNPKG, import functions from local ES6 modules, and use promises. The code uses `d3.select` to update the page and `setTimeout` to simulate asynchronous data loading.

YYanxxx447

87% 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

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

SsunilthkGmail

86% match