Skip to main content
SimilarExport ZIP
100%

promise

✓ Published0🌍 Public
Ppei9223
Last edited Sep 10, 2022
Created on Sep 10, 2022
Forked from Hello VizHub

This example demonstrates the use of native JavaScript Promises within a D3.js v5 visualization. It logs a message to the console and returns a Promise that resolves, showcasing asynchronous control flow alongside a simple HTML page. The code loads D3 from UNPKG, uses an ES6 module for a text message, and renders the message "Hello VizHub!" in large centered text via CSS styling. The visualization highlights how Promises integrate with D3’s event-driven environment.

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 VizHub

This example demonstrates asynchronous programming patterns using JavaScript Promises, with text updates appearing sequentially in two HTML divs. It shows how a chain of `Promise` objects, created through the `setTimeout` function, executes one after another, updating the visual output after each one-second delay. The visualization uses D3.js v5 through the `select` function to modify text content, while a separate module file exports an unused string constant. The styling relies on the Ubuntu font from Google Fonts with a dark background and light text, though the core interaction is purely timing-based rather than data-driven.

Aasimplesinger
82% match
Loading thumbnail…

Promise

This example demonstrates asynchronous data loading and report generation in a browser. It shows a loading message that updates to a formatted text report after a two-second delay, simulating a network request. The code uses JavaScript ES6 modules with `import`/`export` syntax, a custom `Promise` wrapper around `setTimeout` to fetch car data, and dynamic string construction. It highlights how VizHub loads D3 via UNPKG, though the visible workflow relies on local module functions like `getCars`, `formatCar`, and `generateReport` to process and display car prices.

Xxychen0612.cs09@nycu.edu.tw
76% match
Loading thumbnail…

HTML Starter

This example displays the text “Promise Test” in large, centered type using basic HTML and CSS styling. It demonstrates JavaScript Promise usage in a minimal page context, logging “Hello JavaScript!” to the console on load and resolving a delayed Promise after two seconds. A second Promise, created with setTimeout, logs a message after five seconds. The code uses vanilla JavaScript’s Promise API alongside the console.log method, with no external libraries or data sources.

JJames Song
75% match
Loading thumbnail…

D3 Starter - Asynchronus

This example demonstrates asynchronous programming in JavaScript using Promise objects and the `setTimeout` API, showing how to handle operations that take time to complete. The code defines a `waitSeconds` function that returns a Promise resolving after a specified delay, then chains `.then()` to log a message once the time has elapsed. Using D3 v6 loaded from a CDN, the page includes explanatory text about asynchronous versus synchronous behavior, with no data visualization or rendering involved—the focus is purely on illustrating the callback and Promise patterns.

Mmaxthamt
75% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js setup within VizHub, rendering a message to the page. It uses D3 v5 loaded from UNPKG and imports the library via the ES6 module syntax. The code also shows how to import local CSS and JavaScript modules, with the HTML structure defined in index.html and the visualization logic in bundle.js.

Rreo440
74% match
Loading thumbnail…

Hello VizHub

This example demonstrates a minimal D3.js visualization that renders a static message, “Hello VizHub!”, into a DOM element. It loads D3 v5 via UNPKG and uses the `select` function from the `d3` import to set the text content of a `div` with the ID `message`. The text originates from a local ES6 module, `myMessage.js`, which exports the string. Styling is applied through an external CSS file, centering the text at a large red font size. The example showcases modular imports and basic DOM manipulation with D3.

AAlex(Zhirui) Yang
74% match
Loading thumbnail…

Hello VizHub

This example demonstrates how a static text message can be rendered on a webpage using D3.js and ES6 modules. It shows a single text element, “Hello VizHub!”, displayed prominently on a dark blue background with white Ubuntu font styling. The page loads D3 v5 from a CDN and uses the `d3.select` API to insert the message into a div, while the message content is defined in a separate module and imported via ES6 `import` syntax. The visualization relies on basic DOM manipulation rather than data binding or complex rendering.

Aa-ydobon
74% match
Loading thumbnail…

Lets make a face with D3.js

This example demonstrates basic D3.js and JavaScript module usage by displaying the text “Hello VizHub!” in a large, centered message. It loads D3 v5 via UNPKG and uses the `select` API to target a `#message` div, setting its text content from a local ES6 module (`myMessage.js`). The SVG element is defined in the HTML, though this specific visualization focuses on the text rendering and module integration rather than drawing shapes. The styles.css file controls the text appearance with CSS.

Ccelyounan
74% match