Ashwani Sajwan

Charts with menus of dynamic idempotence with animations d3 reusable scatter plot

This interactive scatter plot lets users select which Iris flower measurements appear on the X and Y axes via two dropdown menus. Built with D3 v7 and React, the visualization updates smoothly with animated transitions for circles and axes when menu selections change. The chart loads the classic Iris dataset from a CSV file and uses D3 scales, axes, and a reusable scatter plot component to render the data as SVG circles.

dynamic idempotence with animations d3 reusable scatter plot

This example demonstrates an animated scatter plot of the Iris dataset using a reusable D3 chart function. Every five seconds, the plot switches its x-axis variable among petal width, sepal width, petal length, and sepal length, while the y-axis remains fixed on sepal length. The visualization uses D3's `scaleLinear`, `axisLeft`, `axisBottom`, and `transition` APIs to smoothly move existing circles and axes over one second, with new points entering at radius zero. Data is loaded asynchronously via `d3.csv` from a GitHub gist, and the chart is rendered as SVG within a React-compatible modular structure.

dynamic idempotence d3 reusable scatter plot

d3 reusable scatter plot

This interactive scatter plot displays the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Built with React and D3 v7, it uses `d3.csv` to load the data and `d3.scaleLinear`, `d3.axisLeft`, and `d3.axisBottom` for scales and axes. The visualization is rendered as SVG with circles whose positions are derived from the scales, and each point includes a `title` element for tooltip information. The chart is fully responsive, sizing to the window dimensions and allowing margins and radius to be configured via a reusable `scatterPlot` function.

D3 Scatter plot

A D3 scatter plot visualizes the Iris dataset by mapping petal length and sepal length onto a Cartesian grid using `d3.scaleLinear` and `d3.extent`, with circles rendered as SVG elements. The `d3.csv` loader parses numeric fields, and `d3.axisLeft` and `d3.axisBottom` generate labeled axes with custom CSS tick styling. The chart fills the browser viewport, and tooltips show point coordinates via appended `title` elements.

D3 Scatter plot

SVG Fundamentals

This example demonstrates fundamental SVG shapes—a circle, a rectangle, and a line—positioned on a 900-by-450 pixel canvas with a visible black border. The circle is stroked with blue and unfilled, the rectangle is filled green with a blue outline, and the diagonal line is drawn in red. The code uses raw SVG markup embedded directly in an HTML document, specifying coordinates, dimensions, and colors via attributes like `cx`, `cy`, `r`, `width`, `height`, and `stroke-width`. No JavaScript libraries are employed; all rendering is handled natively by the browser's SVG engine.

D3 Scatter Plot

enter update exit

enter update exit dom

This example demonstrates a simple SVG rendering loop that populates the viewport with 100 vertical rectangles using the Document Object Model (DOM) API. It shows how to create SVG elements dynamically, setting each rectangle’s x position at 20-pixel intervals and its height to match the full window. The code uses `createElementNS` to construct SVG `<rect>` elements and `appendChild` to insert them into an `<svg>` container, while reading the current window dimensions via `innerWidth` and `innerHeight`. The initial state displays a static grid of vertical bars without any interactive or animated updates.

Fork of Sol Lewit reproduction vertical lines

This example reproduces a Sol LeWitt-inspired drawing as a series of vertical black lines. It uses the raw SVG API to create and append 100 `rect` elements, each with a fixed width of 10 pixels and a spacing of 20 pixels, spanning the full height of the viewport. The code computes the canvas dimensions from `innerWidth` and `innerHeight`, then positions the rectangles horizontally across the entire screen. This straightforward, procedural rendering approach directly mirrors the minimalist aesthetic of the original conceptual artwork.

Full Sol Lewit reproduction using D3

This example reproduces a Sol LeWitt-style geometric drawing using D3.js, combining SVG rectangles and mask elements to create layered visual patterns. It generates 100 horizontal and vertical striped rectangles, each masked by one of two masks that reveal D3’s built-in symbol shapes—including circles, crosses, diamonds, squares, stars, triangles, and wye—positioned across the canvas. The code uses `d3.range` and `d3.symbol` with `d3.symbols` to render the symbol paths, while `d3.select` handles SVG manipulation and the `mask` attribute applies the clipping patterns. The rendering is fully SVG-based within a full-viewport layout.

