Neel Mehta

@nmehta32·6 public vizzes

Fork of D3 Starter

This example demonstrates a minimal D3.js starter setup, showing two circles (one red, one blue) connected by a path that updates dynamically. It uses an SVG rendering approach with D3 v7, where a line generator (`d3.line`) connects the circle coordinates. A `d3.timer` drives an update function that continuously re-reads the circles' positions and redraws the connecting line. The code also utilizes data binding with `selection.data()` and `selection.join()` to manage the path element between frames.

Dec 27, 2022

Loading thumbnail…

Fork of D3 Selection Exploration

This example demonstrates animated sine waves rendered as a dynamic set of SVG circles whose positions and radii update continuously with time. The visualization uses `d3.selectAll`, `.data()`, and `.join()` to bind and update circle elements, while a `setInterval` loop calls `makeData()` to generate new coordinates and sizes. The code relies on D3 v6 APIs including `d3.line` and `d3.range`, with `vizData()` applying attribute updates for `cx`, `cy`, and `r`. The animation runs at 60 frames per second, creating a fluid, undulating pattern.

Dec 27, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This example reproduces a Sol LeWitt-style drawing using raw SVG elements and mask manipulation. The visualization renders a series of overlapping horizontal and vertical stripes by creating rectangles and applying circular SVG masks to confine their visibility, producing a geometric composition. The code uses DOM manipulation via `createElementNS` and `setAttribute` to construct the SVG, with two distinct masks (`circle-mask` and `circle-mask-2`) controlling different stripe patterns. The result is a monochromatic, grid-based artwork where varying rectangle heights and widths generate a rhythmic, minimalist pattern across the full viewport.

Dec 17, 2022

Loading thumbnail…

Fork of Sol LeWitt Reproduction

This visualization reproduces a Sol LeWitt art piece using an SVG rendering approach. It displays a grid of horizontal and vertical lines that intersect within two circular masks, creating a nested geometric pattern centered on the screen. The code constructs SVG elements dynamically via the Document API, using `createElementNS` to build rectangles and circles. Two masks (`circle-mask` and `circle-mask-2`) control visibility: the first reveals horizontal stripes inside a 200-pixel-radius circle, while the second exposes vertical stripes in the surrounding area, producing a layered, minimalist composition.

Dec 17, 2022

Loading thumbnail…

cool art

This example uses D3 version 7 to display the text “Hello D3 version 7” centered on the page at a very large font size. The code loads D3 from a CDN and uses the `select` function to target the body element, then applies the `.text` method to set its content. The page demonstrates a minimal setup with D3’s selection and DOM manipulation APIs, styled entirely through CSS in the embedded `style` tag.

Dec 17, 2022

Loading thumbnail…

SVG fundamentals

This example demonstrates the fundamental SVG shape, a circle, rendered inside an HTML page. The visualization shows a basic circle with a specified center coordinate and radius, highlighting how vector graphics are defined by geometric properties. The implementation uses the `<svg>` and `<circle>` elements from the SVG specification, with attributes like `cx`, `cy`, and `r` to position and size the shape. The drawing is rendered directly in the browser using the SVG rendering engine, as shown in the index.html file.

Dec 15, 2022