S

subratanp

@subratanp·27 public vizzes

Loading thumbnail…

Untitled

This visualization creates a circular aperture effect on a full-screen grid of horizontal and vertical black bars. Using D3 selections and data joins, the code generates 30 horizontal and 80 vertical rectangular strips, then applies two SVG masks with white and black circles at the center to selectively reveal or hide intersections. The result resembles a moiré pattern or camera viewfinder, where overlapping bars form a circular optical illusion against the white background. The implementation uses D3’s `select`, `data`, and `enter` APIs along with SVG mask elements to achieve the layered visual effect.

Loading thumbnail…

Untitled

This example uses a bar and dot plot to rank countries by a single numeric value. The chart displays horizontal bars with overlaid circles, sorted in descending order, with a left axis for country names and a bottom axis for values. Built with React and D3 (v6.6.1), the code leverages `scaleBand`, `scaleLinear`, `axisLeft`, and `axisBottom` to render SVG elements. Data is loaded asynchronously via `d3.csv` from a remote GitHub dataset, with bars and circles drawn using D3's `.join` operations.

Loading thumbnail…

Untitled

A kernel density estimation chart displays the distribution of price data from a CSV file, with a smooth green curve showing density across a 0-1000 price range. The visualization uses D3 v6 methods including `scaleLinear`, `axisBottom`, `axisLeft`, and a custom `kernelDensityEstimator` with an Epanechnikov kernel. The SVG rendering is built within a React framework, with axes positioned via margins, and the density curve generated using `d3.line` with `curveBasis` smoothing.

Loading thumbnail…

Untitled

A donut chart displays the distribution of a small dataset with categories a through e, each rendered as a colored arc segment. The visualization uses D3's `pie` function to compute angular values from object entries, with `arc` paths using inner and outer radii. Label lines and text annotations are positioned via `arc.centroid` calculations and polar-coordinate adjustments. The SVG output is generated through a React rendering pipeline, using `scaleOrdinal` for categorical color mapping and `join` for declarative element creation.

Loading thumbnail…

Untitled

This visualization displays a monthly grid of numeric values, with each month as a row and each date as a column. The data consists of eleven date values for twelve months, rendered as SVG text elements positioned using `d3.scalePoint` for both axes. Custom CSS classes style the month labels in green, while the code uses D3’s selection and join methods (`selectAll().join()`) to bind the plot data. The framework is React, and the chart is drawn entirely with SVG, with axis labels manually placed rather than using generated axes.

Loading thumbnail…

Untitled

This example shows a stacked bar chart of fruit quantities over three months, using D3 v6 within a React context. The bars are rendered as SVG rectangles, with an ordinal color scale mapping apples, bananas, and oranges to blue, green, and red. The chart uses `d3.scaleBand` for the x-axis months, `d3.scaleLinear` for the y-axis, and `d3.stack` to compute the stacked series. It reads inline data with monthly values and displays axes via `axisBottom` and `axisLeft`.

Loading thumbnail…

Untitled

A scatterplot matrix displays pairwise relationships among four measurements of the Iris dataset, colored by species using a D3 ordinal scale. The visualization arranges 4x4 grid cells, each showing a scatterplot for a variable pair, with axes rendered via d3.axisLeft and d3.axisBottom. Diagonal cells display variable name labels instead of plots. Data loads asynchronously from a CSV file, with linear scales mapping each variable's extent to plot dimensions. Rendered as SVG circles with radius 2, using d3.select and d3.csv for data binding.

Loading thumbnail…

Untitled

This visualization displays a radial, donut-like chart composed of eight concentric arcs, each representing a different data item stacked from a single-row dataset. The arcs are rendered using D3’s `arc` generator, with their inner and outer radii mapped through a linear scale (`scaleLinear`) to encode values, while the start and end angles are fixed to create a partial ring. The SVG is drawn in React, and the stacked data is computed with `d3.stack()`. Each arc segment is assigned a distinct color from a predefined array, producing a nested multi-layered ring visualization.

Loading thumbnail…

Untitled

This example visualizes a correlation matrix using a correlogram, where the lower triangle displays circles colored by correlation strength and the upper triangle shows numeric values. It uses d3.scaleLinear for color mapping, d3.scaleSqrt for circle sizing, and d3.scalePoint for axis positioning. Data is loaded from a CSV file and reshaped into long format before rendering as SVG circles and text elements in React.

