sharmamilan632.m@gmail.com

Simple Exploration

This example shows a simple bar chart built with D3.js that updates when new data arrives after two seconds. The visualization uses an SVG container with six steelblue rectangles, demonstrating D3’s data join pattern. The code applies `svg.selectAll('rect')`, `data()`, `enter()`, and `exit()` selections to handle dynamic updates, with `setTimeout` triggering a change from the initial array [4, 8, 15, 16, 23, 42] to a five-element dataset. Bars are positioned and sized using the `attr` method based on array values.

Jun 21, 2024

D3Selection Exploration

Fifteen circles move in a sinusoidal wave across an SVG canvas, creating a looping animation of coordinated motion. The example demonstrates D3 data joins by binding an array of objects to circle elements, using `selectAll`, `data`, `enter`, and `merge` to update positions each frame. A `setInterval` at 60fps updates a time variable `t`, recalculating each circle's `y` coordinate via `Math.sin`. The code imports `select` and `range` from D3 v7, appends circles with a fixed radius, and animates their `cx` and `cy` attributes.

Jun 18, 2024

JavaScript Arrays

This example demonstrates JavaScript array methods—range, forEach, filter, sort, map, and reduce—through console output, illustrating how each operates on numeric and object data. The code builds a range array via a custom function using a for loop and push, then applies methods such as filter for even numbers, sort on numbers and object keys, and reduce for summation and key-value aggregation. It runs in a minimal HTML page with an embedded script, using plain JavaScript with no external visualization library despite d3 being listed as a dependency.

Jun 18, 2024

Multiple Symbol Rendering

This visualization demonstrates how multiple symbol shapes can be rendered and layered using SVG masks, creating an intricate pattern of intersecting geometric forms. The code generates 100 horizontal and vertical rectangles that are clipped by two distinct masks, each revealing different symbols from the d3.symbols array. Using d3's `select`, `range`, and `symbol` functions, the visualization positions each shape and applies SVG mask attributes to control visibility, resulting in a dynamic interplay between the rectangular grid and the underlying symbol paths.

Multiple Symbol Rendering

This example generates a 100-by-100 square grid of overlaid horizontal and vertical stripes on an SVG canvas. Using D3.js, it defines two masks with large circular path shapes, then applies them to the stripes to create intersecting ring-like visual effects. The code relies on D3’s `range`, `symbols`, and `symbol` APIs, alongside SVG mask and path elements, to render the geometric pattern across the full viewport dimensions.

Next Different Shapes Using D3

This example uses D3 to draw overlaid horizontal and vertical stripes that form a dynamic visual composition. The code generates 100 rectangles in each direction, spacing them 20 pixels apart, and applies two different SVG masks to create intersecting shapes. A diamond symbol, created using `d3.symbol` and `d3.symbols[1]`, is rendered at the center of each mask with contrasting fills, producing a layered effect where the stripes appear to cut through the diamond form. The visualization responds to the browser window size through `window.innerWidth` and `window.innerHeight`.

Different Shapes Using D3

This example demonstrates how SVG masks can create visual variety from simple repeated shapes. Two sets of horizontal and vertical rectangles, each positioned across the full canvas, use complementary circular masks to reveal their pattern. The first mask shows the horizontal bars through a white circle on a black background, while the second inverts this to display vertical bars through a black circle on white. Built with D3 v3 and the `select`, `append`, and `join` APIs, the code generates 100 rectangles per direction, producing a crosshatch effect that is dynamically clipped to form circular windows.

Verical Variant

This example creates a full-screen SVG composition of horizontal and vertical bars that intersect to form a circular pattern. The code uses the SVG mask API to apply circular cutouts, with the first mask clipping a dark disk and the second exposing a lighter ring. One hundred horizontal rectangles and one hundred vertical rectangles are generated procedurally via JavaScript, each assigned to one of the two masks. The result is a geometric interplay of stripes and circles, driven purely by SVG shape creation and masking techniques.

Fork of SVG Fundamentals

This example demonstrates a full-screen display of 100 vertical rectangles, each 10 pixels wide and spaced 20 pixels apart, spanning the entire height of the browser window. The SVG is created entirely through JavaScript using the `document.createElementNS` method with the SVG namespace, appending each rectangle directly to an `<svg>` element sized to match the window's inner width and height. No data source is used; the visualization is purely algorithmic, showing how to generate SVG shapes programmatically without any external libraries.

Fork of psuedo visualizations - venn diagram

This example shows a single, abstract Venn diagram-like shape rendered as a filled path on a blank SVG canvas. The drawing is a composite of several arcs and lines that loosely resemble overlapping circles, without any actual data or labels. It uses raw SVG path commands inside an HTML `<svg>` element, with no external libraries such as D3 or Three.js. The rendering is entirely static, relying on inline coordinates and arc syntax to define the form, and the page’s body is set to hide overflow.

SVG Fundamentals

This example demonstrates fundamental SVG shapes—circles, rectangles, lines, and paths—positioned on a 1000x500 canvas using declarative markup. It shows how each element’s geometry and styling attributes, such as `cx`, `cy`, `r`, `fill`, `stroke`, and `stroke-width`, control appearance, including overlapping shapes like the red circle nested inside a green one. The code uses plain SVG within an HTML page, with no JavaScript libraries or frameworks, relying purely on built-in browser rendering of vector graphics.