Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published0🌍 Public

Last edited Mar 9, 2021

Created on Mar 9, 2021

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.

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 clear

This example demonstrates a simple data-report generator that filters a static array of car listings and displays the results as formatted text in a large HTML `<pre>` element. It showcases VizHub’s support for local ES6 modules and external D3 loading via UNPKG, though the visible behavior relies on `JSON.parse` and string manipulation with `filter`, `map`, and `join` from the `cars.js` and `generateReport.js` modules. The page uses `document.getElementById` to update the message element dynamically with the generated report, highlighting modular code organization.

Wwachirar

89% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates modular JavaScript development within VizHub, importing and filtering a hardcoded JSON dataset of car objects. It uses D3 v5’s `select` function (though the final message is set via `document.getElementById`) and local ES6 modules like `report.js` and `formartCar.js`. The code filters cars by price, formats each item into a text string, and displays the joined result in the `#message` div, styled with CSS.

Ssimon-onebright

89% 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…

Fork of Hello VizHub

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.

KKevin McMorrow

88% match

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

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

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to build a simple VizHub visualization that displays a formatted message about a car from a small, hardcoded JSON dataset. The visualization uses D3 v5, loaded via UNPKG, along with local ES6 modules for code organization. The `index.js` file imports the `select` function from D3 to set the text of an HTML div, while the message itself is generated by a custom module that parses the car data and formats it into a readable string. The rendering is minimal, showing the result as large centered text via CSS.

RRobertWell

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

85% match