Sol Lewit reproduction using D3

This example creates a generative artwork inspired by Sol LeWitt, built with D3.js and rendered as scalable vector graphics. It draws two sets of alternating horizontal and vertical stripes across the full canvas. Using D3's `select` and `range` APIs, it appends SVG rectangles to a group, each with a `mask` attribute referencing one of two circular masks. The masks, defined with a white or black rectangle and a contrasting circle, create the illusion of two overlapping circular regions, effectively reproducing LeWitt's geometric wall drawing aesthetics through simple, rule-based code.

Sol Lewit reproduction

Sol Lewit reproduction vertical lines

This example reproduces a Sol LeWitt-inspired drawing using raw SVG elements created programmatically. It renders 100 vertical rectangles, each 10 pixels wide, spaced 20 pixels apart across the full height of the viewport. The code uses the SVG namespace via `document.createElementNS` and sets `width` and `height` attributes directly on the `<svg>` root, with no external libraries. The rendering approach is deterministic and purely geometric, mirroring LeWitt’s instructional wall drawings through simple repetition.

Pseudo Line Chart

This minimal example demonstrates how a line chart can be constructed using only a single SVG `<path>` element, without any data plotting or axes. The path’s `d` attribute contains a mix of straight line segments and a cubic Bézier curve, rendered with a thick, rounded black stroke to create a pseudo-chart appearance. It uses raw SVG markup embedded directly in an HTML page, with no external visualization libraries. The styling is handled entirely through inline CSS, and the SVG viewBox is set to 960 by 500 pixels, making the example a pure, hand-coded illustration of SVG path syntax rather than a data-driven chart.

Pseudo Line Chart

This example presents a simple static composition of black text and rectangular bars arranged on a light gray background. Rendered as a single inline SVG using the `react` framework, the visualization uses basic SVG elements such as `rect` and `path` to form a pseudo line chart, where bars of varying lengths and labels suggest data values without actual plotting. The code is minimal, relying on hardcoded coordinates and no external libraries.

Pseudo Line Chart

Pseudo Line Chart

This example presents a simple static composition of black text and rectangular bars arranged on a light gray background. Rendered as a single inline SVG using the `react` framework, the visualization uses basic SVG elements such as `rect` and `path` to form a pseudo line chart, where bars of varying lengths and labels suggest data values without actual plotting. The code is minimal, relying on hardcoded coordinates and no external libraries.

Pseudo Line Chart

This example presents a simple static composition of black text and rectangular bars arranged on a light gray background. Rendered as a single inline SVG using the `react` framework, the visualization uses basic SVG elements such as `rect` and `path` to form a pseudo line chart, where bars of varying lengths and labels suggest data values without actual plotting. The code is minimal, relying on hardcoded coordinates and no external libraries.

Pseudo Horizontal Bar chart

Fork of Pseudo Bar chart

This example shows a set of five vertical bars rendered as black rectangles of varying heights on a white background, creating a pseudo bar chart. The bars are drawn directly using SVG `<rect>` elements, with hardcoded coordinates and dimensions for each bar. The code uses no JavaScript libraries or data-binding; it is purely static SVG markup embedded in an HTML page, with CSS to remove page margins and hide overflow. The rendering approach is straightforward declarative SVG, demonstrating a minimal, non-interactive visualization of categorical values.

Pseudo Scatter plot

This pseudo scatter plot presents six black circles distributed across a light gray SVG canvas, arranged to suggest a gentle diagonal trend from lower left to upper right. Each circle is rendered as an SVG ellipse element with fixed dimensions of 37.5 by 39.5 pixels. The visualization uses plain SVG markup within an HTML starter page, with a white rectangle layered over a gray background to create the final canvas appearance. No interactive behavior or data binding occurs in this minimal static example.

Basic svg Image

This example displays a simple geometric figure composed of outlined circles and rectangles on a plain SVG canvas. The drawing includes a large blue circle intersected by smaller red and green circles, alongside green rectangular structures resembling a face or robot. The code uses raw SVG elements—`circle` and `rect`—within an HTML page, with styling attributes like `stroke` and `fill` defined inline. No JavaScript or external libraries are involved; rendering is handled entirely by the browser’s native SVG support.