Matheesha Yapa

@matheeshaYapa·10 public vizzes

Animated Reusable D3 Scatter Plot

This example shows a scatter plot using the Iris dataset, with points colored by species. An animation cycles through four flower measurements—petal width, sepal width, petal length, and sepal length—every two seconds. The chart uses a reusable D3 function `scatterPlot` that leverages `d3.scaleLinear`, `d3.scaleOrdinal`, `d3.symbol`, and `d3.axisBottom`/`d3.axisLeft` to render symbols and axes. Rendering uses SVG paths with transitions between data configurations.

Jul 2, 2023

Loading thumbnail…

Reusable D3 Scatter Plot

This example demonstrates a reusable D3 scatter plot that visualizes the Iris dataset, with points colored and shaped by species. The plot cycles through different x-axis variables every two seconds, animating transitions between sepal and petal measurements. Built with D3 v7, it uses `scaleLinear`, `scaleOrdinal`, `symbol`, `axisLeft`, and `axisBottom` APIs to render SVG marks and axes. The visualization is fully responsive, filling the browser window, and updates dynamically by re-invoking the custom `scatterPlot` function with new data accessors.

Jul 2, 2023

Loading thumbnail…

D3 Scatter Plot

This D3 scatter plot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. The example demonstrates a straightforward workflow using D3 version 7.8.5, where it loads the CSV data from a URL, scales the x and y axes with `scaleLinear`, and uses `extent` to determine the domain. The SVG rendering is created with a full-viewport canvas, with circles positioned using the computed scales. Axes are generated using `axisLeft` and `axisBottom`, and the code applies a `selectAll` and `join` pattern to render the data points.

Jun 28, 2023

Loading thumbnail…

D3 Selections

An animated SVG demonstrates the D3 selection API by updating a set of circles. The visualization shows fifteen circles moving in a sine wave pattern, with their vertical position oscillating over time. The code uses D3’s `select` to target the body element, `range` to generate data, and a `join` operation to efficiently update existing circles based on the incoming data. The animation runs at 60 frames per second via `setInterval`, creating a smooth, continuous motion. The example highlights the workflow of selecting, appending, and merging SVG elements with D3’s data-binding methods.

Jun 27, 2023

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

The example reproduces a Sol LeWitt–style composition using D3 and SVG, where 100 horizontal bars are layered over full-screen masks to create geometric patterns. It renders data generated from `d3.range(n)`, applying mask IDs via `selection.call(renderMask, ...)`. The masks use `d3.symbol` with symbol types from `symbols` to draw white shapes on black or inverted backgrounds, demonstrating D3 v7’s join and selection methods. The SVG output adapts to the viewport dimensions, with no external data source.

Jun 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction - D3 (2)

This example reproduces a Sol LeWitt drawing using D3 version 7. It overlays two sets of striped rectangles—one horizontal and one vertical—each limited to a circular region through SVG mask elements. The horizontal stripes are masked by a circle in a black rectangle, while the vertical stripes use an inverted mask with a black circle on white. The visualization fills the entire browser window, with stripes spaced at 20-pixel intervals. The code uses `d3.select`, `d3.range`, and SVG `mask` elements to achieve the geometric composition.

Jun 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction - D3

This example reproduces a Sol LeWitt-style geometric drawing using D3 version 7.8.5 in an SVG rendering. It shows a grid of 100 horizontal and vertical lines, with two circular masks creating a central overlap effect: one mask reveals lines through a black rect and white circle, while the other inverts the pattern. The code imports `select` and `range` from D3 to generate the line data, appends rectangles with calculated positions, and applies masks defined as SVG elements to produce the layered visual.

Jun 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction - vertical

This piece recreates Sol LeWitt’s vertical line drawing by rendering 100 horizontal and 100 vertical SVG rectangles across the full viewport. A circular mask, defined with two SVG `<mask>` elements, restricts each set of lines to a central ring: white lines appear inside the circle, while black lines fill the area outside it. The code builds all elements imperatively using `document.createElementNS` and `setAttribute`, with no D3 methods applied despite the library being imported. The result is a crisp, geometric interplay of line orientation and masked contrast.

Jun 27, 2023

Loading thumbnail…

Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt wall drawing using purely geometric forms: a series of vertical rectangles evenly spaced across the full browser window. It renders 100 thin, black bars, each 10 pixels wide and as tall as the viewport, using raw SVG elements created and appended via the Document Object Model (DOM) API. The code does not use any D3 functions or libraries, instead relying on native JavaScript to set the width, height, and position of each rectangle. The piece emphasizes minimal, systematic repetition, echoing LeWitt’s instructional art, with the final output being a static, monochrome composition.

Jun 27, 2023

Loading thumbnail…

SVG Fundamentals

This example demonstrates fundamental SVG shape elements, including rectangles, circles, lines, and paths, using static coordinates and styling attributes. It showcases basic D3 version 7 usage via `select` from the `d3` module to set the body text. The visualization is rendered directly in the browser through an inline SVG element with a width of 960 and height of 500, featuring shapes such as a blue outlined rectangle, red and default-colored circles, a yellow rectangle with a navy stroke, a diagonal line, and a black polyline path. The code also embeds an introductory video and README explaining D3 version 6.

Jun 27, 2023