Z

zolboBatsaikhan

@zolboBatsaikhan·26 public vizzes

Loading thumbnail…

Fork of sbom with name and zoom 1

This interactive visualization displays a hierarchical tree of an SPDX software bill of materials (SBOM), showing package files and their associated checksums. The D3 v5 code uses d3.tree and d3.hierarchy to compute the layout, with nodes colored blue or cyan to distinguish parent from leaf nodes. Users click nodes to collapse or expand branches, with smooth transitions animating the repositioning. Names appear truncated along edges, while hovering over nodes reveals full details in a tooltip. The SVG rendering supports zooming and panning through d3.zoom.

Loading thumbnail…

sbom with name and zoom

This interactive visualization displays a tree diagram representing a software bill of materials (SBOM) for PSReadLine, with nodes labeled by name and supporting zoom functionality. It shows the hierarchical relationships between the document, packages, files, and their checksums. The code loads hierarchical JSON data via `d3.json`, builds the tree layout with `tree().size()` and `hierarchy()`, and draws horizontal links with `linkHorizontal()`. Pan and zoom are implemented using a `zoom()` event that updates the SVG group's transform. All rendering occurs as SVG paths and text elements, with a Playfair Display font for labels.

Loading thumbnail…

Fork of sbom with name and zoom

This interactive visualization displays a hierarchical tree of SPDX software package data, showing the structure of a PowerShell package with its associated files and checksums. Users can click on nodes to expand or collapse branches, with a smooth animated transition that adjusts the tree layout accordingly. The visualization uses D3.js v5 with a custom tree layout algorithm, linkHorizontal connectors for the edges, and a zoom feature that responds to user interaction. The animated transitions between states are implemented using D3's transition system with adjustable durations based on modifier keys.

Loading thumbnail…

Fork of World Countries Tree

This example displays a hierarchical tree visualization of an SPDX software bill of materials, showing the PSReadLine package with its individual files and their corresponding SHA-1 and SHA-256 checksum values. The tree layout is rendered using D3 v5 with SVG elements, connecting nodes with horizontal link paths generated by `linkHorizontal`. Data is loaded from a local JSON file using `json()`, while the hierarchy structure is processed through `hierarchy()` and the tree layout function. The visualization uses a Playfair Display font with a fixed viewport and custom margins.

Loading thumbnail…

Get it right Back & White - JS in HTML

This example shows a minimal web page that embeds D3.js and custom JavaScript in an HTML file, displaying a large centered text message and logging output to the console. The page uses CSS for styling the message text and loads D3 v7 from a CDN via a script tag. The code imports the `select` function from D3 and a custom exported constant from a separate JavaScript module. Everything runs in plain HTML without a framework, demonstrating basic integration of ES modules with a browser environment.

Loading thumbnail…

Sbom Viewer

This visualization displays the hierarchical structure of a Software Bill of Materials (SBOM) as a tree layout, showing package files and their associated SHA-1 and SHA-256 checksums. The example loads hierarchical data from a local JSON file and uses d3.json to parse it, though the current implementation only logs the root node’s name to the console. The SVG container size is dynamically set to match the browser window dimensions using document.body dimensions, with the d3 library version 7.6.1 loaded from a CDN.

Loading thumbnail…

Prac1

This example displays a single blue circle centered in a browser window with the text "Sain Baina uu" positioned above it, accompanied by a hover tooltip that appears when the mouse moves over the circle. Rendered as an SVG using D3 v7, the visualization uses d3.select to append elements, handles mouseover, mousemove, and mouseout events to toggle tooltip visibility, and creates a text label cloned with a white stroke outline for emphasis. The circle and text positions are calculated from window dimensions, with the tooltip styled via absolute positioning.

Loading thumbnail…

Practice

This example displays a set of animated circles moving vertically and changing size in a sine-wave pattern. The visualization is built with D3.js and rendered as an SVG. The code dynamically generates new data points using a custom `makeData` function, and updates the circle positions and radii via the `vizData` function, which uses D3's `selectAll`, `data`, and `join` methods to efficiently update the scene. The animation is driven by a timer that increments a time variable, causing the circular nodes to oscillate smoothly.

Loading thumbnail…

Get it right Back & White - JS in HTML

This example demonstrates the minimal setup required to combine HTML, CSS, and JavaScript with D3.js, rendering a large “Hello HTML!” message centered on the page. The code loads D3 v7 from a CDN, imports the `select` function, and logs a string imported from a separate module. The rendering approach uses a simple HTML `<div>` styled via CSS, with no data visualization or interactive elements, focusing instead on the integration of ES modules and D3 in a plain HTML context.

