I

IgorGorin00

@IgorGorin00·35 public vizzes

Loading thumbnail…

heatmap_cities

This example visualizes screen dimensions by rendering the current browser width and height as a large, heatmap-like typographic display. It shows a minimal grid of numeric cell blocks that update based on window size, with the current viewport measurements logged to the console. The code uses D3 v7’s `select` and `range` functions to manage the DOM and generate table structures, while dynamically reading `window.innerWidth` and `window.innerHeight` to populate the layout. The rendering approach relies on raw JavaScript and D3’s data-binding to build the visualization in a blank HTML body.

Loading thumbnail…

synth_vizualization_attempt_bar

A bar chart displays gross domestic product values for eleven Russian regions, ranking Special Economic Zone impact from a synthetic control study. Each bar animates upward from zero with a two-second transition and staggered delays, highlighting regional differences in economic outcomes. The visualization uses d3.v7's `scaleBand`, `scaleLinear`, axis generators, and `transition` methods, rendered as SVG with a dark purple background and pink gridlines. Data originates from a GitHub repository comparing special economic zones across countries using synthetic control methodology.

Loading thumbnail…

synth_vizualization_attempt_2

This visualization compares observed and synthetic economic indicator trends for Andhra Pradesh, using a 2x2 grid of line charts for GDP, direct investments, industry production, and fixed assets. A dashed vertical line marks the 2007 SEZ creation, while red synthetic and blue observed lines draw with animated stroke-dasharray transitions via `transition.attrTween` from data in `data.js`. D3.v7 scales (`scaleBand`, `scaleLinear`) and axes (from `graphLayout.js`) render the SVG, with an animated legend below.

Loading thumbnail…

synth_vizualization_attempt

Two animated line charts compare observed and synthetic GDP for Andhra Pradesh from 1990 to 2021, with a dashed vertical line marking the 2007 treatment year. The orange observed series and teal synthetic series draw themselves over two seconds using `transition.attrTween` with `stroke-dasharray` in D3 v7. An SVG grid, axes, and title appear with fade-in transitions. Data comes from a master's thesis on synthetic control methodology for special economic zones.

Loading thumbnail…

JS in HTML

This example shows a minimal HTML page that combines CSS and JavaScript to display a static message. The page renders the text “Hello HTML!” in large, centered typography using a CSS class, while an accompanying JavaScript module logs a greeting to the console. It imports and exports values across `index.js`, `something.js`, and `thing.js` to demonstrate ES module syntax. The rendering approach relies on plain DOM elements styled with CSS, with no external libraries or data sources involved.

Loading thumbnail…

some_work_with_animation_2

This example generates 100 circles from a sine-wave-derived dataset and animates them with a three-second d3 transition. The circles, initially positioned at the top-left, move to staggered vertical positions based on the sine values while receiving random green-blue fill colors and random radii via d3’s `selectAll`, `data` join, and `transition` methods. The SVG rendering fills the browser window with margins, and randomization is applied inline using `Math.random` for color and size. The code relies on D3 v7’s range and transition APIs.

Loading thumbnail…

Reproduction of A. Grigoryev

A 3x3 grid of SVG panels reproduces Aleksandr Grigoryev's portrait using D3. The outer eight cells render triangular polygons from generated coordinate data, while the central cell applies a mask defined by a rotated square to reveal a stylized geometric composition. D3's `select`, `append`, and `join` APIs construct the SVG elements, with `symbol` and `symbols` from the D3 library drawing the central path. The code programmatically computes polygon vertices based on grid dimensions, and the CSS grid container positions the cells to match the original image's aspect ratio.

Loading thumbnail…

reproduction of something #4

This example builds an abstract geometric composition from overlapping polygon layers created with D3.js and rendered as SVG. Two sets of polygons are generated programmatically using data arrays for coordinates and color palettes, then appended to a single SVG container. The visualization integrates D3’s `range` for iteration, `symbol` for diamond outlines, and `select` for DOM manipulation. It displays a central square bisected by diagonal lines, surrounded by nested, rotated shapes in a warm terracotta-to-dark color scheme, all laid out responsively based on the viewport’s smaller dimension.

Loading thumbnail…

reproduction of somethind 5th cell

