R

raturi22@gmail.com

@prashant-raturi·24 public vizzes

Loading thumbnail…

Animated Scatter Plot with Menus

This animated scatter plot displays the Iris flower dataset, using D3 v6 to render each specimen as a sized circle within an SVG. Two dropdown menus allow users to select which quantitative or categorical attribute maps to the X and Y axes. As selections change, the chart transitions smoothly through a `transition` API, repositioning circles with a staggered delay and updating the axes via D3's `axisLeft` and `axisBottom` scales. The visualization demonstrates a reusable chart pattern with the D3 module pattern, combining `scaleLinear`, `extent`, and a custom event dispatcher for menu interactions.

Loading thumbnail…

Animated_Reusable_ScatterPlot_with_Menus

This animated scatter plot shows the Iris dataset, cycling through different flower measurements every three seconds to reveal changing correlations. The reusable chart function in `scatterPlot.js` uses D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` to smoothly animate point positions and axis scales. Data loads from a CSV via D3's `csv` parser, and the `setInterval` loop alternates the x-axis variable among petal width, sepal width, petal length, and sepal length. The SVG rendering uses join patterns for enter, update, and exit transitions, with a staggered delay creating a cascading movement effect.

Loading thumbnail…

Animated_Reusable_ScatterPlot_D3

This interactive scatter plot cycles through different Iris flower measurements every few seconds, animating the points as the x-axis changes. The visualization is built using D3.js and leverages the library's join operation for efficient enter, update, and exit transitions of SVG circles. Each data point’s position is recalculated with a linear scale based on the selected column, and the axes are redrawn with a smooth transition. The chart demonstrates a reusable scatter plot component with configurable dimensions, margins, and data mappings.

Loading thumbnail…

Reusable_ScatterPlot_D3_with_Symbols

This example demonstrates a reusable scatter plot that cycles through different x-axis dimensions of the Iris dataset every two seconds, using animated transitions between views. It visualizes petal width, sepal width, petal length, and sepal length against sepal length, with points rendered as distinct SVG symbols (circles, crosses, diamonds, etc.) based on species. The chart is built with D3 v7, leveraging `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, `axisBottom`, and the reusable chart pattern. Data is loaded as CSV from a GitHub gist, and the SVG output updates in place via `selection.join`.

Loading thumbnail…

Reusable_ScatterPlot_D3

This example demonstrates a reusable scatter plot that visualizes the relationship between petal length and sepal length in the Iris dataset. The chart renders as an SVG using D3.js, with circles representing individual data points and axes labeled from the parsed CSV data. The implementation uses D3’s `scaleLinear`, `extent`, `axisLeft`, and `axisBottom` APIs within a custom `scatterPlot` function, which exposes setters for width, height, data, and margin to make the chart configurable and reusable across different datasets.

Loading thumbnail…

ScatterPlot_D3

This scatter plot visualizes the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. Each point represents a flower sample, with colors indicating species. The visualization uses d3.csv to load data, d3.scaleLinear for both axes, and d3.axisLeft and d3.axisBottom for tick marks. SVG elements render the marks, with margins and window-sized dimensions set in the code.

Loading thumbnail…

Concept of Merge_Join _Functions_Modules

This example demonstrates how merge and join functions work in D3 by animating a set of circles whose positions, radii, and count change over time via a `setInterval` timer. It shows how `selectAll`, `data`, and `join('circle')` merge new data with existing SVG elements, while separate `vizData.js` modules use ES6 `import`/`export` syntax to keep the code scalable. The visualization uses `d3.range` to generate data points and `d3.select` to append an SVG to the body, with the animation updating every 200 milliseconds.

Loading thumbnail…

Concept of Merge_Join

This example animates a series of circles that move vertically and change radius over time, demonstrating dynamic data binding with D3. The visualization updates every 200 milliseconds, recalculating positions and sizes based on a sine wave. It uses D3’s `selectAll`, `data`, and `join` to bind new data arrays to SVG circle elements, with values generated by `range` and trigonometric functions. The rendering is SVG-based, and the animation runs through a JavaScript `setInterval` loop.

Loading thumbnail…

JavaScript Arrays

