Fork of D3 Starter

100%

Fork of D3 Starter

✓ Published0🌍 Public

Last edited Apr 22, 2021

Created on Apr 22, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

87% match

Loading thumbnail…

D3 Practice

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.

TTzu-Yu-Ku

86% match

Loading thumbnail…

Cars Report

A simple web page demonstrates how to load and format car data using D3 version 6. It displays a report of cars priced under $2,000 after a simulated two-second delay. The code uses `getCars`, which returns a promise resolving to parsed JSON, and `generateReport` to filter and map entries with `formatCar`. The result appears as plain text in a `<pre>` element with enlarged font.

CCrystal Hsu

85% match

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a basic asynchronous report generator that filters a hardcoded array of car objects by price and displays the results as text in the browser. It shows a loading message while the `getCars` promise simulates a two-second delay, then renders each car’s year, make, model, and price using `generateReport` and `formatCar` functions. The code uses the native `Promise` and `setTimeout` APIs, with the DOM updated via `getElementById` and `textContent` in a plain HTML page styled by `styles.css`. The filter threshold is set to 2000, producing a list of affordable vehicles.

YYujin

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

85% match

Loading thumbnail…

Cars Report

This example demonstrates a simple asynchronous data-loading pattern: it fetches an in-memory array of car objects through `getCars()`, which returns a Promise after a simulated 2-second delay. While waiting, the page displays “Loading...”, then renders a filtered text report listing only cars priced under $2,000, formatted as “year make model: price” via `generateReport()` and `formatCar()`. The code uses D3 v7’s `select` import and vanilla DOM methods to update a `<pre>` element, showcasing how to combine Promises with D3 for dynamic content updates.

Iilsan142

85% match

Loading thumbnail…

Fork of Cars Report

This example demonstrates a simple asynchronous data-reporting workflow, loading a static JSON array of five used cars and generating a filtered list of those priced under $2,000. The code uses `Promise`-based `getCars()` with a simulated 2-second delay, then renders the final text into an HTML `<pre>` element via `document.getElementById`. It highlights modular JavaScript with ES modules, including `export`/`import` syntax and array methods like `filter` and `map`, showing how to structure reusable functions (`formatCar`, `generateReport`) for text-based output.

Nnkzh

85% match

Loading thumbnail…

Fork of Cars Report

This example demonstrates a JavaScript workflow that fetches car data and dynamically generates a formatted text report. It shows how modular code separates data retrieval, formatting, and report generation. The page initially displays “Loading...” and then presents a list of cars priced under $2,000, using a Promise with `setTimeout` to simulate an asynchronous API call. The implementation relies on ES6 modules, `JSON.parse` for handling embedded data, array methods like `filter` and `map`, and template literals for string construction. The visual output is plain text rendered directly into an HTML `<pre>` element.

DDuong Ky Lan

85% match