Activities

100%

✓ Published0🌍 Public

Last edited Oct 17, 2020

Created on Oct 17, 2020

This example demonstrates how to generate a text-based activity report from a JSON dataset. It loads a list of activities, filters them by price, and formats each entry into a readable string. The page initially shows “Loading...” and then displays the report after a simulated two-second delay. The code uses a JavaScript Promise in `getActivity` to retrieve the data, array methods `filter` and `map` to process it, and template literals for formatting. The final output is rendered in a `<pre>` element.

AI-generated description

An example tutorial of how to use JavaScript objects, arrays, and modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Project Report

This example renders a text-based project report from JSON data about project activities. It uses JavaScript promises and DOM manipulation to load the data and display a filtered list of activities with durations of 80 days or less. The code filters activities, formats each one with its ID, name, duration, and critical status, then inserts the result into an HTML page styled with Ubuntu font. The visualization demonstrates a simple data-processing pipeline using standard JavaScript APIs rather than specialized visualization libraries.

RRubens

75% match

Loading thumbnail…

Project and Activity List

This example displays a plain-text summary of a tabular dataset about real projects. It loads two TSV files, `projects.tsv` and `activities.tsv`, using D3’s `tsv` function, then renders a report to the page via `select('body')`. The report shows the number of rows, columns, and size in kilobytes for each table, followed by a JSON-formatted preview of the first ten rows. The console output is styled with a black background and green monospace text.

RRubens

69% match

Loading thumbnail…

Cars Report

This example demonstrates generating a text-based report of cars, filtering a hardcoded JSON dataset to display only vehicles priced under $2,000. The interface shows a loading message before asynchronously fetching the data. It uses JavaScript objects, arrays, and modules, with asynchronous operations powered by a Promise and `setTimeout` to simulate a network request. The report is formatted through custom functions, `formatCar` and `generateReport`, using array methods like `filter`, `map`, and `join`. The result is displayed in an HTML `<pre>` element, styled for readability.

深深度碎片

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

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

67% match

Loading thumbnail…

Cars Report

This example demonstrates a simple text-based car report that filters a hardcoded dataset of five cars by price and displays matching entries formatted as strings. It shows how JavaScript modules coordinate to load simulated asynchronous data and render output into an HTML page. The code uses `JSON.parse` to convert inline JSON data, a `Promise` with `setTimeout` to mimic a delayed data fetch, and ES6 module imports/exports to split logic into separate files. The final report appears in a `<pre>` element with a loading message shown first.

Ddmcgown3

67% match

Loading thumbnail…

Cars Report

This example demonstrates an asynchronous JavaScript workflow that generates a text report of used cars priced under $2,000. It shows a loading message, then fetches car data from a JSON array using a simulated `Promise` with `setTimeout`, filters and formats the entries, and displays the final list in a webpage. The code uses ES6 modules for exporting functions like `formatCar` and `generateReport`, employs `Array.filter`, `map`, and template literals to compose the output, and updates the DOM via `document.getElementById` and `textContent`. The report renders as plain text in a `<pre>` element with a large font.

AAhmed Negm

67% match

Loading thumbnail…

Cars Report

This example demonstrates how to generate a text-based car report from a dataset of five vehicles. It shows a loading message while the data is fetched, then displays a formatted list of cars priced under $2,000. The code uses JavaScript objects, arrays, promises, and ES6 modules, including `getCars` with `JSON.parse` and a simulated async fetch via `setTimeout`, as well as `formatCar` and a `generateReport` function that filters and maps car entries.

SSandraPicarra

66% match