chiiii-beginner

@chiiii-beginner·3 public vizzes

practice

This example creates a simple bar chart with D3.js v6, rendering a single black rectangle onto an SVG canvas. The chart positions the rectangle at a fixed x-coordinate of 10 and y-coordinate of 20, with a width of 10 pixels and a height of 300 pixels. The code uses D3's `select` function to append the SVG element to the document body, and sets the SVG dimensions to match the browser window’s width and height. The visualization serves as a minimal practice exercise, demonstrating basic SVG shape creation and attribute manipulation without any data binding.

Jul 21, 2023

Loading thumbnail…

bar chart practice

This example creates an abstract geometric composition using D3.js within a React project. It draws 100 horizontal and vertical bars across the full screen, then applies two distinct circular masks to create cross-shaped and bordered effects. The SVG rendering uses D3’s `select`, `range`, and `join` APIs to generate the rectangles, while two custom masks—one with a black background and white circle, another inverted—produce the visual contrast against the dark background.

Jul 18, 2023

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG shape rendering within a static HTML page, showing circles, rectangles, lines, and paths with various fill colors, strokes, and stroke widths. The code uses raw SVG elements authored directly in the markup, with no external libraries or JavaScript logic. Styling is applied inline via SVG attributes such as `fill`, `stroke`, and `stroke-width`. The rendering approach is purely declarative SVG, providing a minimal introduction to vector graphics structure without interactive features or data binding.

Apr 6, 2023