Skip to main content
Log in
N

Neeraj Kumar

@ndevsinha·18 public vizzes

Loading thumbnail…

linepath

This example displays a single static black line drawn diagonally across an SVG canvas using the d3.line() path generator and a d3.select() selection. The code defines a path element with a series of two coordinate pairs, renders it with no fill and a black stroke, and sets the SVG dimensions to match the browser window. An animated spirograph remains commented out.

Jan 24, 2024
Loading thumbnail…

forcedlayout

This visualization displays the character network from Les Misérables as an arc diagram. Nodes are arranged linearly along a horizontal axis, sorted by group membership, while links between characters are drawn as curved arcs beneath the line. Hovering over a node reveals a tooltip with the character’s name. The implementation uses D3.js v3 to generate SVG elements, employing d3.scale for positioning and colors, and d3.svg.line.radial for the arc paths.

Jan 23, 2024
Loading thumbnail…

animated line

An animated line chart displays the changing popularity of a fictional topic over time, with an update button that regenerates the data to show the line redrawing itself with a smooth sinusoid easing. Built with D3.js (v7.8.5), the chart uses `scaleLinear` for axes, `line` for the path generator, and the `transition` API with `easeSin` to animate the stroke-dashoffset over 2.5 seconds. The SVG rendering includes axes and a steelblue path, with fake data defined in JavaScript rather than from an external source.

Jan 18, 2024
Loading thumbnail…

new animation

Two expanding clusters of green circles drift diagonally in opposite directions across the screen, repeatedly resetting their positions after a few seconds. The animation uses d3-selection’s `selectAll` and `join` to bind and update circle elements each frame, driven by a `setInterval` callback that increments a time variable. All 500 circles are rendered as SVG in the browser, with coordinates and radii computed from the current time value. The visualization demonstrates dynamic data binding in D3 version 7.8.5 without external data sources.

Jan 17, 2024
Loading thumbnail…

Fork of D3 Selection exercise

A growing sine wave is drawn as a black line across the screen, with large, colorful circles positioned along it whose radii expand and whose fill colors cycle through a seven-color palette. The animation updates sixty times per second, shifting the wave’s phase and recalculating circle positions. Built with D3 v7, the example uses `d3.select`, `d3.range`, and a `line` generator, applying data joins and `transition` methods to animate circle attributes. It demonstrates the reuse of a data-bound selection function across two stacked SVG layers.

Jan 17, 2024
Loading thumbnail…

barchart

A bar chart displays the "most loved" programming languages from the 2018 Stack Overflow survey, ranking ten languages by percentage of developers who reported loving them. Animated interactions on mouse hover emphasize a selected bar, dim other value labels, draw a horizontal dashed line at that bar's y-value, and compute divergence percentages relative to the hovered language. The visualization uses D3 v5 with an SVG render, `d3.scaleBand` for categorical x-positions, and `d3.scaleLinear` for the y-axis. Grid lines are generated via `d3.axisLeft`, and changes in bar opacity, width, and position are handled with `transition().duration()`.

Jan 16, 2024
Loading thumbnail…

circle popup

Six colored circles of varying sizes pop into view on a light green background, each growing from a radius of zero to its assigned size over an eight-second staggered transition. The circles remain static once fully expanded, with no further movement or interaction. The visualization uses D3.js selection joins with enter, update, and exit handlers, applying the `transition` API with `easeLinear` for the fast update phase. Hardcoded data defines each circle's position, radius, and fill color, with opacity set to 0.708 for a translucent effect.

Jan 16, 2024
Loading thumbnail…

simple animation

This example demonstrates an interactive scatterplot of 1,000 randomly generated circles. The data is created on the fly and rendered as SVG circles within a full-window visualization. Using the D3.js library (version 7.8.5), the code applies linear scales to map random values to screen coordinates and circle radii. Hovering over a circle triggers a transition via the `transition` API, animating the circle to a new random position over one second with an elastic easing effect.

Jan 16, 2024
Loading thumbnail…

packedlayout

This example shows a force-directed layout of 100 circles, each assigned to one of three categories and attracted to a corresponding horizontal center. The circles collide with one another while a many-body charge force disperses them, creating a packed, clustered arrangement. The visualization uses d3.forceSimulation with forceManyBody, forceX, and forceCollide, rendering to an SVG via d3.select and join. Data is randomly generated, and colors (orange, lightblue, purple) encode category membership.

Jan 14, 2024
Loading thumbnail…

new animation