This visualization generates a geometric composition using D3.js SVG rendering. Black triangles fan outward from a central white rotated square symbol, created by masking a black rectangle with a diamond-shaped cutout using `d3.symbol` and `d3.mask`. The triangles are computed programmatically via `linspace` and polygon points, forming symmetric radial patterns around the center. The result is a stark, mask-based interplay of light and dark shapes.

Loading thumbnail…

Fork of reproduction of somethind 4th cell

This example displays a geometric composition of triangular polygons and a central symbol, created using D3.js APIs such as `symbol`, `select`, and `attr`. The visualization renders SVG polygons against a masked region, where a rotated path shape defines the visible area. The mask includes a white rectangle and a black symbol, which is also overlaid directly on the canvas. The code generates data procedurally based on window dimensions, demonstrating a generative art approach within a React framework using the D3 library version 7.8.4.

Loading thumbnail…

reproduction of somethind 2nd cell

This example generates a geometric composition of triangles that fill the browser window. Polygons are drawn in two distinct groups, radiating from the top corners downward to create an abstract, layered pattern. The visualization is built with React and rendered as SVG, using D3.js functions such as `select` and `join` to append polygons dynamically. The polygon coordinates are computed procedurally based on the window dimensions, dividing the width and height into incremental steps.

Loading thumbnail…

reproduction of somethind

This visualization reproduces a geometric pattern composed of triangular polygons arranged in two overlapping fan-like sets. The polygons radiate from the top-right corner across the full width and height of the viewport, creating a layered lattice of intersecting shapes outlined in black. The rendering uses React with D3’s `select` and `join` methods to bind array data to SVG `polygon` elements, where each polygon’s points are generated programmatically by the `getData1` function using viewport dimensions. The example demonstrates a pure SVG approach with no external data sources, relying solely on computed coordinates.

Loading thumbnail…

reproduction of something

This visualization reproduces an abstract geometric composition across a three-by-three grid. Each of the four populated cells displays a distinct arrangement of filled and outlined polygons, creating triangular patterns that vary in orientation and density. The code generates these shapes procedurally using JavaScript and the D3 library, computing polygon coordinates through loops and rendering them as SVG elements with the `selectAll` and `join` methods. The grid layout and styling are defined in CSS, with the react framework managing the overall structure.

Loading thumbnail…

Full Final of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, generating a rhythmic pattern of alternating horizontal and vertical line segments across a wide, low canvas. The visualization uses D3’s `symbols` and `symbol` to map geometric shapes into SVG masks, which selectively reveal or hide grid lines within seven vertical panels. The code computes layout parameters from `window.innerWidth`, renders SVG `rect` elements for the lines, and applies four masks with inverted fills to create the final intersecting composition.

Loading thumbnail…

Fork of Fork of JS data joins

A dynamic animation of circles shows a sinusoidal wave pattern, with each circle's vertical position and radius oscillating over time. The visualization builds on D3.js, using the `select` API to append an SVG canvas and the `.join()` method to efficiently update circle elements each frame. Data is generated procedurally in `makeData` with a sine-based formula, driven by a 60 FPS `setInterval` timer that increments a time variable. The visual result is a smooth, continuous motion of scaling and bobbing circles across the screen.

Loading thumbnail…

Fork of JS data joins

A dynamic swarm of circles continuously enters and exits an SVG canvas, with each circle oscillating vertically and changing radius based on a sine wave, creating a pulsing, fluid motion. This animation demonstrates D3 data joins, where the `selection.data()` method binds an array of circle objects to the SVG elements, and the `.join()` method efficiently adds, removes, and updates them. The data originates from custom functions `makeData` and `vizData`, which generate coordinates and radii from the `d3` library, and `setInterval` drives the 60fps loop.

Loading thumbnail…

JS arrays

A wave of circles moves across the screen, oscillating vertically in a sine-like pattern as their count fluctuates over time. The animation uses D3’s data join to update SVG circle elements on a 60-frame-per-second interval, with `selectAll`, `data`, and `join` binding new arrays generated from `range` and trigonometric functions. The number of circles changes dynamically based on a time variable, while each circle’s position is recalculated from its index and the current time step.

Loading thumbnail…

Something with D3

This example uses D3’s `line` generator to draw 40 random black polylines, each with seven vertices, on an SVG canvas sized to the browser window. A radial gradient defined in `<defs>` fills the background with a smooth transition from grey to dark grey. The code generates coordinates using `Math.random()` and appends each path with a 2-pixel stroke.

