Hello VizHub

100%

✓ Published0🌍 Public

Last edited Dec 22, 2020

Created on Dec 22, 2020

This example demonstrates a minimal D3.js application that renders a filtered list of car data as plain text in the browser. It imports the `select` function from D3 and local ES6 modules, parsing a hardcoded JSON array of five cars. The code filters cars priced under $2000 and formats each entry with year, make, model, and price using template literals. The result is displayed in a styled `div` element, showcasing basic data import, manipulation, and DOM selection with `d3.select`.

AI-generated description

An example showing the capabilities of VizHub:

Loads D3 via UNPKG.
Demonstrates use of import from "d3".
Demonstrates use of import from local ES6 modules.

MIT Licensed

Similar vizzes

Loading thumbnail…

Hello VizHub

This example demonstrates how to display a filtered list of used cars using D3.js and ES6 modules. It imports car data from a local module, filters for vehicles priced under $2000, and formats each entry into a readable string. The page renders the text output using D3’s `select` and sets the content of a `<pre>` element with styled CSS. The data is defined as JSON in `cars.js` and parsed with `JSON.parse`.

Mmadguy3000

89% match

Loading thumbnail…

Hello VizHub

This example demonstrates a filtered list of used car entries, showing only models priced under $2,000 from a small embedded JSON dataset, by formatting each car’s year, make, model, and price into text lines. The visualization renders plain text into a DOM element via `document.getElementById` and sets `textContent` from a computed message. It uses D3 v5 for potential data manipulation, though the core logic relies on native JavaScript array methods (`filter`, `map`, `join`) and ES6 module imports. Styling is applied through an external Ubuntu font and a dark background via CSS.

Ddvherrera

86% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to use D3.js to filter and display data from a static array of car objects. The code imports car specifications from a local module, applies a filter to select vehicles priced over $2,000, and formats each entry as a text line showing the car name and price. Using the `select` API from D3 v5, the resulting report is rendered directly into an HTML `<pre>` element, combining data processing with DOM manipulation.

OofficialClint

84% match

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 displays a text report listing cars with prices above a threshold, generated from a hardcoded array of car objects. It demonstrates importing and using D3.js v5’s `select` method to update the DOM content of a `div`. The code also showcases ES6 module syntax with a separate `myMessage.js` export and array filtering/mapping for report formatting. Styling relies on an external Ubuntu font import and a dark background theme via CSS.

Aasimplesinger

84% match

Loading thumbnail…

Hello VizHub

This example renders a plain-text message in a styled webpage. It imports a hardcoded JSON dataset of five cars, filters and formats it, and displays the first car’s details using D3’s `select` and text-setting API. The page uses a dark Ubuntu-themed CSS layout and loads D3 v5 from a CDN.

Rram-iyer

83% match

Loading thumbnail…

Hello VizHub

This example displays the make of the first car from a small embedded dataset, rendering the text “BMW” prominently on a dark background. It demonstrates basic VizHub capabilities, including ES6 module imports and JSON parsing. The page uses D3 v5’s `select` function, though the core visualization simply sets the `textContent` of a div element, while styling relies on Google Fonts’ Ubuntu and custom CSS. The data is hardcoded in a separate `cars.js` module as an array of car objects.

Jjakirst

83% match

Loading thumbnail…

Hello VizHub

This example displays a short text report built from a small dataset of cars, filtering entries with a price under 2000 and formatting each record as a line with year, name, and price. The page renders the resulting message in a large, styled font on a dark background. The code imports the `select` function from D3 v5, though it primarily uses plain DOM methods to set the text content, and relies on ES6 modules to organize data and formatting logic in separate files.

HHarry Hackett

83% match