aidarshafeev1@gmail.com

@AidarShafeev·8 public vizzes

Fork of HTML Starter

This example shows a scatterplot of the Iris flower dataset, mapping petal length on the x-axis and sepal length on the y-axis. It loads CSV data with `d3.csv`, uses `d3.scaleLinear` and `d3.extent` to set scales, and renders circles as SVG marks. Axes are added with `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window and is built with D3 v7 in a plain HTML page, with no React integration despite the metadata suggesting a fork.

Jan 8, 2024

Loading thumbnail…

D3 practice

An animated wave of circles moves across the screen, with fifteen evenly spaced circles rising and falling in a smooth sinusoidal pattern. Each circle is rendered as an SVG element, with its vertical position recalculated at 60 frames per second using a time-based sine function. The code uses D3’s `select`, `range`, and `join` methods to bind data and update the circle positions, while a `setInterval` drives the animation loop, updating a time variable that shifts the wave phase.

Jan 7, 2024

Loading thumbnail…

Fork of Sol Lewitt Reproduction with D3

This example generates an abstract grid pattern using Sol Lewitt-inspired geometry. It draws horizontal and vertical strips of rectangles, then applies two distinct masks with D3’s `symbol` shapes (including circles, crosses, and diamonds) to selectively reveal or hide portions of the grid. The masks are created with `d3.mask`, one inverted against the other, producing a layered interplay between the symbol silhouettes and the underlying striped composition. The visualization uses D3 v7 selections, `range`, and `join` to construct the SVG elements within a full-window viewport.

Jan 6, 2024

Loading thumbnail…

Fork of Sol LeWitt reproduction

This example reproduces the wall drawing style of Sol LeWitt using only SVG shapes and the native DOM API. It renders one hundred horizontal rectangles, each 10 pixels tall, evenly spaced down the screen, all clipped by a circular mask centered in the viewport. The page creates an SVG element dynamically, appends a mask with a white background and a black circle, then generates the rectangles in a loop without any external libraries. The result is a minimalist geometric pattern that highlights how simple SVG primitives can achieve a refined, artistic composition.

Jan 6, 2024

Loading thumbnail…

Sol LeWitt reproduction

This example demonstrates the basics of SVG shape creation through a minimal script that appends a single rectangle to the document. A JavaScript script dynamically generates an SVG element, sets its width to 960 pixels, and appends a rect element using the standard DOM API (`createElement`, `setAttribute`, `appendChild`). The code uses raw SVG without external libraries, showing how to construct vector graphics programmatically. The page hides overflow and margin, making the shape appear in an otherwise blank canvas, though the rectangle’s height is misspelled as "hight" and remains unset.

Jan 4, 2024

Loading thumbnail…

Art

This example demonstrates a static composition of SVG shapes, including overlapping red and green circles, a diagonal line, and two path elements. The rendering uses raw SVG syntax directly in an HTML document, with inline CSS setting the page margin to zero and hiding overflow. The artwork is generated through explicit coordinate attributes such as `cx`, `cy`, and `d` for paths, and includes a commented-out rectangle to show alternative shapes. The piece explores layering and stroke styling without any interactive or animated behavior.

Jan 4, 2024

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental shapes available in SVG, including circles, rectangles, lines, and paths. It shows how basic attributes such as position, size, fill color, stroke color, and stroke width control each shape’s appearance. The visualization is rendered directly in the browser using inline SVG within an HTML document, with no external libraries or data sources. The code defines static shapes, such as a yellow rectangle with a navy border and a three-point path, to illustrate raw SVG markup and its declarative syntax.

Jan 4, 2024

Loading thumbnail…

Fork of HTML Starter

This example demonstrates a minimal HTML page that uses CSS for styling and JavaScript for interactivity. The page displays a large centered message, "Hello HTML!", with the styling defined in a `<style>` block within the document head. The code relies on standard web technologies—HTML structure, CSS rules for font size and text alignment, and no external JavaScript libraries. It serves as a bare-bones starter template, contrasting with the React-based alternative linked in the README, and shows how a simple static page can be composed without any framework dependencies.

Jan 4, 2024