Let's make a face with

100%

Let's make a face with

✓ Published0🌍 Public

Last edited Jan 27, 2021

Created on Jan 27, 2021

This example demonstrates how D3.js (v6) can load and structure car data using JavaScript modules, filtering vehicles by price and formatting each entry as a readable string. The visualization renders inside an SVG container, although the primary focus is on an educational tutorial that uses `import`/`export` statements across `formatCar.js`, `generateReport.js`, and `getCars.js`. A bundled script (`bundle.js`) connects the modules to the HTML page, while the code defines a `generateReport` function that filters cars under a specified maximum price and maps them to formatted text output. The example emphasizes modular coding practices rather than interactive graphical elements.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Making a Face with D3.js

This example uses D3.js v5 within a React framework to render a static SVG visualization. It imports car data from a local JSON file, formats each entry with a helper function, and filters the dataset to generate a text report of vehicles under a specified price. The visualization colors the entire SVG background red using D3’s selection API, while the report is displayed as plain text. The code demonstrates data parsing, asynchronous promise-based data retrieval, and SVG styling, but does not include any interactive or animated face-drawing behavior.

MMichelle Mac

83% match

Loading thumbnail…

Cars Report - ES5 Modules

This example demonstrates a modular JavaScript approach to generating a text-based car report. It displays a filtered list of cars under a specified price threshold, formatted with year, make, model, and price. The code uses ES5 module exports and imports to separate data loading, formatting, and report generation functions. D3 v6 is loaded via CDN but not actively used for visualization. The report updates after a simulated two-second asynchronous delay from a hardcoded JSON array.

Mmaxthamt

82% match

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

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

81% match

Loading thumbnail…

VizHub

A tutorial example demonstrates JavaScript modules and data handling alongside a simple animated SVG face. It loads a hardcoded JSON array of car objects through a mock asynchronous function, filters the results by price, and formats them into a text report. Concurrently, D3 v5 selects an SVG element and builds a yellow circle face with eyes, animated eyebrows using `transition.attr`, and a mouth drawn with the `d3.arc` path generator. The example shows object destructuring in `formatCar.js` and promise-based data retrieval via `getCars`.

JJason Skelton

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

81% match

Loading thumbnail…

Cars Report

This example demonstrates how to load and display a small dataset of car information in the browser. It parses a hardcoded JSON string containing five car records and renders it as text on an SVG canvas. The visualization uses D3.js v7, loaded via UNPKG, alongside native JavaScript ES6 modules for organizing the code. The page includes a separate module that exports the message “Hello VizHub!” and displays it in a styled element using the `textContent` property. Text formatting is handled through plain CSS.

JJChung-rpi

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

80% match