Skip to main content
Log in
A

abbasoveli@gmail.com

@AliAbbasov·5 public vizzes

Loading thumbnail…

Fork of Circles with D3

This example demonstrates seven semi-transparent circles scattered across a light green background, each positioned with distinct coordinates, radii, and vibrant fill colors. The visualization uses D3.js version 7.8.5 to create and render circles as SVG elements. The code employs D3's data-join pattern, using `selectAll`, `data`, and `join` to bind an array of circle objects to SVG elements, with attributes like `cx`, `cy`, `r`, and `fill` set through chained methods.

Mar 3, 2025
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment, a blank slate starting point for creating visualizations. The code exports a `main` function that renders a simple "Hello World!" message using inline HTML and CSS in a container element. It showcases the platform's hot reloading feature, where holding the Alt key and dragging a number in the editor immediately updates the font size. The example uses plain JavaScript with DOM manipulation to display the text.

Mar 3, 2025
Loading thumbnail…

Fork of Blank Slate with Hot Reloading

This example demonstrates the VizHub V3 Runtime Environment, a blank slate starting point for creating visualizations. The code exports a `main` function that renders a simple "Hello World!" message using inline HTML and CSS in a container element. It showcases the platform's hot reloading feature, where holding the Alt key and dragging a number in the editor immediately updates the font size. The example uses plain JavaScript with DOM manipulation to display the text.

Mar 3, 2025
Loading thumbnail…

Fork of Circles with D3

This example displays overlapping circles of various sizes and neon colors on a soft green background, rendered as an SVG visualization. The circles are positioned at fixed coordinates with specific radii and colors defined in a data array. The code uses D3 v7 with `selectAll`, `data`, and `join` to bind the array of circle objects to SVG `circle` elements, then sets each circle's `cx`, `cy`, `r`, and `fill` attributes alongside a uniform 0.708 opacity value.

Mar 3, 2025
Loading thumbnail…

Fork of Shapes and Colors with SVG and CSS

This example demonstrates basic SVG shapes and styling using raw SVG elements and CSS. It shows circles, rectangles, lines, and a path, with fill colors, stroke properties, and transform groups. The code uses SVG’s native `<circle>`, `<rect>`, `<line>`, and `<path>` elements, with a `<g>` tag applying translations and scaling. CSS classes such as `.lines` control stroke width and color, including `stroke-linejoin` and `stroke-linecap` for path rendering. The visualization is entirely markup and stylesheet based, requiring no external JavaScript libraries.

Mar 3, 2025