Loading thumbnail…

Fork of Get it Right in Black & White-D3 Selection Exploration

This example shows a field of animated circles whose positions and radii oscillate sinusoidally, creating a flowing wave-like pattern across the screen. Using D3 v7 with the `select` and `range` modules, the code generates a dataset via `makeData` and updates the SVG through a selection join on `<circle>` elements. A `setInterval` drives a 60-frames-per-second loop, incrementing a time variable that modifies each circle’s `cx`, `cy`, and `r` attributes, producing seamless, continuous motion.

Loading thumbnail…

Get it Right in Black & White-D3 Selection Exploration

Black circles animate in an undulating horizontal line across a black-and-white SVG canvas. Using D3 v7, the visualization demonstrates the selection, enter, update, and exit lifecycle with a compact `.join()` pattern that creates or removes circles based on a fluctuating count. Data is generated live with `d3.range` and trigonometric functions, while `setInterval` drives the animation at about 60 frames per second, adjusting each circle’s x and y positions over time.

Loading thumbnail…

Get it Right in Black & White-JavaScript Arrays

This example demonstrates core JavaScript array methods—including `forEach`, `filter`, `map`, `reduce`, and `sort`—applied to a generated numeric range and object entries. It shows how to transform, aggregate, and order data step by step, with commented examples illustrating each operation. The code uses plain JavaScript for most array manipulations, while the `index.js` variant imports `ascending` from the D3 library to sort objects by key in ascending order. The visualization relies entirely on console output rather than graphical rendering.

Loading thumbnail…

hopefully close to original Full Sol LeWitt reproduction with D3

The visualization reproduces a Sol LeWitt art piece using D3.js, rendering a grid of horizontal and vertical bands that alternate in visibility. Two SVG `<mask>` elements, created via a reusable `renderMask` function, selectively hide or reveal these stripes using symbol shapes—drawn with `d3.symbol` and `d3.symbols`—as the mask pattern. One mask uses inverted fills relative to the other, producing a contrasting interplay of lines and geometric shapes across the viewport. The artwork is generated entirely from code, with no external data source.

Loading thumbnail…

Fork of Fork of Full Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 v7 and SVG. It generates two sets of striped rectangles—horizontal and vertical—layered over each other. The code applies two complementary SVG masks, each containing a row of D3 symbol shapes, to selectively reveal or hide parts of the grid. The masks are created programmatically with the `renderMask` function, which uses `d3.range`, `d3.symbol`, and `d3.symbols` to position the mask shapes across the canvas. The final result creates an intricate, textured interplay between the geometric lines and the symbol cutouts.

Loading thumbnail…

Fork of Full Sol LeWitt reproduction with D3

A grid of alternating black and white horizontal and vertical bars forms a woven pattern, with a circular mask revealing a black star shape on one layer and a white star on the other. The visualization uses a D3 SVG rendering with two masked rectangle groups, each drawn from 100 equally spaced strips. The masks combine a full-screen rect with a `d3.symbol` path of type `symbols[1]`, translated to the center, to create the contrasting star overlays.

Loading thumbnail…

Full Sol LeWitt reproduction with D3

This visualization reproduces a Sol LeWitt art piece, featuring two sets of parallel lines that are masked to create a circular composition. The piece shows vertical and horizontal bands intersecting, with a central circular area where the line pattern is inverted. Built with D3.js, the code uses `range`, `select`, `symbols`, and `symbol` to generate SVG rectangles and a mask, applying the geometric abstraction in a dynamic, full-screen format. The rendering is purely SVG-based, with masks defining the circular interplay of the line grids.

Loading thumbnail…

Fork of Sol LeWitt reproduction with D3

This example reproduces a Sol LeWitt art piece using D3 and SVG. It shows a grid of alternating horizontal and vertical rectangles, with two circular masks creating a central lens effect where the orientation appears to flip. The code uses d3.select, d3.range, and SVG mask elements to overlay black-and-white rects and circles. The artwork fills the entire browser window, with the masks positioned at the center.

Loading thumbnail…

Sol LeWitt reproduction with D3

A full-screen SVG shows a grid of thin horizontal and vertical black lines, masked to reveal a central white circle on a black background. The piece reproduces a Sol LeWitt wall drawing: horizontal bars cross the entire canvas, while vertical bars are visible only outside a centered black circle. Using D3 selections and `range`, the code generates 100 rects for each orientation, then applies two SVG masks—one with a white circle to show the horizontal lines within it, and another with a black circle to hide the vertical lines there. The result creates a subtle interplay of line directions across the circular boundary.

