adityapalliyil0@gmail.com

@apllyl·13 public vizzes

Animated Reusable D3 Scatterplot

This example demonstrates an animated scatterplot that cycles through different Iris flower measurements every three seconds, smoothly transitioning the positions of 150 data points. Built with D3.js (v7.9.0), it uses `scaleLinear`, `extent`, `axisLeft`, `axisBottom`, and `transition` to re-map the x-axis and animate circle positions with staggered delays. The reusable `scatterPlot` component is configured via a fluent interface, rendering SVG marks inside a fixed viewport that spans the entire browser window, with data loaded from a remote CSV file.

Oct 2, 2024

Loading thumbnail…

Fork of Animated Reusable D3 Scatter Plot

This animated scatter plot displays the Iris Dataset, cycling through four different flower measurements along the x-axis every three seconds. Each point represents an iris sample, with its position transitioning smoothly between views. The visualization uses D3.js modules including `scaleLinear`, `transition`, `axisLeft`, and `axisBottom`, along with a custom `scatterPlot` function. The chart also re-renders its axes with each data dimension change, and the code employs D3's `selection.join()` API to handle entering, updating, and exiting circle elements.

Oct 2, 2024

Loading thumbnail…

Reusable D3 Scatterplot

This scatterplot visualizes the Iris dataset, cycling through four flower measurements (petal width, sepal width, petal length, sepal length) on the x-axis every two seconds via `setInterval`. Built with D3 v7 in a React application, it renders animated SVG circles and axes using `scaleLinear`, `extent`, `axisLeft`, and `axisBottom`. The reusable `scatterPlot` function accepts configurable accessors for data, dimensions, margins, and radius, allowing dynamic updates through `svg.call(plot)`.

Oct 2, 2024

Loading thumbnail…

Reusable D3 Scatterplot with Symbols

A reusable D3 scatterplot displays the Iris dataset with species encoded by symbol type, plotting petal length against sepal length. The chart uses `scaleLinear` for axes, `scaleOrdinal` with `symbols` for species-specific shapes, and `symbolGenerator` to construct SVG paths. The `scatterPlot` function exposes chainable setters for width, height, data, margins, and accessors, applied via `svg.call()`. Axes are rendered with `axisLeft` and `axisBottom`, while `d3.csv` loads the data and parses numeric fields.

Oct 2, 2024

Loading thumbnail…

D3 Scatterplot

This interactive scatterplot visualizes the Iris dataset, plotting petal length against sepal length for individual flowers. Built with React and rendered as an SVG, it uses D3 v7 scaleLinear, extent, and axis functions to map data coordinates and display axes. Circles are drawn using the join operation, with data parsed from a remote CSV file.

Oct 1, 2024

Loading thumbnail…

D3 selection exploration

This example demonstrates D3’s data-join and selection patterns by animating a variable number of circles across the screen. It uses `d3.select`, `d3.range`, and the `data()`, `.join()`, and `attr()` methods to bind an array of objects with computed `x` and `y` positions—derived from sine waves—to SVG `<circle>` elements, updating every frame via `setInterval`. The number of circles oscillates between 5 and 15, and the `.join()` method handles enter, update, and exit seamlessly. The visualization runs in a React-free HTML page with a minimal SVG canvas sized to the window.

Oct 1, 2024

Loading thumbnail…

Javascript Arrays

This example demonstrates the output of a JavaScript array, logging `[0, 1]` to the browser console from within an HTML page. It uses a minimal setup with inline JavaScript and imports the `asecending` function from the D3 library via the `d3` package (version 7.9.0), though the array is rendered without any visual elements. The page serves as a bare-bones starter for testing array operations, relying on standard browser developer tools for output rather than a graphical visualization.

Oct 1, 2024

Loading thumbnail…

Fork of Full Sol LeWitt Reproduction with D3

This visualization recreates a Sol LeWitt wall drawing using D3.js, generating a grid of horizontal and vertical bars that intersect to form a dynamic pattern. The code draws 100 rectangular strips in each direction, using SVG masks to selectively hide portions of the grid with large mathematical symbols. The artwork relies on `d3.range`, `d3.select`, and `d3.symbol` to construct the visual, with the mask system alternating between inverted and non-inverted states to create contrasting regions across the canvas.

Oct 1, 2024

Loading thumbnail…

Full Sol LeWitt Reproduction with D3

This example reproduces a Sol LeWitt-style geometric composition using D3 version 7 and SVG rendering. It draws 100 horizontal and 100 vertical rectangular strips across the full viewport, each masked by a circular pattern that alternates between black and white fills. The masks are created with d3.symbol and a square symbol, transformed to the center, and applied via the `mask` attribute. The code uses `d3.select`, `d3.range`, and `join` to generate the grid.

Oct 1, 2024

Loading thumbnail…

Sol LeWitt Reproduction with D3

A D3.js web page reproduces a Sol LeWitt-style geometric composition by generating a grid of thin horizontal and vertical bars across the full browser window. The bars are drawn as SVG `rect` elements, created with `d3.range` and bound via `selectAll` and `join`. Two SVG masks, each containing a rectangle and a circle, selectively reveal the bars: the horizontal set remains visible only within a central white circle on black, while the vertical set appears outside that circle, producing an intersecting pattern against a white background.

Sep 30, 2024

Loading thumbnail…

Sol LeWitt Reproduction Vertical

This example reproduces a Sol LeWitt-style drawing using raw SVG elements created via the `document.createElementNS` API. It shows a grid of thin horizontal and vertical rectangles that are revealed only within two circular regions at the center of the screen, achieved through SVG masks. The first mask uses a white circle on a black background to show the horizontal bars, while the second mask inverts the colors to display the vertical bars. The layout adapts to the window size, and the 100 bars in each direction are generated procedurally with no external data source.

Sep 30, 2024

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-inspired minimal art piece using SVG, rendering one hundred vertical rectangles in a grid across the full viewport. The code generates each rectangle dynamically via the SVG DOM API, setting its x-position and width while extending its height to cover the screen. The result is a stark, monochrome composition that echoes LeWitt’s geometric aesthetic. No external libraries are used; the implementation relies on native JavaScript and the `createElementNS` method to build the SVG structure.

Sep 30, 2024

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape rendering in a bare HTML page. It shows a black circle centered at the top-left and a blue diagonal line crossing the coordinate space. The code uses the SVG `<circle>` and `<line>` elements directly within an inline `<svg>` container, without any external JavaScript libraries. The rendering relies entirely on SVG’s built-in vector graphics capabilities, with attributes like `cx`, `cy`, `r`, and `stroke` controlling geometry and appearance. The page is static, containing no interaction or data-driven updates.

Sep 29, 2024