Fork of Hello VizHub

100%

Fork of Hello VizHub

✓ Published1🌍 Public

Last edited Jan 18, 2023

Created on Jan 18, 2023

This example demonstrates the modular capabilities of VizHub, importing data from a local ES6 module and using D3.js to render static SVG shapes. The page displays a hard-coded dataset of five cars, loaded via a promise and filtered by price using a custom report generator. The visualization features basic SVG primitives, including circles, rectangles, and lines, with D3's `select` API used to manipulate page elements, though the main output is a text report.

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…

Fork of Hello VizHub

This example demonstrates a simple text report generated from a hardcoded list of car objects, displayed in the browser using D3. It shows how to load D3 v5 via UNPKG, import functions from local ES6 modules, and use promises. The code uses `d3.select` to update the page and `setTimeout` to simulate asynchronous data loading.

YYanxxx447

88% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to build a simple VizHub visualization that displays a formatted message about a car from a small, hardcoded JSON dataset. The visualization uses D3 v5, loaded via UNPKG, along with local ES6 modules for code organization. The `index.js` file imports the `select` function from D3 to set the text of an HTML div, while the message itself is generated by a custom module that parses the car data and formats it into a readable string. The rendering is minimal, showing the result as large centered text via CSS.

RRobertWell

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

87% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a simple D3.js application that fetches a hardcoded list of cars and generates a text report of models priced under $2,000. It uses a Promise-based `getCars` function to simulate a delayed data load, then renders the filtered and formatted car details into an HTML `<pre>` element. The visualization highlights modular ES6 imports, including a local `formatCar` utility and a `generateReport` function that chains `filter` and `map` on the data.

KKevin McMorrow

86% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how VizHub projects combine D3.js with local ES6 modules and external CDN resources. The page renders an SVG container with a single static circle element, while D3’s `select` function from the `d3` package is imported to manipulate the DOM. The code loads D3 v5 via UNPKG, links a local stylesheet, and references a custom `myMessage.js` module, illustrating modular project structure. The visualization itself is minimal, showing only the circle shape without data mapping or interactive behavior.

Kkishan-97

86% match

Loading thumbnail…

Fork of Shapes with SVG and CSS

This example demonstrates how SVG shapes (a circle and a rectangle) are rendered directly in HTML using CSS for styling, while D3.js is loaded via UNPKG and used with local ES6 modules. The code imports `getCars` from a local module, which returns a promise resolving to an array of car data after a two-second delay, and `generateReport`, which filters cars by price and formats them using `formatCar`. The report is then displayed in a message element, showcasing asynchronous data handling and module imports within a VizHub project.

Ppuru001

86% match

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how D3.js can load and display data from a local ES6 module while also using D3 to update the DOM. It shows a simple text message and a car data value (the year 2000) rendered on the page. The code uses `import { select } from 'd3'` to manipulate the `#message` div, imports data via a local `cars.js` module, and reads a property from the parsed JSON array. The visualization relies on D3 v5 loaded from UNPKG, with styling applied through an external stylesheet.

CCecilia831

86% match

Loading thumbnail…

Fork of Hello VizHub 3524

This example shows a simple text-based car report that loads a hardcoded JSON dataset and displays a filtered list of cars under a specified price. It demonstrates asynchronous data loading with a Promise-based `getCars` function and ES6 module imports across local files. The code uses D3 via UNPKG only for import, while the report generation relies on native JavaScript array methods like `filter`, `map`, and `join`. The final output renders as formatted text in an HTML `<pre>` element using vanilla DOM manipulation.

Qqliu50@fordham.edu

85% match