This animation shows a field of green circles forming a sinusoidal wave pattern that continuously shifts and breathes across the screen. The number of circles and their positions and radii oscillate over time using a cosine-driven timer. The visualization uses D3.js version 7.8.5 with the `select` and `range` APIs, rendering as an SVG with dynamic data joins via `join('circle')`. A `setInterval` at 60 frames per second updates the scene, while the window dimensions determine the SVG size.

Jan 12, 2024
Loading thumbnail…

bargraph

This example shows a static tree diagram generated by D3 v4, laying out a small binary hierarchy of nodes and links with `d3.tree()` and `d3.hierarchy()`. The visualization renders in an SVG using `d3.linkHorizontal()` for curved paths and circle-plus-text labels for each node. The code builds the tree data programmatically from a root object, assigns positions via `tree(root)`, and applies transform translation to group elements for placement.

Jan 11, 2024
Loading thumbnail…

fractal tree

An interactive fractal tree responds to mouse movement, with branching angle and length ratio changing based on cursor position. The visualization renders a recursive binary tree structure using the Canvas 2D API, drawing line segments for 13 levels of branching. It accommodates high pixel density displays by scaling the canvas using the device pixel ratio. Mouse events trigger redraws that update branch thickness and divergence angles, creating a dynamic, explorable organic form without any external data source.

Jan 11, 2024
Loading thumbnail…

fractal tree d3

This example shows a procedurally generated fractal tree built from branching line segments, rendered as an animated SVG with a color gradient from black to purple based on depth. The code uses a recursive `branch()` function with randomness in angle and length to create organic variation, then draws each branch as a `<line>` element via D3’s data join. Hovering highlights parent branches in green, and the tree regenerates on click. It uses D3 v3 (via an external script) and D3 v7 (from `index.js`) for selection, transitions, and color scaling.

Jan 10, 2024
Loading thumbnail…

d3 selection exploration

Animated green circles move horizontally across an SVG canvas while their vertical position and radius fluctuate according to a sine wave. The visualization demonstrates D3’s `selectAll().data().join()` pattern, handling dynamic array sizes by entering and exiting circles as the count oscillates. Using `d3.range` to generate data points and a `setInterval` timer at 60 frames per second, it updates attributes like `cx`, `cy`, and `r` in place. The code renders with SVG and leverages D3 version 7.8.5, showing a smooth, continuous wave-like pattern.

Jan 10, 2024
Loading thumbnail…

Document

This visualization uses an animated scatterplot to approximate the Mandelbrot set via a probabilistic Monte Carlo method. For each of 150 epochs, it randomly generates 2,000 points within a fixed coordinate domain and tests whether each point remains bounded after 100 iterations of the complex quadratic map. Points that stay bounded are plotted as small green circles using SVG, while the count of successful points is continuously updated. The chart is built with D3 v5, using `d3.scaleLinear` for axes and `d3.timer` to drive the animation.

Dec 30, 2023
Loading thumbnail…

full sol lewit diagram d3

This example forms a Sol LeWitt–style geometric composition by layering two sets of fine SVG rectangles that intersect at right angles, generating a grid of thin lines across the full viewport. A star-shaped mask, created with a D3 symbol path, reveals only a portion of the horizontal strokes, while a circular mask similarly crops the vertical strokes, leaving an overlapping central figure. The visualization uses D3 selections with `range` and `join` to bind data to the rectangles, and it constructs both masks using appended SVG elements and explicit fill colors. Rendering is entirely SVG-based.

Dec 29, 2023
Loading thumbnail…

my first d3

This example generates a full-screen SVG composition of 100 horizontal and 100 vertical rectangles, each 10 pixels thick and spaced 20 pixels apart. Two SVG masks with 200-pixel-radius circles in the center determine visibility: the first mask (white circle on black) reveals horizontal strips, while the second (black circle on white) hides vertical strips. Using d3.select, d3.range, and the .join() pattern, the rectangles are created and styled, with the masks applied via the url(#…) attribute. The result is a striped grid where horizontal and vertical bars cross, creating a contrasting pattern inside and outside the circular regions. Data is procedurally generated from the range of 100.

Dec 28, 2023
Loading thumbnail…

Myfirstviz

This generative visualization fills the browser window with a grid of horizontal and vertical colored bars. The piece uses masked rectangles to create a circular lens effect: horizontal bars are visible only through a central circular mask, while vertical bars appear through an inverted mask, producing a dynamic crosshatch pattern that reveals the interplay of overlapping lines. Built with the raw SVG API in JavaScript, the code programmatically creates 100 horizontal and 100 vertical rectangle elements, each masked by a separate circular region defined via SVG `<mask>` elements.

Dec 27, 2023