Nafi

@NafiulA·6 public vizzes

reusable charts

This example displays a scatter plot of the Iris dataset, mapping petal length on the x-axis and sepal length on the y-axis. It uses D3 v6 with d3.csv, d3.scaleLinear, d3.axisLeft, and d3.axisBottom to load data, scale positions, and render axes. Circles are appended to an SVG via d3.select and data joins, sized to the full viewport.

Jul 16, 2022

Loading thumbnail…

D3 scatterplot

This visualization is a D3.js scatterplot of the classic Iris dataset, plotting petal length on the x-axis against sepal length on the y-axis. The code uses `d3.csv` to load the data, `d3.scaleLinear` to map data values to pixel coordinates, and renders circles via SVG. Axes are drawn using `d3.axisLeft` and `d3.axisBottom`. The chart fills the browser window, with margins applied to the plot area, and the dataset is sourced from a remote GitHub Gist.

Jul 16, 2022

Loading thumbnail…

d3 selections

Twenty colored circles undulate vertically across the full screen, their radii pulsing and colors randomly changing at 60 frames per second. This animation demonstrates d3 selections and data joins, where a static `range(20)` array is repeatedly re-bound to existing circle nodes via `selectAll('circle').data(data)`. Using d3 version 6.6.1, the `enter()` selection appends new circles with random fills, while the update selection adjusts `cx` and `cy` attributes based on a sine wave offset by time `t`. The SVG renders in the browser body without margins.

Jul 13, 2022

Loading thumbnail…

Sol LeWitt Reproduction with d3

This example reproduces the visual style of Sol LeWitt’s geometric wall drawings. It renders a grid of alternating horizontal and vertical stripes across the full browser window, with each stripe group masked by a different SVG mask. D3 v6 is used to generate the SVG elements, while `d3.symbol` and `d3.symbols` draw the mask shapes—a series of distinct symbols, such as circles and crosses—that selectively reveal or hide the stripes. The masks invert their fill to create contrasting cutout effects across the composition.

Jul 7, 2022

Loading thumbnail…

Sol LeWitt Reproduction

This example reproduces a Sol LeWITT wall drawing using two circular SVG masks to create a grid of alternating horizontal and vertical black lines. The first mask reveals only the horizontal stripes within a centered circle, while the second mask applies the opposite effect, showing vertical stripes outside that same circular region. The code builds the scene entirely with native SVG elements—masks, rectangles, and loops—rendering crisp geometric patterns that mimic LeWitt’s instructional art, with no external libraries or data sources.

Jul 6, 2022

Loading thumbnail…

SVG fundamental

This example shows four black horizontal bars of decreasing width labeled A through D, creating a simple data-encoding visualization. The bars are drawn as SVG `<rect>` elements with fixed pixel dimensions, while the labels use SVG `<text>` elements. The page relies on plain HTML, CSS for styling (including font size and margin reset), and JavaScript is referenced though not directly used in the visible code. Rendering is handled entirely through inline SVG within the `index.html` file, demonstrating fundamental SVG shape and text placement without external libraries or data sources.

Jul 5, 2022