Skip to main content
SimilarExport ZIP
100%

Fork of JavaScript Basics Array Sort

✓ Published1🌍 Public
Ccssergio
Last edited May 25, 2022
Created on May 24, 2022

This example reproduces a Sol LeWitt art piece using an SVG canvas, with 960 by 500 pixel dimensions. The visualization is constructed through D3.js version 7.4.4, using functions like `select` and `range` to generate and manipulate data arrays. The code primarily demonstrates array sorting methods, including custom comparators and D3's `ascending` function, applied to entries with key-value pairs. The rendering approach is purely SVG-based, with the art piece emerging from the programmatic arrangement of visual elements based on sorted data structures.

AI-generated description

A reproduction of a Sol LeWitt art piece.

MIT Licensed

Similar vizzes

Loading thumbnail…

JavaScript Basics Array

This example demonstrates fundamental JavaScript array operations through the D3 library. The code uses `d3.select` and `d3.range` to create an SVG container, though no explicit data is rendered visually. Instead, the example focuses on array manipulation methods including custom range generation, sorting with comparison functions, and console output of results. It reproduces a Sol LeWitt art piece concept while experimenting with array methods like `sort`, `filter`, `forEach`, and `reverse` on hardcoded numeric arrays. The rendering approach uses an SVG element sized 960×500 pixels, with all operations logged to the browser console.

Ccssergio
84% match
Loading thumbnail…

Fork of Fork of JS and d3

This example is a simple reproduction of a Sol LeWitt-inspired drawing, created with plain JavaScript and the SVG DOM API. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across a 960 by 500 pixel canvas, filling the viewport without margins. The code directly manipulates SVG elements via `document.createElementNS` and `setAttribute`, demonstrating a minimal, non-D3 approach to generative art. The static composition highlights the geometric repetition characteristic of LeWitt’s wall drawings.

Ppiekarczvk@gmail.com
80% match
Loading thumbnail…

Fork of Sol LeWitt art reproduction - attempt 2 (JavaScript basics)

This example reproduces a Sol LeWitt art piece using an SVG canvas with a 960x500 viewBox. The code contains commented-out JavaScript tutorials covering basic programming concepts like variables, loops, functions, and object literals. The active script is nearly empty, leaving only the empty SVG element visible on screen, with no additional data or rendering logic implemented yet. The piece relies on the standard SVG API for structure, while the JavaScript groundwork anticipates future geometric drawing commands for the conceptual art reproduction.

Ddsims2157
80% match
Loading thumbnail…

JavaScript Basics

This visualization reproduces a Sol LeWitt art piece using an SVG canvas designed with a 960-by-500 pixel coordinate system. The drawing is generated entirely through JavaScript code that is commented out in the HTML file, with the script containing basic programming examples, such as variable declarations, functions, and object literals. The rendering relies on the raw SVG `<svg>` element and the browser’s JavaScript engine, with no external libraries or data sources; the visual output is determined solely by the geometric arrangement of shapes coded in the script.

Pprospirity
78% match
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.

Mmuhmdabdollahi@gmail.com
78% match
Loading thumbnail…

JS Basics

This visualization reproduces a Sol LeWitt art piece using SVG rendering. The code demonstrates JavaScript fundamentals—variables, objects, loops, and functions—through commented examples, while the active script creates an empty SVG canvas with dimensions of 960 by 500 pixels. The example serves as a teaching tool for basic programming concepts, using vanilla JavaScript to manipulate the SVG element directly.

Mmegan-grannan
77% match
Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 6.6.1, rendering directly to an SVG element. The visualization fills the entire browser window by setting the SVG dimensions to the screen width and height, and begins by drawing a single black circle at a fixed offset. The code imports `select` and `range` from D3, though only `select` is currently used to append the SVG and circle, leaving the artwork's full structure incomplete. The rendering approach relies on basic SVG primitives within an HTML page that hides scrollbars for a clean, full-screen presentation.

Aaissatheprogrammer
77% match
Loading thumbnail…

JS Fundamentals

This example demonstrates core JavaScript array operations implemented by hand, including range generation, filtering, sorting, mapping, and reducing. The code uses D3 v7’s `ascending` comparator within a custom `sort` function to order objects by key, then reduces an array of key-value pairs into a single object. All logic runs in the browser console, producing logged output for each step; the page itself is intentionally blank, with SVG shapes referenced only in the README. The visualization relies purely on native JavaScript methods and D3’s utility functions, with no graphical rendering.

Yyankesswang
77% match