RubyQianru

@RubyQianru·2 public vizzes

SVG Fundamentals

This example demonstrates the fundamental building blocks of SVG rendering, showing a single circle element positioned within an SVG container using explicit coordinate and radius attributes. The page uses standard HTML and CSS, with the SVG element styled and structured directly in the markup. The circle is rendered by the browser’s native SVG engine, with no JavaScript or external visualization libraries involved. The code highlights how basic SVG shapes can be defined declaratively, serving as a minimal starting point for more complex data visualizations that rely on vector graphics.

Sep 15, 2023

Loading thumbnail…

Fork of Smiley Face Part IV

A smiley face is rendered as a single circle that follows the mouse cursor across an SVG canvas. The visualization uses a React component with the `useState` hook to track the cursor’s `clientX` and `clientY` coordinates on every `mousemove` event, updating the circle’s center position in real time. The circle is drawn with D3 v5’s SVG creation within a React-controlled `<svg>` element, with a fixed radius of 30 pixels and initial placement at the center of a 960×500 viewport.

Sep 13, 2023