VizHub

100%

✓ Published0🌍 Public

Last edited Jan 21, 2022

Created on Jan 21, 2022

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`.

AI-generated description

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

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example displays a single car make from a small embedded dataset, rendered as large text in a custom-styled page. It uses D3 v5 indirectly through the `cars.js` module, which defines an array of five car objects parsed from a JSON string. The main script imports that array, accesses the first element, and sets the text content of a div using `document.getElementById`. The visual result is a minimalist, high-contrast presentation that demonstrates how to combine external data files, JavaScript module imports, and CSS styling within the VizHub environment.

Bbaisampayans

84% match

Loading thumbnail…

Hello VizHub

This example demonstrates a simple data-visualization starter using a hard-coded JavaScript array of car objects from a local module. The page displays the model field of the first car entry inside a large, styled HTML element. The code imports the `cars` array and the `select` function from D3 v5, then uses `select('#message').text()` to render the text content. The visualization relies on plain DOM manipulation rather than SVG, canvas, or data joins, with styling provided by an external CSS file.

NNickJolly

84% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

SsunilthkGmail

83% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates modular JavaScript development within VizHub, importing and filtering a hardcoded JSON dataset of car objects. It uses D3 v5’s `select` function (though the final message is set via `document.getElementById`) and local ES6 modules like `report.js` and `formartCar.js`. The code filters cars by price, formats each item into a text string, and displays the joined result in the `#message` div, styled with CSS.

Ssimon-onebright

83% match

Loading thumbnail…

Let's make a face with D3.js!

This example demonstrates how to set up a D3.js visualization within a VizHub project, loading D3 v5 from UNPKG and using ES6 module imports. It selects an SVG element with `d3.select` and applies a green background, while a separate local module exports JSON data representing car listings. The code highlights modular structure, combining external D3 imports with custom local modules, and renders to an SVG canvas within a minimal HTML page.

AAmit Jena

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

82% match

Loading thumbnail…

Hello VizHub

This example demonstrates a simple asynchronous data-loading and reporting workflow using D3.js v5. It fetches a hardcoded JSON array of car objects via a custom `getall()` promise, filters cars priced under $2000, formats each record with `formatCars`, and joins the results into a report displayed in the page’s message div. The code uses D3’s `select()` to update the DOM text initially with “loading…”, then replaces it with the generated report after a five-second delay. Styling relies on an external Ubuntu font and a dark theme from `styles.css`.

Aasimplesinger

82% match

Loading thumbnail…

Let's make a face with

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.

AAbdulazizfh

81% match