samyuktha0750@gmail.com

@Samyuktha75·4 public vizzes

Fork of Circles with D3

This example shows a collection of seven colorful circles with varying radii and opacity, arranged on a light green background. The visualization is built using D3.js, where the code creates an SVG element and binds an array of circle objects using the data join pattern with `selectAll`, `data`, and `join`. Each circle’s `cx`, `cy`, `r`, `fill`, and `opacity` attributes are set via D3’s chained `.attr` methods, deriving values directly from the data array. The circles overlap to create a playful, abstract composition.

Aug 12, 2024

Loading thumbnail…

Fork of Circles with D3

This example shows a collection of colored circles arranged on a mint-green background, each with a specified position, radius, and fill color. The visualization uses the D3.js library’s data join pattern to map an array of circle attributes to SVG `<circle>` elements. The code employs `select`, `selectAll`, and `attr` methods to set the SVG canvas size, circle coordinates (`cx`, `cy`), radius (`r`), and fill, with a fixed opacity value. The data is hard-coded in an array, demonstrating a data-driven approach to rendering shapes.

Aug 12, 2024

Loading thumbnail…

sample

This example demonstrates the “Hello World” starting point for the VizHub V3 runtime, rendering a single styled text message inside a container element. It shows how the main function receives a container and directly sets its innerHTML to display the output. The code uses core DOM manipulation, assigning a font-size style via a JavaScript template literal. Notably, the numeric font size is designed for interactive adjustment through Alt-drag editing, which is a feature of the VizHub environment for immediate visual feedback.

Aug 12, 2024

Loading thumbnail…

sample

This example demonstrates the initial rendering of a "Hello World" message using VizHub V3's runtime environment. The code exports a `main` function that accepts a `container` DIV, directly setting its inner HTML with a styled text element. An integer variable controls the font size, enabling real-time adjustment through interactive Alt-drag widgets in the editor. This approach highlights the platform's simplified entry point and hot-reloading capabilities.

Aug 12, 2024