sreenikareddyannam@my.unt.edu

Candy

This example draws a simple candy illustration using SVG elements defined directly in the markup, with D3 v7 loaded for potential data manipulation. It shows a pink wrapper with folded ends, a lighter inner band, and a purple circular center. The shapes—rectangles, lines, and a circle—are static, using attributes like `fill`, `stroke`, and `stroke-width` for styling. No interaction or dynamic data is present; the visualization relies purely on hardcoded coordinates and SVG rendering.

1

This example demonstrates the VizHub V3 Runtime Environment’s "Hello World" template, which uses the `main` function exported from `index.js` to render a simple text string with a fixed font size. It shows how the runtime provides a `container` DIV element with measurable dimensions, and the code sets the container’s inner HTML to display "Hello World!" at a large pixel size. The visualization highlights the platform’s simplified entry point and real-time editing capability via Alt-drag interactive widgets, allowing properties like `fontSize` to change dynamically without a page refresh.

Milkshake

A hand-drawn SVG illustration depicts a chocolate milkshake in a tall glass, complete with a yellow straw and a red cherry on top. The static image uses linear gradients to shade the glass and chocolate contents, along with a drop-shadow filter for depth. Built with plain SVG elements—rectangles, ellipses, and circles—it showcases gradient definitions and filter effects without any JavaScript libraries, relying solely on SVG markup for rendering.

Cookie

Donut

This example shows a chocolate donut with colorful sprinkles drawn on an HTML canvas. The code uses the Canvas 2D API, specifically `getContext('2d')` and `arc()` methods to render two concentric circles for the donut shape. Sprinkles are generated using `Math.random()` to place 30 colored circles at random positions and angles within the donut ring, using a palette of five colors. The donut is static and redrawn once on page load.

Act 6

This example demonstrates how to load D3 via UNPKG and use ES6 modules in a VizHub project. It imports the `select` function from D3 and a custom `message` constant from a local module, then sets the text of a `#message` div to display "Hello VizHub!" The code uses minimal D3 v5 API to bind data to the DOM and render a centered, large-font styled heading, showing basic module integration and DOM manipulation.