Anna Arias-Duart

@annariasdu·3 public vizzes

Exercise 1: SVG Fundamentals

This visualization shows a field of one hundred orange circles with a dotted timeline marking dates from October 2023 to October 2024. Each circle fades from full to zero opacity over five seconds using SVG `animate` elements. The code generates non-overlapping circle positions through random sampling and overlap detection, while the timeline uses SVG circle elements as dots and text labels for month ticks. The rendering relies entirely on native SVG APIs and JavaScript math.

Oct 18, 2024

Loading thumbnail…

SVG fundamentals

This example demonstrates the use of SVG fundamentals by rendering a circle and an ellipse directly in an HTML page, styled with CSS and JavaScript. It showcases how SVG elements like `<circle>` and `<ellipse>` are drawn using the `viewBox`, `cx`, `cy`, `r`, `rx`, and `ry` attributes, with inline styles defining stroke and fill colors. The code uses no external libraries, relying solely on native SVG, CSS, and JavaScript to illustrate basic vector graphics in a browser.

Oct 18, 2024

Loading thumbnail…

SVG Fundamentals

This example introduces the VizHub V3 runtime environment with a minimal "Hello World" SVG rendering. The code exports a `main` function that receives a container DIV, whose measured dimensions are used to place a styled text element. An interactive widget allows real-time adjustment of the font size by Alt-dragging the numeric value, demonstrating the platform's continuous hot reloading capability. This serves as a foundational template for building interactive data visualizations within the VizHub ecosystem.

Oct 18, 2024