D3 Practice

100%

✓ Published0🌍 Public

Last edited Mar 17, 2022

Created on Mar 17, 2022

This example demonstrates a simple text-based workflow for filtering and formatting a list of used cars. It shows how D3 version 6 can be used indirectly through a JavaScript module bundler, while the core logic relies on native Promises and array methods. The code loads car data from a hardcoded JSON array via the `getCars` function, which simulates a 5-second asynchronous delay. After retrieval, the `generateReport` module filters vehicles priced under $2,000, formats each entry using `formatCar`, and displays the result as plain text in an HTML `<pre>` element.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Cars report

This example demonstrates how to generate a text-based car report using modular JavaScript with D3 v6. It shows a loading message while asynchronously fetching car data via a custom Promise, then filters cars under a specified price and formats each match into a readable string using helper functions. The code uses `d3.v6.min.js`, `getCars()`, `generateReport()`, and `formatCar()` to parse inline JSON data and update the DOM element with the final report.

TTimothy sit

86% match

Loading thumbnail…

Fork of D3 Starter

This example demonstrates how to build a basic asynchronous data-loading workflow with D3 version 6. It displays a list of used cars with their year, make, model, and price, filtering results to show only vehicles under $2000. The code uses `getCars()` to return a Promise that resolves with JSON-parsed car data after a simulated 2-second delay, then passes it to `generateReport()`, which filters and formats the text output using the `formatCar` helper. The final report updates the DOM via `textContent` on the `<pre>` element.

AAlexandrina98

86% match

Loading thumbnail…

Cars Report

This example demonstrates a text-based report generated from a small in-memory dataset of cars, filtering and formatting entries based on price. It shows how JavaScript modules and promises structure asynchronous data loading and report generation. The page initially displays “Loading…” and then uses `getCars()` with a simulated delay to fetch parsed JSON data, followed by `generateReport()` and `formatCar` to create formatted lines. D3 v6 is included but not used, while the core logic relies on native array methods like `filter`, `map`, and `join`. The final output appears as a large custom-styled `<pre>` element.

IImmaculata-Mary Muoghalu

85% match

Loading thumbnail…

D3 Starter

This example demonstrates how to set up a simple D3 workflow by fetching asynchronous JSON data and rendering a filtered text report. It uses `getCars()` to return a promise that resolves a mock dataset of car listings after a two-second delay, then applies `generateReport()` with `Array.filter` and `Array.map` to select cars under a price threshold and format them into a readable list. The `index.html` includes D3 v7 from a CDN, and the final message is written to a `<pre>` element via `textContent`. The code also shows modular ES6 imports separating data access, formatting, and report generation.

Zzenoe

85% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generation workflow. It displays a list of cars, filtering and formatting data asynchronously. The code uses D3 v5 loaded via a CDN, alongside local ES6 modules for data fetching and report generation. A Promise with a two-second delay simulates an API call to retrieve hardcoded JSON car data. The final output is rendered into an HTML `<pre>` element, styled with CSS.

Mmikeferri

85% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based report generated from a hardcoded JSON array of four cars with attributes for year, make, model, and price. It filters the cars to show only those priced under $2,000, using a local ES6 module (`generateReport`) that maps and joins the formatted strings. The code loads D3 via UNPKG for general use, but the report itself relies on native JavaScript promises and `setTimeout` in `getCars` to simulate asynchronous data fetching, then updates the DOM by setting the `textContent` of an HTML `<pre>` element.

Bbenroston

85% match

Loading thumbnail…

Cars Report

This example presents a text-based report of car listings, filtering and formatting a small dataset of three vehicles. It demonstrates modular ES6 JavaScript code organization, with separate files for data, formatting, and report generation. The visualization uses D3 v5 loaded via UNPKG, though the core logic relies on native array methods like `filter` and `map` rather than D3-specific APIs. The `generateReport` function filters cars by price and joins formatted strings into a single message displayed in a `<pre>` element, showcasing how to combine local modules with a CDN-loaded library.

BBartłomiej Remlein

85% match

Loading thumbnail…

CarsReport

This example displays a text-based car report that lists vehicles under a price threshold. It demonstrates loading data asynchronously via a Promise and formatting it into a readable string. The code uses D3 v5 loaded from UNPKG, along with ES6 modules for importing functions like `getCars` and `generateReport`. It parses JSON data and filters cars by price, showing a "Loading..." message before the report appears.

GGurungRegina

84% match