Untitled

100%

✓ Published1🌍 Public

Last edited Sep 2, 2018

Created on Sep 2, 2018

This example imports a small array of car objects from an ES6 module and displays the name of the first item in an HTML element. The data is parsed from a JSON string literal using `JSON.parse` and rendered as text content via `document.getElementById`. The page uses a large Ubuntu font from Google Fonts with a dark background, and the bundled output is loaded through `bundle.js`. No external visualization libraries are involved, as the focus is purely on data extraction and DOM text insertion.

AI-generated description

This is a description using Markdown.

MIT Licensed

Similar vizzes

Loading thumbnail…

Untitled

This example displays a single car object, containing a year and make, as plain text on an HTML page. The data is defined as a JSON string in `cars.js` and parsed into a JavaScript object. The `index.js` file imports this object and uses the DOM API `document.getElementById` to set the text content of a `<pre>` element, rendering the data visually. The visualization relies solely on React and standard browser APIs without any additional libraries.

VVPTomi

83% match

Loading thumbnail…

Untitled

This example demonstrates how to load data from a local ES6 module and update the text content of an HTML element. The code imports a parsed JSON array of car objects from `cars.js`, selects the first car’s make, and assigns it to the `textContent` of an element with the ID `message-element`. It uses D3 via UNPKG for module loading, alongside standard DOM manipulation through `document.getElementById`. The page renders a large, styled message in a `<pre>` tag.

MMonaYuan

81% match

Loading thumbnail…

Untitled

This example demonstrates a simple HTML cars report that displays a bulleted list of vehicles, highlighting how data can be presented in a static document. The visualization includes hardcoded car entries, some marked with a red highlighted class, showing a basic web page layout with headings and list styling. The code uses ES6 modules, including a `getCars` function that returns a Promise with car data from a JSON string, though the report itself remains static without dynamic data fetching. It relies on plain HTML, CSS, and JavaScript, with no external libraries, to render the final output.

MMarketaInce

79% match

Loading thumbnail…

cars report

This example displays the make of the first car in a small JSON dataset as plain text on a webpage. It loads D3 via UNPKG and uses local ES6 modules to import and parse the car data with `JSON.parse`. The index.js file selects a DOM element by ID and sets its text content, while CSS styles the message with a large font size. The visualization demonstrates basic data loading, module imports, and DOM manipulation with D3 v5.

Mmanishabehera

78% match

Loading thumbnail…

Untitled

This example renders a simple HTML page titled “HTML cars report,” displaying a static list of three car entries (car a, car b, car c) as plain text. The page is built with basic HTML structure and heading tags, with no external libraries or JavaScript frameworks. The data source is the manual text embedded directly in the markup, and the visualization is limited to the browser’s default rendering of the HTML elements.

Aaneesh3397

78% match

Loading thumbnail…

Cars Report

This example displays a single car make from a small static dataset of four vehicles. The code imports car data from a JSON array via an ES6 module and uses `document.getElementById` to update the text content of a `<pre>` element. The page applies a custom Ubuntu font and bold styling through CSS, and the bundled script runs in the browser from `bundle.js`. The visualization shows only the first car’s make, "Honda," without any charts or interactive elements.

Mmartiguesc

78% match

Loading thumbnail…

HTML Starter

This example demonstrates a minimal HTML page that imports a static dataset and displays a car name on screen. It shows how an ES module exports an array of car objects, which index.js imports and uses to update the text content of a `<pre>` element via `document.getElementById`. The page uses plain HTML with inline CSS for styling, and depends on a bundler like Vite or Webpack to resolve the module imports and serve `bundle.js`. The data lives in a separate `cars.js` file, parsed from a JSON string.

Ffrank-jim

78% match

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.

RRashmi000

78% match