Hello VizHub

100%

✓ Published0🌍 Public

Last edited Aug 3, 2019

Created on Aug 3, 2019

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

AI-generated description

An example showing the capabilities of VizHub.

MIT Licensed

Similar vizzes

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

90% match

Loading thumbnail…

Hello VizHub

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

SShubhankar Dash

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

86% match

Loading thumbnail…

Hello VizHub

This example demonstrates how to parse and display a small dataset of car listings as plain text. The code uses a custom parser function to filter cars by a price threshold and format each match into a readable line. The result is injected into an HTML `<pre>` element using the DOM API. The page is styled with CSS, and the dataset is defined within the code as a JSON string.

Ssignlog2

86% match

Loading thumbnail…

Data Visualization D3.js

This example demonstrates how to build a simple data report using D3.js and ES6 modules in the VizHub environment. It displays a text message listing cars priced under $2,000, filtered from a local JSON dataset and formatted with a custom helper function. The code loads D3 from a CDN via UNPKG, imports local modules like `cars` and `formatCar`, and updates the DOM using `document.getElementById` to set text content.

Hhikmet.demirci@gmail.com

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

85% 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…

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

84% match