This example shows a looping animation of fifteen circles moving in a sine-wave pattern across an SVG canvas. The circles are generated and repositioned every 50 milliseconds using `setInterval`, with each circle’s vertical position calculated from `Math.sin(d * 0.5 + t)` and multiplied by 220. The code uses `d3.select`, `d3.range`, and the `.join` method to bind incoming data to existing SVG elements, while `d3.attr` updates the `cx` and `cy` coordinates. The animation runs indefinitely, with `t` incrementing by 0.1 each frame to create the wave effect.

Loading thumbnail…

Final Sol LeWitt Reproduction with D3

A grid of alternating horizontal and vertical black-and-white rectangles becomes visible through two SVG masks, revealing a pattern of D3 symbol shapes rendered with `d3.symbol` and `d3.symbols`. The example uses `d3.select`, `d3.range`, and `d3.symbol` to generate the rectangles and mask paths, with the mask elements created programmatically and applied via the `mask` attribute. The output is a static SVG visualization, drawn across the full browser window, that demonstrates layered masking and the use of selection joins with `join`.

Loading thumbnail…

Fork of Fork of Full Sol LeWitt Reproduction with D3

This example creates a dynamic grid of horizontal and vertical stripes that form a generative composition, reminiscent of a Sol LeWitt drawing. It renders 100 lines in each direction, with their visibility altered by two SVG masks containing paths generated from D3’s `symbol` API. The masks invert the stripes’ appearance, creating intersecting shapes across the canvas. The code uses D3’s `select`, `range`, and `join` to build the SVG elements, with the mask logic defined in a custom `renderMask` function.

Loading thumbnail…

Full and Final Sol LeWitt Reproduction with D3

This example uses D3.js to recreate a Sol LeWitt-style wall drawing as a generative SVG composition. It displays a grid of alternating horizontal and vertical stripes overlaid with two large geometric symbols—a circular arc and a polygon—that act as masks, cutting their shapes out of the stripe pattern. The implementation leverages D3’s `select`, `range`, `symbol`, and `symbols` APIs to construct the masks and position them along a horizontal line, with the mask fill toggled to create positive and negative space. The entire graphic is built dynamically, sized to the full browser window, and rendered as an SVG document.

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical striped rectangles across the full browser viewport. Two complementary masks, generated from a large D3 symbol path, create the geometric interplay by alternating which stripes are visible in each region. The SVG output is built by chaining D3 selection methods like `select`, `append`, and `join` to generate the rect elements, while `renderMask` applies the symbol-based masks to the grid. The result is a generative, code-driven art piece that adapts to the window size.

Loading thumbnail…

Fork of Sol lewitt reproduction in D3

A full-screen grid of horizontal and vertical stripes is drawn over a gray background, with circular masks applied to both sets of stripes to reveal a cross-shaped intersection. The artwork is generated procedurally using D3’s `select` and `append` APIs to build SVG elements, and `range` to create 100 rows and columns of rectangles. Two masks are defined—one with a black rectangle and white circle for the horizontal stripes, and another with reversed fills for the vertical stripes—so the overlapping circles form a checkerboard-like overlay. The piece highlights D3’s declarative chaining for SVG construction and masking.

Loading thumbnail…

Sol_LeWitt_Mask2

This example uses D3.js to render a generative piece inspired by Sol LeWitt, creating a grid of horizontal and vertical lines that intersect on a full-screen SVG. It applies two SVG masks (`circle-mask` and `circle-mask2`) with inverted black-and-white circles to selectively reveal line segments, producing a layered, cross-hatched pattern with a circular focal point. The 100 rectangles in each direction are generated via `d3.range`, with attributes set through method chaining, and the resulting vector graphic is displayed entirely in the browser.

Loading thumbnail…

Fork of Fork of Sol LeWitt Reproduction with D3

Inside a circular lens, Sol LeWitt's intersecting horizontal and vertical line grids are recreated using D3 v7 selections and data joins. The example uses two SVG masks, each with a white circle on a black rectangle, to reveal the striated patterns over a full-screen canvas. By generating 100 rects per axis from `d3.range`, the code alternates mask fill colors to create a crosshatched, optical illusion of depth and layering.

Loading thumbnail…

Fork of Nita's_Episode 3: Sol LeWitt in Vanilla JavaScript version 3