Loading thumbnail…

Untitled

A dumbbell plot displays paired numeric values for each categorical group. Cyan horizontal lines connect two circles per row, with teal circles marking value1 and magenta circles marking value2. The visualization uses D3.js v6, with `csv()` loading the Cleveland dataset from the Holtzy D3 graph gallery. Axes are rendered via `axisLeft()` for the categorical scale and `axisBottom()` for the numeric scale, while SVG shapes are drawn using joins within a React framework.

Loading thumbnail…

Untitled

This visualization displays a lollipop chart of numeric values by country, using vertical teal lines topped with magenta circles to represent each data point. The chart loads CSV data from a GitHub repository, then renders an SVG with D3.js version 6.6.1 within a React framework. It uses `scaleBand` for the categorical x-axis, `scaleLinear` for the y-axis, and `axisBottom` and `axisLeft` to generate rotated tick labels and gridlines.

Loading thumbnail…

testing chart

This example shows two static SVG compositions. The first uses twelve colored circles arranged in a circular petal pattern around a central dark red circle; hovering over that central circle turns it black via a CSS `:hover` rule. The second is a separate SVG containing eight small dark circles scattered across a white background. Both charts are hand-coded in HTML with inline SVG elements, using no external libraries or data sources.

Loading thumbnail…

Untitled

This example visualizes hierarchical data as an animated SVG tree, with nodes positioned by level and linked to their parents via curved line segments. The code uses D3 v6 functions including `d3.line()` with `curveNatural`, `d3.select()`, and `d3.transition()` with `easeLinear` and `stroke-dashoffset` animation to draw connecting paths. The tree structure is defined in a static array of objects with node, value, parent, and level properties, and the layout algorithm computes positions dynamically based on parent coordinates and level depth. Rendering is done entirely through SVG elements appended to the viewport-filling canvas.

Loading thumbnail…

Untitled

This example shows the Iris dataset as a scatterplot, mapping petal length and sepal length to x and y coordinates while encoding the species of each flower with distinct SVG symbols. The code uses d3.csv to load the data, d3.scaleLinear for positioning, and d3.scaleOrdinal combined with d3.symbol to assign a unique shape to each species. d3.axisLeft and d3.axisBottom generate the axes. The visualization renders directly to SVG within a React project, with the page size set to the full viewport.

Loading thumbnail…

Untitled

This example visualizes the Iris flower dataset, plotting petal length against sepal length as small circles. Each point is positioned using D3’s `scaleLinear` and `extent` to map data values to screen coordinates, with axes added via `axisBottom` and `axisLeft`. The SVG circles are rendered dynamically in React after loading the CSV, with margins and window-sized dimensions. Styling applies a font size and blue color to tick labels via CSS.

Loading thumbnail…

Untitled

This example demonstrates animated line drawing in SVG using D3.js. Four data points (x, y coordinates) are plotted as circles colored yellow or blue based on their x-value, with a natural cubic spline curve passing through them. The line initially appears with a dash offset and transitions to full visibility over three seconds using D3's `transition()`, `easeLinear`, and a repeating `on("end")` callback. The `d3.line()` function with `curveNatural` generates the path geometry in a React environment.

Loading thumbnail…

Untitled

Two circles move left to right across an SVG canvas, tracing a sine wave vertically as they travel. A black line connects their current positions, forming a dynamic segment that shifts with each animation frame. The visualization uses D3’s `select`, `range`, and `join` methods to update circle attributes, while `setInterval` drives the animation loop and a custom `drawLine` function appends and removes the connecting line. Randomly generated array manipulation is also present but unused in the final rendering.

Loading thumbnail…

Untitled

This example demonstrates a minimal web page using D3.js to selectively update the text and styling of two HTML div elements. The code imports the `select` function from D3, then applies the text, background-color, width, height, and display properties to each element. It shows how D3’s selection API can manipulate DOM nodes with direct method calls, using only a simple HTML structure and the D3 library.

Loading thumbnail…

New D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks combine with geometric primitives to create layered visual effects. Horizontal and vertical rectangles are drawn across the full viewport, then clipped through two masks—one using standard black-on-white fill logic and another inverted. Each mask contains a group of D3 v3 symbol paths rendered from the `symbols` API, with their positions and sizes defined by `range` and transform translations. The result shows how `selectAll`, `join`, and mask attributes control visibility across overlapping elements.

