nitika1234567

@nitika1234567·6 public vizzes

Untitled

This line chart visualizes a dataset of 13 coordinate pairs, plotting the relationship between an independent and a dependent variable. The chart is constructed using D3 v4, with linear scales for both axes and red dots connected by a monotone curve. The SVG output includes a title, axis labels, and axes generated using `d3.axisBottom` and `d3.axisLeft`. The data is hardcoded as a 2D array, and the line is drawn using the `d3.line` generator with monotone interpolation.

Aug 25, 2022

Loading thumbnail…

Fork of React & D3 Starter

This example presents the classic Iris dataset as a scatter plot, mapping sepal length to the x-axis and petal length to the y-axis, with each flower as a semi-transparent circle. The visualization serves as a starter template for scalable React and D3 projects. Built with React 18 and D3 v7, it decouples the React component from the D3 rendering logic, using `useEffect` and `useRef` to manage the SVG. The code employs D3's `selectAll` and `.join` for efficient element creation, `scaleLinear` for axes, and `csv` for data loading.

Aug 17, 2022

Loading thumbnail…

Fork of HTML Starter

This example demonstrates basic SVG rendering within an HTML page, showing three shapes: two circles and a rectangle. The first circle uses default black fill, while the second applies custom stroke and fill attributes with a red stroke, blue fill, and stroke-width of 5. A third `RECT` element is partially defined. The code uses plain SVG markup directly in the HTML without any JavaScript libraries or frameworks, rendering via the SVG API.

Aug 17, 2022

Loading thumbnail…

sol Niti

This example reproduces Sol LeWitt’s Wall Drawing #370 using raw SVG and JavaScript. It shows a grid of thin horizontal and vertical lines, where only those inside a central circle remain visible—with alternating line directions creating a crosshatched circular pattern against a blank background. The code builds the scene by creating SVG rectangles for each line and applying two SVG masks: one with a white circle on black to reveal horizontal lines, and another with a black circle on white to reveal vertical lines. No external libraries are used; the rendering relies entirely on the Document Object Model and SVG element creation.

Aug 2, 2022

Loading thumbnail…

Fork of Sol LeWitt reproduction circle

This example reproduces Sol LeWitt’s geometric wall drawing using purely SVG and JavaScript DOM APIs. A circular mask is applied over a grid of horizontal and vertical rectangle strips, with two complementary masks alternating light and dark bands. The result is a clean, mask-based rendering of intersecting lines confined to a circle, created dynamically without any external visualization libraries. The code relies on raw SVG element creation and mask definitions to achieve the effect.

Aug 2, 2022

Loading thumbnail…

SVG Fundamentals

This example demonstrates basic SVG shape primitives, combining circles, a rectangle, a line, and a path within a fixed 950×500 canvas. The SVG rendering shows layered elements, including a large green circle with a smaller red center point, a red rectangle with a navy border, and arbitrary geometric paths. The code uses native SVG APIs directly in the HTML, with attributes for positioning, fills, strokes, and stroke widths, illustrating fundamental vector graphics without external libraries.

Aug 2, 2022