Loading thumbnail…

Fork of Fork of Full of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using D3 v7, rendering two sets of overlapping horizontal and vertical stripes on an SVG canvas. The stripes are filtered through mask elements that reveal different symbol glyphs—circles, crosses, and other d3.symbol shapes—positioned along the center. The code uses d3.select, d3.range, and d3.symbol to generate the paths, with masks applied via SVG attributes. The artwork alternates mask inversion to create contrasting positive and negative space across the full window dimensions.

Loading thumbnail…

Fork of Full of Sol LeWitt Reproduction with D3

A D3.js reproduction of a Sol LeWitt art piece renders a grid of thin horizontal and vertical rectangles across the full browser window. The code uses `d3.range()` and `d3.select` to generate 100 rows and columns, then applies two SVG masks to shape the overlapping lines. Each mask contains a large `d3.symbol` with a star shape, defined via `symbol(symbols[1], 100000)`, which cuts a circular diamond pattern out of the otherwise regular grid. The masked rectangles create a layered visual where lines appear through the star-shaped holes, demonstrating SVG mask composition with D3 selections.

Loading thumbnail…

Full of Sol LeWitt Reproduction with D3

This example renders a generative grid of thin horizontal and vertical rectangles that form a woven, screen-like texture across the full browser window. A large diamond-shaped hole and a circular cutout are created using two SVG masks, revealing the underlying white background. The piece reproduces a Sol LeWitt wall drawing using D3’s selection and data-join methods, along with `symbol`, `symbols`, and `range` to define the geometry. The layout responds dynamically to the viewport’s dimensions, and the composition relies on alternating white and default black fills for contrast.

Loading thumbnail…

Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using two overlapping grids of thin horizontal and vertical rectangles. The horizontal grid is masked to reveal a circular window, while the vertical grid uses an inverted mask, creating a contrasting interplay of lines within and around the central circle. The visualization is rendered as an SVG using D3 v7’s `select`, `range`, and `join` methods, with `mask` elements defining the circular cutouts over a full-screen canvas.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-inspired geometric composition using SVG and D3. It displays a grid of 100 horizontal and vertical bars, each 10 pixels thick, layered over one another. A circular mask isolates a portion of the grid, creating an interplay between the two orientations. The code uses `d3.select` and `d3.range` to generate the rectangle elements, with two masks (`circle-mask` and `circle-mask-2`) defining the visible region. The rendering approach relies on SVG attributes for positioning and masks, with the canvas size set to the full window dimensions.

Loading thumbnail…

Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 7.8.2, rendering to an SVG canvas that fills the browser window. The code constructs an array of 100 rectangle marks, each intended to span the full width with a specific height and a circular mask, though the current implementation leaves the mark objects empty. It demonstrates data binding through `selectAll` and `join`, applying positional and masking attributes to each rect. The rendering approach relies on SVG elements and the `d3.select` API.

Loading thumbnail…

Sol LeWitt reporoduction #3

This generative art piece reproduces a Sol LeWitt drawing as a grid of animated lines. A central square is divided into quadrants, each filled with parallel line segments that smoothly cycle their stroke color through black to a distinct hue (yellow, cyan, red, green) and back. The piece uses the raw DOM API to construct SVG elements, creating the lines via `path` nodes and animating their `stroke` attribute with nested `animate` elements. The line positions are computed mathematically using custom `getVals` and `getLines` functions to fill each quadrant's specific pattern.

Loading thumbnail…

Sol LeWitt reproductin 2

This example reproduces a geometric artwork by Sol LeWitt using SVG masks to create a triangular region filled with alternating black and white stripes. The visualization shows a large triangle centered on the screen, composed of vertical white bars crossing over it and horizontal black bars elsewhere. The code generates SVG elements dynamically via the DOM API, defining two masks—one for the triangle’s interior and one for its exterior—to control where each stripe set is visible. The result is a crisp, tiled pattern that fills the entire viewport.

Loading thumbnail…

Sol LeWitt reproduction with animation

This example reproduces a Sol LeWitt-inspired geometric composition using raw SVG and JavaScript, with no external libraries. It renders a 500x500 canvas containing a grid of 100 animated horizontal rectangles that cycle between yellow and cyan, overlaid with four large triangles positioned at the center, top-left, top-right, and bottom. Each triangle uses a distinct solid color—black, red, blue, and green—and is created via SVG `polygon` elements. The code demonstrates DOM manipulation through `document.createElementNS` and SVG’s native `animate` element for continuous color transitions.

