shayan yadegaridehkordi

@shayanyadegari·3 public vizzes

Fork of Sol LeWitt Reproduction with D3

This visualization reproduces a Sol LeWitt art piece using D3.js, drawing 100 horizontal and vertical striped rectangles across the full viewport. The code applies two SVG masks—a circle-mask and a circle-mask-2—to show the grid pattern only within circular regions at the center of the canvas, while the outer areas remain blank. Built with D3’s `select`, `range`, and chained `join('rect')` operations, it renders with SVG and uses the `append('mask')` method to create the overlapping circular reveals.

Oct 17, 2024

Loading thumbnail…

1

A single red circle is drawn inside an SVG element on a bare-bones HTML page, demonstrating the foundational relationship between CSS, JavaScript, and SVG rendering. The circle is positioned at coordinates (50, 50) with a radius of 40, and its fill color is set to red via a CSS rule that targets all SVG elements. This example uses plain HTML and inline CSS, with no JavaScript or external libraries, serving as a minimal showcase of static vector graphics in the browser.

Oct 17, 2024

Loading thumbnail…

first fork

This example visualizes the structure of a hierarchical dataset as a force-directed network, where connected nodes form a branching tree-like layout. A first fork appears early in the graph, dividing the data into two distinct clusters. The visualization uses d3.forceSimulation to compute node positions and d3.forceLink for edge tension, rendering the nodes and links as SVG elements on a blank HTML canvas. The data source is embedded directly in the JavaScript code as an array of node and link objects.

Oct 17, 2024