Practice

100%

✓ Published0🌍 Public

Last edited Nov 11, 2019

Created on Nov 11, 2019

This example renders a simple text report from a dataset of five cars, each with a year, make, model, and price. It uses D3.js v5's `select` function to query the DOM and updates a `<pre>` element with a message generated by local modules. The `generateReport` function filters cars by a maximum price and maps them into formatted strings via `formatCar`, producing a line-separated list. The styling uses a custom Ubuntu font and a dark blue background.

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

Loading thumbnail…

Car Report

This example displays a text-based car report, listing vehicles under a specified price with their year, make, model, and formatted cost. It demonstrates asynchronous data loading and string generation using D3.js v5’s `select` and `text` methods to update a `<pre>` element. The code uses `getCars` with a `Promise` and `setTimeout` to simulate fetching JSON data, then processes it via `generateReport` and `formatCar`, filtering by a maximum price. A dark theme with Ubuntu typography is applied through CSS.

Ddsku2276

87% match

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report using D3.js and ES6 modules. It filters a hardcoded JSON dataset of seven cars by a minimum price threshold of $1000, formats each matching entry with the `formatCar` function, and displays the results in a `<pre>` element. The visualization uses `d3.select` and `document.getElementById` to render the final message, while the report logic relies on array methods like `filter`, `map`, and `join`. A dark blue background and Ubuntu font style the output.

EEbrahim Alareqi

86% match

Loading thumbnail…

Cars Report

This example displays a text-based report of cars filtered by price, rendering each matching vehicle as a formatted line with year, make, model, and cost. The visualization uses D3 v5 loaded via UNPKG, along with local ES6 modules for data parsing and report generation. The `cars.js` module defines an inline JSON array, while `generateReport` filters and maps entries using `formatCar`. The resulting message is inserted into a `<pre>` element through `document.getElementById`.

SShankar Ghimire

86% match

Loading thumbnail…

Cars Report

This example renders a text-based report of car listings filtered by price. The code uses D3 v5’s `select` API and vanilla DOM methods to display the generated message in a styled `<pre>` element. It imports car data from a JSON string, filters cars above a minimum price threshold, and formats each entry with a custom `formatCar` function, producing a clean, readable summary on a dark background.

YYogesh Joshi

86% match

Loading thumbnail…

Cars Report

This example demonstrates a data-reporting workflow that filters a hardcoded dataset of five cars by price and displays the results as formatted text lines. It shows how D3.js v5 can be used for simple DOM manipulation rather than complex charting, with the `d3.select` method updating a message div. The report generation relies on the custom `formatCar` and `generateReport` utility functions, which use array filtering and mapping, while the data is delivered asynchronously via a Promise in `getCars` after a simulated two-second delay. The presentation uses the Ubuntu font against a dark navy background.

PPulkit Rohilla

86% match

Loading thumbnail…

Cars Report

This example displays a simple text report of cars under a specified price threshold. It uses vanilla JavaScript with ES6 modules to filter a hardcoded JSON dataset of five cars, format each entry with the `formatCar` function, and render the output as plain text in an HTML `<pre>` element. The report is generated by `generateReport`, which filters cars and joins formatted strings with newlines. The styling uses an external Ubuntu font and a dark background.

Qqueentrudi

86% match

Loading thumbnail…

Cars Report

This example displays a plain-text report of cars filtered by price, showing each vehicle’s year, make, model, and cost. It uses the `generateReport` function to filter the hardcoded car JSON data and format entries via the `formatCar` helper, which joins them into a single text string. The report appears inside a `<pre>` element styled with CSS, while D3 v5 is loaded but not directly used for rendering, relying instead on standard ES6 module imports and array methods.

Nneoh

85% match

Loading thumbnail…

Cars Report

This example displays a report of cars filtered by a maximum price, listing each car’s year, make, model, and price as plain text. It uses D3.js v5 to update the HTML content and JavaScript ES6 modules to load a hardcoded JSON dataset via a simulated asynchronous `Promise` and to generate the report with `generateReport` and `formatCar`. The page styling is handled with CSS, including a dark background and Ubuntu font.

PPatrickHennessey

85% match