Loading thumbnail…

Sol LeWitt Reproduction final

This visualization reproduces a Sol LeWitt art piece using two intersecting sets of striped rectangles. A central circular mask reveals horizontal bands, while an inverse mask displays vertical bands, creating a crosshatched pattern that changes at the circle’s boundary. The code builds the SVG entirely with JavaScript’s `createElementNS`, using `<rect>` elements and `<mask>` definitions. No external libraries are used; the artwork is generated procedurally with 100 horizontal and 100 vertical strips.

Loading thumbnail…

Sol LeWitt Reproduction Vertical

A vertical Sol LeWitt reproduction renders 100 horizontal stripes, each 10 pixels tall, clipped by a circular mask centered on the screen. A second set of 100 vertical stripes, also 10 pixels wide, overlays the horizontal ones without masking. The piece uses plain SVG created via the Document Object Model (`document.createElementNS`), with a `<mask>` element and a white circle to define the visible circular region. The page fills the browser window, with stripes spaced 20 pixels apart, producing the grid-like optical effect characteristic of LeWitt’s wall drawings.

Loading thumbnail…

Sol LeWitt Reproduction

This reproduction of a Sol LeWitt art piece displays a series of vertical black bars evenly spaced across the full height of the browser window. The visualization is generated entirely with the raw SVG API, creating 100 rectangles via `document.createElementNS` and appending them to an SVG element that fills the viewport. Each rectangle is positioned at a fixed interval of 20 pixels, with a width of 10 pixels, producing a rhythmic pattern that mirrors LeWitt’s minimalist geometric style. The code uses no external libraries, relying solely on native browser SVG methods.

Loading thumbnail…

JS basics

This example reproduces a Sol LeWitt art piece using an SVG canvas and plain JavaScript. The code defines a `person` function that returns an object with `first` and `last` properties, then logs the result for "John Doe" to the console. The page contains an empty SVG element with a fixed width and height, while commented-out lines show basic JavaScript concepts like variables, loops, and arrow functions. The visualization itself is not generated, serving only as the static canvas for the art reproduction.

Loading thumbnail…

Pseudo bar chart

A pseudo bar chart displays four labeled bars (A–D) as plain SVG rectangles with varying widths, suggesting categorical values without using axes or scales. The first bar animates its fill color cycling from red to blue and back over a 10-second loop using SVG’s `<animate>` element. Rendered in an HTML page with inline SVG, the chart employs the Share Tech font and fixed viewport dimensions of 960 by 500 pixels. The bars are static except for the color animation, and no external charting library is used.

Loading thumbnail…

svg with animations

An SVG landscape with animated sky gradients and a drifting sun demonstrates declarative animation within SVG markup. The scene layers two mountain-style paths filled with linear gradients over a radial gradient sky backdrop. CSS and native SVG `<animate>` elements cycle stop-color values over 30 seconds, shifting between aliceblue and steelblue for the landmasses and transitioning the sky to indigo, while the sun’s `cy` attribute oscillates vertically. The React framework hosts the raw SVG, though no JavaScript libraries drive the motion, relying entirely on built-in SVG animation APIs.

Loading thumbnail…

cvg with css

This example shows a single red SVG rectangle that transitions to yellow and expands its stroke when hovered over, using CSS transitions. The page is a bare minimum HTML document with inline styles, demonstrating how CSS `transition` properties animate changes to `fill` and `stroke-width`. A `rect` element within an SVG canvas responds to `:hover`, triggering a three-second all-property transition that alters its appearance. The code does not rely on JavaScript libraries or data sources, only native CSS and SVG markup.

Loading thumbnail…

SVG fundametnals

This example demonstrates fundamental SVG shapes and their styling options, including circles, rectangles, lines, and paths, all rendered on a 1000x1000 canvas. It shows how to set basic attributes such as position, size, fill color, stroke color, and stroke width, with examples like a blue circle, a yellow rectangle with a navy border, and green diagonal lines. The visualization uses plain SVG markup within an HTML file, with shapes defined directly in the index document rather than through any JavaScript library or framework.