K

khaledakanan@gmail.com

@khaledkanan·20 public vizzes

Loading thumbnail…

JS in HTML

This example demonstrates embedding D3.js directly within an HTML page, displaying a large “Hello HTML!” message styled with CSS. The code imports `select` from D3 and ES6 modules from separate JavaScript files, logging composed strings and the imported function to the console. It uses D3 v6 loaded via a CDN, alongside a bundled local script, showing how to structure small multi-file projects with modular imports and exports. The visualization itself is static, focusing on setup and module wiring rather than interactive data rendering.

Loading thumbnail…

D3 Selection Exploration

Fifteen circles oscillate vertically along a sine wave, their radii pulsing in a related rhythm as time advances. The animation runs continuously, with the wave’s speed steadily increasing. This example demonstrates D3’s selection and join API, using `select('body').append('svg')` to build the scene, `svg.selectAll('circle').data(data).join('circle')` to update circles, and a similar path join to draw connecting lines between adjacent points. The data is generated procedurally with `makeData`, computing x positions from a fixed spacing and y positions from `Math.sin`.

Loading thumbnail…

mesmerisingCircle sine wave

A grid of 15 circles undulates vertically in a sine wave pattern, their radii pulsing in a related but offset rhythm. The animation runs on a timer, incrementing a time variable that shifts each circle’s y-position and radius via the sine function. Built with D3.js 6.6.2, it uses the `select` and `range` APIs to create and update SVG circles, adjusting `cx`, `cy`, and `r` attributes per frame.

Loading thumbnail…

D3 Selection Exploration

This example demonstrates JavaScript array manipulation and data transformations using D3 v6. The code creates ranges, generates random numbers, and maps array elements to objects with computed properties like squares and triples. It visualizes sorting operations with `array.sort` and the `ascending` comparator from d3, alongside a `reduce` function that accumulates successive sums. The example also exercises nested random number generation and logs results to the console, illustrating how D3 utilities can combine with native JavaScript methods for data exploration.

Loading thumbnail…

Fork of js arrays

This example demonstrates a range of JavaScript array operations, including mapping, reducing, sorting, and transforming data with the D3.js library (version 6.6.2). The code creates numeric ranges, generates random values, and applies calculations like squaring and doubling to each element, logging the results to the console. It also shows how to sort an array of objects by key using d3.ascending, and uses reduce to accumulate a Fibonacci-style sequence while printing each addition step. The visualization relies entirely on console output, with no graphical rendering.

Loading thumbnail…

js arrays

This example demonstrates how JavaScript arrays can be generated with random numeric values, using a series of helper functions defined in vanilla JavaScript. It shows the output of a `randomrandom` function that creates an array of arrays, where each inner array contains random integers or decimals between a minimum and maximum range. The code defines `range`, `random`, and `randomrandom` functions—`randomrandom` recursively calls `random` to build nested arrays, with an option for rounding values. The result is logged to the browser console via `console.log`, with no visual rendering or external libraries involved.

Loading thumbnail…

Fork of Fork of Fork of FULL sol l. reprod. w/ d3

This example recreates Sol LeWitt’s wall drawing using D3’s `range`, `select`, `symbols`, and `symbol` APIs. It renders horizontal and vertical stripes as SVG rectangles, masked by two overlapping masks that cut out a series of D3 symbol shapes across the canvas. The masks are generated programmatically, with the shape size proportional to the viewport’s dimensions. The code adjusts the symbol area based on window height, showing how parametric art can respond to display constraints while preserving the original geometric composition.

Loading thumbnail…

Unrelated Fork of Fork of Fork of FULL sol l. reprod. w/ d3

This piece recreates Sol LeWitt's wall drawing through layered SVG rectangles that intersect via mask patterns. The code uses d3's selection, range, and symbol APIs to generate alternating horizontal and vertical bands, with shape-based masks applied using circular symbol paths. The visualization continuously re-renders in a loop, resizing the mask area between iterations. It demonstrates generative art principles through geometric composition, where overlapping masked rectangles create the characteristic grid-and-circle interplay of the original work.

Loading thumbnail…

Fork of Fork of FULL sol l. reprod. w/ d3

This example recreates Sol LeWitt's generative art using an SVG canvas with D3.js. It shows a grid of horizontal and vertical lines whose appearance is modified by two masks, creating a dynamic interplay of shapes and negative space. The code uses D3's `select`, `range`, and `symbols` APIs to generate the geometry, and it defines custom mask elements with `mask.append()` to selectively reveal or hide parts of the line pattern. The rendering is purely vector-based, with dimensions derived from the browser window's `innerWidth` and `innerHeight`.

Loading thumbnail…

Fork of FULL sol l. reprod. w/ d3

This example recreates a Sol LeWitt-inspired geometric wall drawing using the D3.js library. It shows a grid of thin, white horizontal and vertical strokes that are selectively revealed through circular mask shapes on a black background, creating layered optical patterns. The code uses `d3.select`, `d3.range`, and `d3.symbols` to generate the lines and masks, which are rendered as SVG elements. The visualization is driven by D3’s data-join methods to append and position the rectangles and paths.