Loading thumbnail…

Pseudo scatter plot

A pseudo scatter plot presents six dark circles of equal size at fixed positions on a white background, suggesting a data distribution without actual plotted points. The visualization uses raw SVG elements within an HTML file, specifically `<circle>` tags with explicit `cx` and `cy` coordinates and a fixed radius of 22, rendered via the browser's SVG support. The layout mimics a scatter plot's visual structure but omits axes or statistical encoding, relying solely on the spatial arrangement of the circles for its effect.

Loading thumbnail…

Fork of Fork of Fork of Sol LeWitt reproduction Mask Inverse

This piece layers horizontal and vertical striped rectangles into a square grid on a full-screen canvas, with a circular mask inverting the pattern at the center. Using raw SVG elements and masks (`mask`, `rect`, `circle`) created via the DOM API, the code defines two complementary masks: one black rectangle with a white circle, the other inverted, so the horizontal bands show inside the circle while vertical bands fill the rest of the space. The work is a generative reproduction of Sol LeWitt’s geometric style, built entirely with JavaScript and no external libraries.

Loading thumbnail…

Fork of Fork of Sol LeWitt reproduction Mask Inverse

This generative SVG artwork is a procedural reproduction of a Sol LeWitt piece. It displays a grid of horizontal and vertical black rectangles against a white background, with a large circular mask in the center that inverts the pattern. The piece shows vertical black lines contained within a white circle, which is created by using an SVG `mask` element to reveal those lines against an otherwise solid field. The code dynamically constructs the layout using the DOM API, creating 100 horizontal rectangles and a series of vertical bars to achieve the geometric composition.

Loading thumbnail…

Fork of Sol LeWitt reproduction Mask

This example reproduces a Sol LeWitt art piece as an interactive SVG visualization. It shows a field of vertical rectangular stripes that are fully visible outside a central circular area, where they are masked out to reveal a blank region. The code uses raw JavaScript and DOM manipulation to construct an SVG `mask` element containing a white background rectangle and a black circle, then applies that mask to 100 overlapping vertical rectangles via the `url(#circle-mask)` reference. The rendering approach is purely procedural, generating shapes directly with `document.createElementNS` without any external data or libraries.

Loading thumbnail…

Sol LeWitt reproduction Vertical

A minimalist web page reproduces a Sol LeWitt-style geometric composition by rendering one hundred thin vertical stripes atop a full-screen SVG canvas, with only the central circular region visible. The visualization uses a white SVG `<circle>` inside a `<mask>` to clip the stripes, creating a circular window that reveals the pattern against a blank background. Built entirely with native Document Object Model (DOM) methods such as `createElementNS` and `setAttribute`, the code programmatically generates each rectangle with fixed dimensions and spacing, driven by window dimensions. The result is a clean, deterministic art piece rather than a data-driven chart.

Loading thumbnail…

Sol LeWitt reproduction

A generative art reproduction of Sol LeWitt’s work displays 100 evenly spaced vertical rectangles filling the entire browser viewport. Each rectangle is 10 pixels wide, with a 10-pixel gap between them, creating a rhythmic striped pattern across the full height of the screen. The code uses raw SVG creation via `document.createElementNS` to build and append the rectangles, without any external libraries. It dynamically reads `window.innerWidth` and `window.innerHeight` to size the canvas, then loops through a fixed count of 100 to place each shape at successive x-coordinates. The piece directly references the artist’s geometric style through a simple, algorithmic rendering process.

Loading thumbnail…

Fork of Pseudo bar chart

Four vertical bars form a simple bar chart with categories A through D, where the bar heights decrease from left to right. Each bar is drawn as a static SVG `rect` element with hardcoded dimensions, and category labels are rendered as `text` elements using the Share Tech font. The chart uses no JavaScript or data binding, relying entirely on hand-coded SVG markup within an HTML page.

Loading thumbnail…

SVG fundamentals

This example demonstrates fundamental SVG shapes rendered directly in a web page, including circles, rectangles, lines, and paths. It shows how to style these elements with attributes like fill, stroke, and stroke-width, as well as how to construct complex path data using commands such as M (move to), L (line), A (arc), Q (quadratic curve), and z (close path). The visualization uses no JavaScript libraries, relying purely on static SVG markup within an HTML document to illustrate basic vector graphics syntax and rendering.