MonaYuan (@MonaYuan), VizHub

HTML Cars Report

This example shows a minimal HTML page titled “Cars Report” that renders two static SVG shapes—a black-stroked circle and a green-filled rectangle—positioned within a 980×500 viewport. The page uses inline SVG markup with attributes like `cx`, `cy`, `r`, and `fill` to define the shapes, and includes a separate stylesheet (`styles.css`) that sets a large font size and a `.highlighted` class for red text. The SVG also contains a malformed `<line>` element with unclosed syntax, indicating an incomplete or non-functional visualization. The code does not load external data or use any JavaScript libraries.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates the minimal setup required to render a text message using D3 within the VizHub environment. It loads D3 v5 from UNPKG and displays the string “Hello VizHub!” centered via CSS. The code uses an ES6 module to export the message string, which is then imported and appended to the DOM using D3’s selection API. The page consists of an index.html file, a local stylesheet, and a separate JavaScript module to illustrate modular code organization.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load D3 from a CDN and use ES6 module imports to build a minimal visualization. It renders a single div element that displays the text “Hello VizHub!” in large, centered type via the accompanying stylesheet. The code imports the `select` function from D3 v5 and a local `message` constant from an ES6 module, then uses `select('#message').text(message)` to populate the page. This serves as a simple template for combining D3 with modular JavaScript in a VizHub project.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to set up a basic D3.js visualization project within the VizHub framework. The page displays the text “Fork of Hello VizHub” centered on a plain white background using CSS styling. The HTML file loads D3 version 5.16 from a CDN and connects a local stylesheet and bundled JavaScript file. The simple structure showcases how to import D3 and local ES6 modules.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load D3 from a CDN and use ES6 module imports to build a minimal visualization. It renders a single div element that displays the text “Hello VizHub!” in large, centered type via the accompanying stylesheet. The code imports the `select` function from D3 v5 and a local `message` constant from an ES6 module, then uses `select('#message').text(message)` to populate the page. This serves as a simple template for combining D3 with modular JavaScript in a VizHub project.

Dec 23, 2021

Loading thumbnail…

Fork of Fork of Hello VizHub

This example demonstrates a minimal D3.js usage in which the text of an HTML element is replaced with a custom message. It shows how to load D3 from a CDN, import the `select` function from D3, and call it to set the text content of a `div`, alongside a locally-defined ES6 module, `myMessage.js`, that exports the string. The rendering relies on a simple `index.html` structure and a CSS style that centers and enlarges the text.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load D3 from a CDN and use ES6 module imports to build a minimal visualization. It renders a single div element that displays the text “Hello VizHub!” in large, centered type via the accompanying stylesheet. The code imports the `select` function from D3 v5 and a local `message` constant from an ES6 module, then uses `select('#message').text(message)` to populate the page. This serves as a simple template for combining D3 with modular JavaScript in a VizHub project.

Dec 23, 2021

Loading thumbnail…

Untitled

This example demonstrates a data visualization built with D3, showcasing modular ES6 imports and dynamic rendering directly in the browser. It loads D3 v3 from UNPKG and uses `d3.csv` to parse an external dataset, then renders the results using `d3.select` and `d3.scaleLinear` for mapping data values to visual properties. The visualization updates interactively, with transitions applied via `d3.transition` to smoothly animate changes in the data-driven elements, illustrating a complete workflow from data ingestion to interactive display.

Dec 23, 2021

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates how to load D3 from a CDN and use ES6 module imports to build a minimal visualization. It renders a single div element that displays the text “Hello VizHub!” in large, centered type via the accompanying stylesheet. The code imports the `select` function from D3 v5 and a local `message` constant from an ES6 module, then uses `select('#message').text(message)` to populate the page. This serves as a simple template for combining D3 with modular JavaScript in a VizHub project.

Dec 23, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a single centered message, “Hello HTML!”, as large text on a blank page. It demonstrates a minimal setup for an HTML page using CSS for styling and JavaScript for potential interactivity. The code uses the standard `index.html` file structure with an embedded `<style>` block and a `<div>` element. No external libraries or data sources are involved, and the display is static without any dynamic behavior.

Dec 23, 2021

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.

Dec 23, 2021

Loading thumbnail…

Cars Report

This example demonstrates a minimal VizHub project that displays a large, centered “Hello VizHub!” message. It shows how to load D3.js from a CDN, import API functions like `select` using ES6 module syntax, and organize code across local modules such as `myMessage.js`. The page uses `index.html` to link a stylesheet and bundle, with the text styled via CSS. The rendering relies on D3’s `select` method to set the text content of an HTML div, and the data originates from a hardcoded string constant.

Dec 23, 2021

Loading thumbnail…

Fork of HTML Starter

This example renders a single centered message, “Hello HTML!”, as large text on a blank page. It demonstrates a minimal setup for an HTML page using CSS for styling and JavaScript for potential interactivity. The code uses the standard `index.html` file structure with an embedded `<style>` block and a `<div>` element. No external libraries or data sources are involved, and the display is static without any dynamic behavior.

Dec 23, 2021

Loading thumbnail…

playaround

This visualization shows a yellow circle centered on a 960 by 500 SVG canvas, flanked by two smaller black circles on either side. The large circle uses a yellow fill with a black stroke, while the smaller circles have no fill. The code directly defines the SVG elements using circle tags, with explicit pixel coordinates for cx and cy attributes and fixed radius values. This simple arrangement relies on basic SVG rendering without any JavaScript libraries or data sources.

Dec 20, 2021