sz2036

@sz2036·6 public vizzes

Untitled

This interactive example demonstrates the k-means clustering algorithm on a one-dimensional dataset of ten random points. Users click an "Iteration Step" button to advance the algorithm, which reassigns each point to its nearest centroid and recalculates centroid positions. The visualization uses D3 v7 with an SVG rendering, where points are colored by cluster assignment (blue, green, orange) and larger gray-stroked circles represent centroids. The code employs d3.scaleLinear to map data values to x-coordinates, and point assignment uses absolute distance calculations to update cluster memberships.

Jan 31, 2023

Loading thumbnail…

Pseudo Bar Chart

A pseudo bar chart displays categorical data as horizontal bars with varying widths to imply values. Each bar is drawn as an SVG `<rect>` element, with a dark background and distinct fill colors including gold, green, white, maroon, and a blank entry. The chart renders entirely through static SVG markup, without any data-binding or interaction libraries, and uses the Aboreto font for category labels (A through E) via Google Fonts. The code relies solely on native SVG elements and CSS transitions for styling, presenting a minimal, non-dynamic visualization.

Jan 31, 2023

Loading thumbnail…

My Example Sol lewitt

This example recreates a Sol LeWitt wall drawing in SVG. The piece shows a grid of geometric shapes, using a minimal black-and-white palette to echo the artist's instructional style. The code uses raw SVG elements within a 960 by 500 canvas, generated without external libraries. The rendering directly implements the drawing's systematic, rule-based composition, using only the built-in SVG API.

Jan 28, 2023

Loading thumbnail…

Example

This example demonstrates a static composition of basic geometric shapes rendered as SVG, including green, blue, and red circles, a black-bordered rectangle, a thick navy line, and a single path. The visualization uses raw SVG elements defined directly in the HTML, without any JavaScript libraries or data-binding frameworks. CSS applies a 3000-millisecond transition to the rectangles’ stroke properties, though no animated changes are triggered dynamically. The layout is fixed within a 960-by-500 viewport, with a large margin around the canvas, emphasizing the simple arrangement of shapes over data-driven content.

Jan 28, 2023

Loading thumbnail…

SVG Dynamic landscape

This SVG scene shows an abstract mountain landscape, where a sun moves vertically behind layered terrain, and animated gradients shift the sky and hills through a day-night cycle. The rendering is built entirely with native SVG elements and animations, using `radialGradient` and `linearGradient` definitions to color the sky and landmasses. A `circle` element animates its `cy` attribute to simulate the sun rising and setting, while `<animate>` tags cycle the stop colors of the sky and foreground gradients over a 15-second loop, creating a dynamic, ambient visual without external libraries.

Jan 28, 2023

Loading thumbnail…

SVG fundamentals

This example demonstrates three square elements arranged in a row, alternating between green and white fills, each outlined with a black stroke. The SVG markup defines each rectangle explicitly with x and y coordinates, width and height attributes, and fill colors, while CSS applies a 10-pixel black stroke and a three-second transition on all properties. The visualization uses raw SVG elements within an HTML page, with the body margin set to 150 pixels and overflow hidden, showcasing fundamental vector graphics construction and styling.

Jan 28, 2023