Loading thumbnail…

FULL sol l. reprod. w/ d3

This visualization recreates Sol LeWitt’s geometric art by using alternating horizontal and vertical bars to form a grid-like pattern. The bars are masked by two overlapping shapes—a circle and an inverted circle—which create intersecting voids in the composition. The code relies on D3’s `select`, `range`, `symbol`, `symbols`, and `mask` APIs to generate SVG elements dynamically. The layout is calculated from the viewport dimensions, and the rendering is entirely SVG-based with no external data source.

Loading thumbnail…

sol l. reprod. w/ d3 (group elements)

This visualization recreates Sol LeWitt’s art using D3 version 6.6.1 to draw a grid of horizontal and vertical SVG rectangles. Two overlapping masks, defined via `mask` and `circle` elements, reveal the rectangular marks only inside a large central circle, creating a crosshatched pattern that fades into empty space. The code uses `d3.select`, `range`, and `join` to generate the shapes dynamically based on the viewport dimensions.

Loading thumbnail…

sol l. reprod. w/ d3 (classes)

An interactive recreation of Sol LeWitt's geometric art uses D3.js to draw two alternating sets of thin SVG rectangles: horizontal bands across the full screen and vertical bands intersecting them. A circular mask reveals the overlapping pattern in the center, while inverted masks create a negative space effect. The code leverages `d3.select`, `d3.range`, and `svg.attr` to generate the repeating grid structure.

Loading thumbnail…

Fork of sol l. reprod. v.

This example recreates Sol LeWitt’s generative art using raw SVG elements created through the DOM API. The piece displays a grid of horizontal and vertical bars whose placement and thickness are computed from the viewport dimensions. A circular mask, defined as a separate SVG mask, applies a hole to the vertical bars, while a second mask with a white circle reveals the horizontal bars. The result is a dynamic, mask-based interplay of intersecting lines that echoes LeWitt’s systematic, rule-driven aesthetic. The code generates rectangles and circle masks entirely via JavaScript’s `document.createElementNS`, with no external libraries.

Loading thumbnail…

sol l. reprod.

This example recreates Sol LeWitt’s geometric art by generating a grid of vertical rectangles across the full browser window. Each rectangle is positioned horizontally at regular intervals, with a quarter-width offset, while its height remains fixed at 500 pixels. The rendering uses raw SVG APIs, including `document.createElementNS` and `setAttribute`, to create and style the shapes dynamically. The code calculates spacing based on the viewport’s width and height, adapting the pattern to the display size.

Loading thumbnail…

Pseudo Charts 4

A single thick black line drawn with an SVG path creates a pseudo bar chart across a white 960 by 720 canvas. The line bends and wiggles vertically, suggesting abstract data values without using traditional bars. The chart uses raw SVG elements, including a path with rounded stroke caps, a drop-shadow filter, and hover effects that thicken the stroke. Text is absent, and the visualization relies entirely on the organic, hand-drawn-like line structure.

Loading thumbnail…

Pseudo Charts 3

This example presents a set of seven horizontal bars drawn as plain black rectangles, each labeled with a letter from A to G on the left. The chart demonstrates fundamental SVG shapes and styling, with hover effects that slowly transition the fill and stroke of both rectangles and text. The code uses raw SVG elements like `rect` and `text` within an inline `<svg>` tag, alongside CSS transitions triggered by the `:hover` pseudo-class. No external charting library is employed, only the browser’s native vector rendering capabilities.

Loading thumbnail…

Puedo Charts 2

Nine vertical black bars of equal width stand on a white background, each with a different height, forming a simple pseudo bar chart. The static SVG visualization directly encodes data through the rectangles’ varying y-coordinates and heights. Rendered as raw SVG elements within an HTML file, the chart uses absolute pixel positions and explicit `height` and `y` attributes, with no interaction or animation, to display nine discrete values.

Loading thumbnail…

Puedo Charts 1

This example demonstrates the use of raw SVG elements to construct a simple scatterplot-like composition. It displays thirteen black circles of varying positions across a 960-by-720 canvas on a white background, suggesting a rudimentary visualization of data points without axes or labels. The rendering is built entirely with basic SVG primitives, using `circle` and `rect` elements defined directly in the HTML. There are no external libraries or JavaScript APIs; the graphic is static, relying solely on the SVG `xmlns` namespace and inline styling to define the visual output.

Loading thumbnail…

D3 Testing

This example demonstrates fundamental SVG shape rendering and styling using D3.js. It shows how paths create geometric forms, including a red triangle, blue cross, and orange polygon, with filled and stroked variants. The code uses `d3.select` and `.append('path')` to add SVG elements dynamically, while static paths are defined directly in the HTML. Attributes such as `d`, `fill`, `stroke`, and `stroke-width` control shape geometry and appearance, highlighting the different behaviors of closed paths versus open strokes.