dwikbtn

@dwikbtn·6 public vizzes

scatter plot

This scatter plot visualizes the Iris dataset, mapping petal length to the x-axis and sepal length to the y-axis. Each flower is rendered as a circle using D3 v7’s `select`, `scaleLinear`, `csv`, and `extent` functions, with axes drawn via `axisLeft` and `axisBottom`. The SVG output fills the browser window, with data loaded from a remote CSV file and parsed into numeric fields before plotting.

Aug 18, 2022

Loading thumbnail…

d3 selection

A set of fifteen circles oscillates vertically in a sine wave pattern, driven by a continuous animation loop. The example demonstrates D3's selection and data-join methods, using `d3.select`, `d3.range`, `selection.data`, `enter`, `merge`, and `exit` to update SVG circle positions every frame. An interval running at 60 frames per second increments a time variable, which modulates each circle's y-coordinate based on its index. The code also includes commented-out alternative using `selection.join`, and renders directly to an SVG canvas sized to the browser window.

Aug 13, 2022

Loading thumbnail…

another shape Sol LeWitt Reproduction with D3

A Sol LeWitt-inspired generative drawing uses D3 to compose horizontal and vertical hairlines that are selectively revealed through two SVG masks. The artwork demonstrates algorithmic line placement and masking with d3.select, d3.range, d3.symbol, and SVG mask elements for layered visual density. The piece runs in the browser, rendering to an SVG canvas sized to the window, and uses two masks populated with varied path symbols to create contrasting positive and negative space.

Aug 10, 2022

Loading thumbnail…

Fork of Sol lewitt d3

This example generates an abstract grid of 100 horizontal and vertical rectangles that intersect to form a full-screen pattern. Two SVG masks with circular holes are applied to the groups of rectangles, creating the illusion of a blank circular area at the center where the two mask types overlap. The code uses d3.select, d3.range, and SVG join operations to append the rect elements, along with mask and circle SVG elements to define the clipping effect. The visualization adapts to the browser window size by setting width and height from window.innerWidth and innerHeight.

Aug 10, 2022

Loading thumbnail…

Sol lewitt vanilla js

A generative art piece renders a grid of horizontal and vertical rectangles as SVG elements, creating a striped pattern across the full browser viewport. The layout uses two SVG masks to selectively reveal the stripes: a circular mask exposes a central disk of horizontal bands, while an inverse mask reveals the remaining area filled with vertical bands. Built with vanilla JavaScript and the SVG DOM API via `document.createElementNS`, the visualization constructs all shapes procedurally without any external libraries, directly manipulating attributes like `x`, `y`, `width`, and `height`.

Aug 9, 2022

Loading thumbnail…

Fork of HTML Starter

This example shows a simple static SVG visualization: a single green circle positioned at coordinates (150, 50) with a radius of 50. The code uses plain HTML markup with inline SVG elements, requiring no external libraries or JavaScript. The rendering approach relies entirely on the browser's native SVG support, and the circle's appearance is defined through SVG attributes for fill color and geometry. This serves as a minimal starter template for building more complex SVG-based visualizations.

Aug 6, 2022