Loading thumbnail…

D3 Shapes SVG Fundamentals

This example demonstrates how D3 SVG masks can create geometric patterns from overlapping rectangular bands. Two sets of perpendicular stripes, each consisting of 100 horizontal and vertical rects, are filtered through circular mask shapes generated with the `symbol` API. The first mask uses a filled star symbol to hide the horizontal lines, while the second, inverted mask reveals the vertical lines through the same symbol shape. The code uses `d3.select`, `d3.range`, and `d3.symbols` with the `join` pattern to render the full-screen SVG grid.

Loading thumbnail…

another Shapes SVG Fundamentals

This example uses SVG masks to create a circular reveal over a grid of horizontal and vertical filled rectangles. The visualization demonstrates how two complementary masks—one with a white circle on a black background and the other with a black circle on a white background—selectively show or hide the underlying stripes. Built with the D3.js library (v6), the code generates 100 horizontal bars and 100 vertical bars, then applies these masks to create an intersecting pattern of lines visible only within the defined circular regions. The data is procedurally generated in JavaScript using `range()` and a `for` loop, with rendering handled entirely through SVG elements.

Loading thumbnail…

new Shapes SVG Fundamentals

This example demonstrates how SVG masks can selectively reveal or hide overlapping grid lines. It renders horizontal and vertical stripes as SVG `rect` elements, each assigned a mask containing a black background and a white circle to create a transparent window. A second mask with inverted colors overlays the vertical stripes, producing a crosshatched pattern visible only within the circular region. The visualization is built using the raw `document.createElementNS` API to construct SVG elements dynamically in a loop, with the window size set to the full browser viewport.

Loading thumbnail…

Shapes SVG Fundamentals

This example demonstrates how to construct and populate an SVG scene programmatically using the raw SVG DOM API. It draws a series of 100 vertical, blue-stroked rectangles that span the full height of the viewport, spaced evenly across the window’s width. The code creates an SVG element via `document.createElementNS`, sets its dimensions to match the browser viewport, and then appends each rectangle with explicit `x`, `width`, `height`, `stroke`, and `fill` attributes. The rectangles use alternating black fills and blue outlines, creating a striped pattern across the page.

Loading thumbnail…

Line SVG Fundamentals

This example demonstrates the fundamental structure of an SVG line chart, plotting a single jagged path that moves across a fixed 620-by-288 coordinate system. The line is drawn using raw SVG markup inside an HTML page, with the `path` element’s `d` attribute defining six coordinate pairs connected by straight segments and a bold `stroke-width` of 11 pixels. No external libraries are used; the rendering relies entirely on native SVG syntax within the `index.html` file, styled by minimal CSS for text presentation.

Loading thumbnail…

Horizantal Bar SVG Fundamentals

This example shows a horizontal bar chart with four bars representing categorical values A, B, C, and D, rendered as simple SVG rectangles on a white canvas. The bars are positioned using explicit x and y coordinates with fixed heights and widths, while category labels are placed to the left using SVG text elements with a shared CSS ID for styling. The visualization is built using raw SVG markup embedded directly in an HTML page, with no external libraries or JavaScript logic, demonstrating fundamental SVG layout techniques in a React-independent context.

Loading thumbnail…

Bar SVG Fundamentals

This example demonstrates a basic bar chart rendered entirely as static SVG elements, with a grey background and four dark bars of varying heights. The chart uses raw SVG markup within an HTML page, with each bar drawn using a `<rect>` element that specifies its x and y position, width, height, and fill color. The visualization relies on manual coordinate and dimension values rather than any data-binding or layout algorithm, showing the fundamental building blocks of SVG-based graphics in a React-free, bare-minimum HTML context. The chart’s values are hard-coded, so it does not respond to data changes or user interaction.

Loading thumbnail…

SVG Fundamentals

This example demonstrates how to build SVG graphics by hand, using raw SVG elements and CSS for interaction. It shows two distinct compositions: a circular arrangement of colored circles, and a separate SVG canvas with a scatter of black points. The first cluster uses plain SVG `<circle>` elements with fixed coordinates and fills, while a CSS `:hover` rule changes the fill of a central circle. The code relies directly on the browser’s SVG DOM APIs and CSS selectors, with no external libraries, rendering purely through static markup.