An animated SVG composition generates a grid of two hundred colorful vertical rectangles, each with a randomized fill color and a looping vertical translation animation that shifts it upward by 300 pixels over a random duration. A white circle is drawn at the center of the screen, while a second grid of horizontal rectangles is masked using a circle element within an SVG `<mask>` definition, revealing the horizontal stripes only inside the circular area. The code uses vanilla JavaScript with the Web Animations API (`element.animate`) and dynamically creates SVG elements via `createElementNS`.

Loading thumbnail…

Sol_LeWitt_Vertical Variant

This example recreates a Sol LeWitt-style wall drawing as a full-screen SVG composition. It layers a grid of horizontal and vertical stripes, with a circular white mask revealing only the horizontal lines within a 200-pixel-radius circle centered on the viewport. The code builds the SVG and mask elements dynamically via the Document Object Model API, using `document.createElementNS` and `setAttribute` to generate 100 rectangles in each direction. No external libraries are used; the rendering relies entirely on native SVG mask and rectangle primitives.

Loading thumbnail…

Fork of HTML Starter

This example draws a generative art piece inspired by Sol LeWitt, rendering a grid of vertical bars across the full browser window. Using raw SVG manipulation via the DOM API, the script creates 100 rectangle elements, each 10 pixels wide and 500 pixels tall, spaced 20 pixels apart along the x-axis. The rectangles are appended to an SVG canvas that stretches to the viewport’s dimensions, producing a minimalist, repeating pattern without any interaction or animation. The result is a static, rule-based composition generated entirely in JavaScript.

Loading thumbnail…

Sol Lewitt Viz-Part II

This example demonstrates the fundamentals of programmatic SVG rendering through the creation of a single black vertical rectangle on a white canvas. The visualization combines an SVG element with a rectangle, both generated entirely through JavaScript’s `createElementNS` method and appended to the document body. The code specifies the SVG namespace, sets the canvas dimensions to 500 by 500 pixels, and positions the rectangle at an x-coordinate of 90 with a width of 10 and height of 300. The work is inspired by Sol LeWitt’s geometric art, using a minimal approach that highlights basic vector graphics construction.

Loading thumbnail…

Sol Lewitt Viz

This example reproduces a Sol LeWitt art piece as a static SVG visualization. It renders a 500 by 500 pixel SVG canvas containing text elements styled with the Roboto Mono font. The code uses vanilla JavaScript to construct the SVG structure, with commented-out examples showing basic programming concepts like functions, loops, and objects. The visualization relies on SVG's native text and styling capabilities rather than external data or libraries, emphasizing geometric and typographic composition inspired by LeWitt's conceptual art.

Loading thumbnail…

SVG_Fundamentals

This example renders four black letterforms (A, B, C, D) as static SVG `<text>` elements at fixed coordinates, alongside four filled `<ellipse>` shapes and an empty `<rect>`. The layout demonstrates fundamental SVG geometry primitives without any interaction or animation. It uses raw inline SVG within an HTML document, styled with the Roboto Mono webfont via Google Fonts, and sets the canvas to 1000 by 1000 pixels. The accompanying JavaScript file only logs a string and does not affect the visualization.

Loading thumbnail…

Fork of Fork of Fork of SVG Fundamentals Sunset/Sunrise

A simple animated SVG scene depicts a sunset-sunrise cycle over a stylized landscape. The visualization uses native SVG elements, including `<rect>`, `<circle>`, and `<path>` shapes, to render the sky, sun, and three layers of terrain. Animation is driven by SVG `<animate>` tags, which continuously cycle the sun's vertical position and the gradient colors of the sky and land, creating a looping day-to-night transition. The scene relies on radial and linear gradient definitions within `<defs>` to shade the elements.

Loading thumbnail…

Fork of Fork of Adil-sunRise-svg

This SVG animation depicts a stylized sunrise over layered landscapes. A gradient-filled sky transitions from aliceblue to indigo, while a sun circle moves down and back up using an `<animate>` element. Three overlapping paths create rolling hills, each filled with animated linear or radial gradients that shift colors over 15 seconds. The scene leverages declarative SMIL animations within raw SVG markup, with no JavaScript libraries, and cycles an infinite sunrise-to-night color loop.