D3 Starter

100%

✓ Published0🌍 Public

Last edited Sep 24, 2021

Created on Sep 17, 2021

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.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

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

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

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…

Car Reports

This example demonstrates a simple text-based report of cars, filtering a hardcoded JSON dataset by price. It uses a Promise-based `getCars` function to simulate a 2-second loading delay, while the `generateReport` module filters cars under $2,000 and formats each entry with `formatCar`. The `index.js` script updates a `<pre>` element’s textContent, showing the list of affordable vehicles. The code relies on D3’s `d3.min.js` bundle for DOM manipulation, though the visualization is purely textual, not graphical.

Ccpsshan

84% match

Loading thumbnail…

Car Report

This example displays a text-based car report, listing vehicles under a specified price threshold after a simulated two-second loading delay. It demonstrates asynchronous data handling by fetching an embedded JSON array through a `Promise` with `setTimeout`, then filtering and formatting entries using `Array.filter`, `Array.map`, and `Array.join`. The D3.js `select` API updates the text content of a `<pre>` element, first with a loading message and then with the generated report. Styling relies on a custom CSS file with a Google Fonts import, while no visual charts or scales are used.

Ddsku2276

84% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text report of cars filtered by price, using asynchronous data loading to show a loading message before displaying results. The code uses ES6 modules to organize functions like `getCars` for a simulated API call, `formatCar` for string construction, and `generateReport` to filter and map car objects. The report is rendered into a `<pre>` element via the DOM API, with the data defined inline as JSON and parsed using `JSON.parse`. No D3.js is used despite the metadata, relying instead on native JavaScript promises and array methods.

LLouis

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

83% match