Skip to main content
SimilarExport ZIP
100%

js tutorial

✓ Published0🌍 Public
JJustin Epstein
Last edited Mar 3, 2022
Created on Mar 3, 2022
Forked from Hello VizHub

This example demonstrates how to load and display local data in a VizHub project using D3 and modern JavaScript modules. It imports a cars dataset from a local ES6 module, parses JSON, and writes the first car’s make to an HTML `<pre>` element via `document.getElementById`. The visualization relies on D3 loaded from UNPKG, showcasing basic import syntax and DOM manipulation without any chart rendering.

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 World

This example demonstrates how to load and parse a small JSON dataset of car information and render the first car’s make in the browser. It shows the basic structure of a VizHub project, including importing local ES6 modules (`cars`, `myMessage`) and the `select` function from D3 v5, which is loaded via a CDN. The code also includes commented-out examples of DOM manipulation with `textContent` and D3’s selection API, while the HTML page contains a `<pre>` element that would display the output.

Kkippspan
86% match
Loading thumbnail…

Cars report

This example demonstrates how to load and display data from an external ES6 module in a VizHub project. It imports a JSON array of car objects from `carsreport.js` and renders the first car’s make (Honda) as plain text inside a `<pre>` element. The visualization uses standard JavaScript `JSON.parse` and DOM manipulation via `document.getElementById`, with D3 loaded from UNPKG as a dependency. The page structure lives in `index.html`, while styling is defined in `styles.css`.

Mmshah151
85% 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
85% match
Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load and display a single data value from a local ES6 module in a web page. It imports a `cars` array containing one object with a `make` property, parses it from a JSON string, and renders the result (`Honda`) into a `<pre>` element using the DOM API. The visualization relies on D3 v5 loaded from UNPKG, though no D3-specific functions are invoked. A separate CSS file styles the message with large, centered text. The approach shows basic module imports, JSON parsing, and DOM manipulation within the VizHub environment.

Llrakla
84% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal single-page visualization that displays the make of the first car from a hard-coded dataset. The code imports car records stored as a JSON string in `cars.js`, parses them with `JSON.parse`, and accesses a specific property to render text. It uses plain DOM manipulation via `document.getElementById` to update the content of a `<pre>` element in the `index.html` file. The visualization shows how static data from an external module can be directly injected into a webpage without any rendering libraries.

DDi Zhen
84% match
Loading thumbnail…

Cars Reports

This example demonstrates how to export and import data from local ES6 modules in a VizHub project, displaying a static message on the page. It uses D3 loaded via UNPKG, though the visible code does not employ any D3 methods—only the import syntax is shown. The app imports an array of car objects from `cars.js` and a string from `myMessage.js`, but the `index.js` file leaves both the imported data and message unused, with placeholder text. The HTML contains a single `<pre>` element whose content is updated via the DOM API, styled by `styles.css`. The dataset includes five car records with year, make, model, and price fields.

Bbrad1024
84% match
Loading thumbnail…

Untitled

This example demonstrates the use of ES6 modules and D3 imports in VizHub, filtering a small dataset of cars from an embedded JSON string and displaying a formatted report. The code imports the `cars` data and a `generateReport` function from local modules, which filters cars under a price threshold and maps each to a formatted string via `formatCar`. The resulting message is written into a `<pre>` element using the DOM API. It showcases local module composition and data transformation without any external visualization library beyond standard JavaScript.

GGiosec
84% match
Loading thumbnail…

JavaScript101

This example demonstrates a minimal D3 version 6 setup by rendering a hardcoded message extracted from a JSON array of car data. It shows how to import and parse local data through ES modules, specifically using `cars.js` and `carsJSON` with `JSON.parse`. The code uses `document.getElementById` to set the text content of a `<pre>` element in `index.html`, displaying only the make of the first car. The visualization relies on standard DOM manipulation rather than D3’s data-binding or scales.

JJoshuoYang
84% match