R

Rashmi000

@Rashmi000·16 public vizzes

Loading thumbnail…

Html Cars Report

This example demonstrates a minimal HTML report page titled “Cars Report,” displaying a static list of three items. It uses basic HTML structure with an `<h1>` heading and `<ul>` list, while a separate ES6 module (`myMessage.js`) exports a “Hello VizHub!” message that is not visibly rendered. The styling relies on Google Fonts’ Ubuntu typeface and a dark navy background, with white text set at a very large font size. The page loads a bundled JavaScript file (`bundle.js`), though no interactive or data-driven visualization is shown.

Loading thumbnail…

Cars Report

This example demonstrates a minimal data-visualization gallery piece where the page displays the make of the first car from a hardcoded JSON array, showing "Honda" prominently. The code parses an embedded JSON string via `JSON.parse` into a `cars` array, exports it as an ES6 module, and imports it into `index.js` to update a `<pre>` element’s text content. The styling uses a Google Fonts import (`Ubuntu`) with CSS for a dark background and large centered text.

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It displays the text “Hello VizHub!” in large, styled lettering as a static message. The code imports the `select` function from the D3 library and a custom `message` constant from a local module, then uses `select('#message').text(message)` to update the page. Rendering relies on HTML and CSS with the Ubuntu font, showing basic module imports and D3’s selection API for DOM manipulation.

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It displays the text “Hello VizHub!” in large, styled lettering as a static message. The code imports the `select` function from the D3 library and a custom `message` constant from a local module, then uses `select('#message').text(message)` to update the page. Rendering relies on HTML and CSS with the Ubuntu font, showing basic module imports and D3’s selection API for DOM manipulation.

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It displays the text “Hello VizHub!” in large, styled lettering as a static message. The code imports the `select` function from the D3 library and a custom `message` constant from a local module, then uses `select('#message').text(message)` to update the page. Rendering relies on HTML and CSS with the Ubuntu font, showing basic module imports and D3’s selection API for DOM manipulation.

Loading thumbnail…

Cars Report

This example displays a static message, “Hello VizHub!”, centered on a dark blue page with large white text. It demonstrates the basic structure of a VizHub project, including an HTML entry point and a bundled JavaScript file. The code imports the `select` function from D3.js to target the `#message` div and set its text content, while the message itself is imported from a local ES6 module. The styling relies on an external Google Fonts import for the Ubuntu typeface and sets the page background and text color via CSS.

Loading thumbnail…

Hello VizHub

A simple text-based visualization demonstrates how VizHub integrates D3.js and ES6 modules. The page displays the message "Hello VizHub!" in large Ubuntu font on a dark blue background. The code uses `select` from D3 to target the `#message` div and set its text content, while the message string is imported from a separate `myMessage.js` module. Styling is handled entirely through CSS via Google Fonts.

Loading thumbnail…

Cars Report

This example displays the text “Hello World” on a page with a dark blue background and large, centered Ubuntu font styling. It demonstrates basic VizHub module structure: a `cars.js` file exports parsed JSON data about three car models, while an `index.js` imports that data and sets the DOM element’s text content. The page uses vanilla JavaScript with `document.getElementById` and relies on ES6 module syntax, with styling applied via an external CSS file.

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It displays the text “Hello VizHub!” in large, styled lettering as a static message. The code imports the `select` function from the D3 library and a custom `message` constant from a local module, then uses `select('#message').text(message)` to update the page. Rendering relies on HTML and CSS with the Ubuntu font, showing basic module imports and D3’s selection API for DOM manipulation.

Loading thumbnail…

Cars Report

This example displays the make of the first car from a hardcoded JSON dataset containing three vehicles. It retrieves `cars[0].make` and writes the result into a large HTML element using the DOM API `document.getElementById`. The app imports the parsed JSON from the `cars.js` module and relies on ES6 module syntax. Styling uses a dark background with the Ubuntu font from Google Fonts, and the page runs as a bundled script in `index.html`.

Loading thumbnail…

Cars Report

This example displays a static "Hello World" message in large, styled text on a dark blue background, with the car dataset loaded but not visualized. The page renders the message via plain DOM manipulation, using `document.getElementById` to set the text content of a `<pre>` element. The appearance is defined with CSS, including the Ubuntu font from Google Fonts and a large font size. The code demonstrates basic ES6 module exports and imports, with the car data defined as JSON in a separate module, though no charts or interactive visualizations are present.

Loading thumbnail…

Cars Report

This example displays the make of the first car from a hardcoded JSON dataset, rendered as large text on a page. It shows how to import and parse data from an ES6 module (`cars.js`) and update the DOM via `document.getElementById` and `textContent`. The styling uses Google Fonts' Ubuntu and a dark blue background via CSS. No external visualization library is used; the example relies solely on core JavaScript and the browser's DOM API.

Loading thumbnail…

Cars Report

The Cars Report example shows a text-based data visualization that filters a small dataset of three cars by price and formats each matching vehicle into a readable report line. It uses a predefined price threshold to display only cars under that value, rendering the output as plain text in a large font. The code relies on ES6 module imports and exports, JSON parsing for the car data, and array methods like filter and map to generate the final report, which is inserted into the DOM via textContent. The visualization emphasizes how simple data transformations can produce a clear, typographic display.

Loading thumbnail…

Cars Report

This example displays a single formatted car listing, showing the year, make, model, and price, with a large, styled text output on a dark blue background. It demonstrates basic data handling by parsing a static JSON array of car objects and using array methods like `filter` and `map` to process the data, though the final displayed message uses the first car. The code relies on ES6 modules for data import/export and the DOM API `document.getElementById` to update the page content. CSS styling uses an imported Google Font and custom properties.

Loading thumbnail…

Hello VizHub

This example displays a single bold message, “Hello VizHub!,” centered on a dark blue background using large Ubuntu typography. It demonstrates the basic structure of a VizHub project, including an HTML entry point, a modular JavaScript file, and a separate stylesheet. The code imports the `select` function from D3 v5 to set the text content of a div element, while an ES6 module exports the message string. Styling leverages the Google Fonts API for the Ubuntu font.

Loading thumbnail…

Hello VizHub

This example demonstrates how to build a minimal D3.js visualization using ES6 modules. It displays the text “Hello VizHub!” in large, styled lettering as a static message. The code imports the `select` function from the D3 library and a custom `message` constant from a local module, then uses `select('#message').text(message)` to update the page. Rendering relies on HTML and CSS with the Ubuntu font, showing basic module imports and D3’s selection API for DOM manipulation.