Hi VizHub

100%

✓ Published0🌍 Public

Last edited Jul 26, 2019

Created on Jul 25, 2019

This example displays a single data value extracted from a local JSON array of car records, rendering the year of the first car in red text on a dark background. The page loads D3 v5 and uses an ES6 module to parse the embedded car data with `JSON.parse`, then writes the value to a DOM element via `document.getElementById`. The styling uses a Google Fonts import and a custom CSS class.

AI-generated description

An example showing the capabilities of VizHub.

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

87% match

Loading thumbnail…

Hello VizHub

This example displays a single car make from a hardcoded JSON dataset parsed as an ES6 module. The visualization shows the text "Honda" centered on a dark blue background, styled with an imported Google Font. It uses d3.v5 for the environment and plain DOM manipulation through `document.getElementById` to set the message text. The code demonstrates importing from a local module (`cars.js`) and parsing JSON as a data source.

Ssaamkhya

86% match

Loading thumbnail…

Hello VizHub

This example displays the first car make from a static dataset in a large, styled headline. The code loads a small inline JSON array of five cars from the `cars.js` file, parses it with `JSON.parse`, and uses `document.getElementById` to set the text content of a div. The page imports D3 v5 via a CDN for potential use, though the current interaction relies solely on vanilla JavaScript. The styling uses an Ubuntu font, a dark blue background, and white text for high contrast.

Mmsygnowski

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

Hello VizHub

This example displays the make of the first car in a small static dataset. It demonstrates basic VizHub project structure, including ES6 module imports and a separate stylesheet. The page renders the text “Honda” prominently in a large, styled font on a dark blue background. The code imports an array of car objects from `cars.js`, parses it with `JSON.parse`, and writes the result to the DOM using `document.getElementById` and `textContent`. The styling uses CSS with the Ubuntu font from Google Fonts.

Sshehryar-hashir

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 demonstrates a minimal VizHub project that displays the make of the first car from a static JSON dataset. It uses D3 v5 for data handling and DOM manipulation, importing a parsed array of car records from a separate ES6 module via `export` and `import`. The code targets a `<pre>` element in the HTML and sets its text content to "Honda" using `document.getElementById`. The project shows how to structure modular code with external data and a simple rendering update.

Ssleyus

83% match