Skip to main content
Log in
M

muhmdabdollahi@gmail.com

@mhmdabdollahi·7 public vizzes

Loading thumbnail…

Sollewitt repro

This example reproduces a Sol LeWitt wall drawing using the browser’s native JavaScript and the SVG API. It creates an SVG canvas scaled to the full window and appends a series of vertical rectangles. The first rectangle is drawn without an `x` attribute, defaulting to zero, followed by a loop that places an additional 100 rectangles at 20-pixel intervals, each 10 pixels wide and as tall as the viewport. The code comments show a redundant earlier attempt but the final output relies solely on `document.createElementNS` with the `http://www.w3.org/2000/svg` namespace.

Jan 30, 2025
Loading thumbnail…

Fork of Sollewitt repro vertical

This example reworks a Sol LeWitt-inspired wall drawing using the browser’s JavaScript API. It shows a full-window SVG canvas with a single green square rectangle placed at the top-left corner. The code constructs the SVG element and its child rect via `document.createElementNS`, sets their width and height attributes, and appends them to the page body. The visualization focuses on the fundamental process of programmatic SVG generation. A commented-out section hints at a circular mask and layered stripes, but the active code renders only the basic rectangle.

Jan 30, 2025
Loading thumbnail…

SVG fundamentals

This example demonstrates the foundational use of SVG by creating an empty drawing surface and placing a single small rectangle on it. The code creates SVG elements programmatically using the `document.createElementNS` API with the SVG namespace, setting the canvas dimensions to 960 by 500 pixels. A rectangle is then added at coordinates (100, 100) with a width and height of 10 pixels each. This bare-minimum approach, using plain JavaScript without any libraries, illustrates how to construct vector graphics from scratch for later data visualization.

Jan 23, 2025
Loading thumbnail…

Sol Lewitt Repro

This example reproduces the geometric art of Sol LeWitt, presenting a digital interpretation of his rule-based visual compositions. The piece renders a dynamic, generative drawing based on the artist's conceptual instructions, creating an interactive experience that explores the intersection of art and code. Built with vanilla JavaScript and the HTML5 Canvas API, it demonstrates how algorithmic thinking can replicate and reimagine traditional artistic methods.

Jan 21, 2025
Loading thumbnail…

Fork of SVG fundamentals

This example reproduces Sol LeWitt’s wall drawing from a 2021 CT Public article, using raw SVG elements in an HTML page with JavaScript. The code defines a simple static composition, relying on commented-out JavaScript lessons that explore variables, functions, and objects. The SVG canvas is 960×500 pixels, with margin and overflow styles reset for full view. No external libraries are loaded; the drawing depends entirely on the inline `<svg>` markup and the browser’s native rendering. The piece focuses on geometric structure typical of LeWitt’s conceptual art, presented without interactive behavior or data-driven updates.

Jan 20, 2025
Loading thumbnail…

Fork of Responsive Line Chart

This responsive line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentrations over time. The code uses D3’s `scaleTime` and `scaleLinear` for axes, with the `line` generator drawing the trend, while `@curran/responsive-axes` handles label placement and `observeResize` adapts the SVG to the container. A gray inner rectangle highlights the plotting area, and the data comes from the `@curran/keeling-curve-data` package.

Jan 18, 2025
Loading thumbnail…

Fork of Responsive Line Chart

This responsive line chart visualizes the Keeling Curve, plotting atmospheric CO2 concentrations over time. The code uses D3’s `scaleTime` and `scaleLinear` for axes, with the `line` generator drawing the trend, while `@curran/responsive-axes` handles label placement and `observeResize` adapts the SVG to the container. A gray inner rectangle highlights the plotting area, and the data comes from the `@curran/keeling-curve-data` package.

Jan 18, 2025