Skip to main content
Log in
K

kakkanadjoy@yahoo.com

@Joyvinod·15 public vizzes

Loading thumbnail…

D3 Selection exploration jvk

This example demonstrates basic D3 selection mechanics by appending an SVG canvas to the body and binding an array of 15 integers to circle elements using `d3.select` and `d3.selectAll`. The code initializes a `range` dataset and prepares a data join with `svg.selectAll('circle').data(data)`, though it does not render any visible circles. Using D3 v7.9.0, it shows the initial steps of selecting, binding, and sizing an SVG to the full browser window.

Jan 24, 2025
Loading thumbnail…

Sol lewitt reproduction Vertical JVK

A web-based reproduction of a Sol LeWitt wall drawing uses overlapping horizontal and vertical bands to create a grid. A circular SVG mask reveals only the horizontal stripes within a central circle, while the vertical stripes extend across the full canvas. The code generates 100 striped rectangles for each orientation using standard W3C SVG methods. The piece is rendered entirely through JavaScript and the DOM API, without external libraries.

Jan 24, 2025
Loading thumbnail…

Fork of JAva Script basics GT JVK

This example reproduces a Sol LeWitt wall drawing as an SVG bar chart. It loads data from a local CSV file using `d3.dsv` and maps each record to a set of bars, with the x- and y-scales’ domains set from the parsed data. The visualization appends a container `<g>` element via `d3.select` and adds axes, axis labels, and a title, all rendered with SVG primitives. The code is a template skeleton, with placeholder calls for `x.domain()` and `y.domain()`, and the bars are created by selecting existing elements with `selectAll`, indicating an incomplete, instructional implementation.

Jan 24, 2025
Loading thumbnail…

JAvascript Arrays jvk

This example demonstrates JavaScript array manipulation techniques using the D3 library. It creates a sequence of numbers with a range function, then applies map to transform the values and reduce to compute their sum. It also converts an array of key-value entries into an object using reduce, and sorts the entries alphabetically with the D3 `ascending` comparison function. The visualization logs these operations and their results to the developer console.

Dec 23, 2024
Loading thumbnail…

Full Sol lewitt reproduction with D3 - exercise

This example reproduces a Sol LeWitt-style wall drawing using D3.js, rendered as an SVG of alternating horizontal and vertical grid lines. Two mask layers, each containing a different geometric symbol from D3’s symbol generator, selectively reveal or hide portions of the grid. The first mask is inverted to expose lines through one set of shapes, while the second uses a complementary fill to display the remaining pattern. The code relies on `d3.select`, `d3.range`, `d3.symbol`, and `d3.symbols` to construct the composition dynamically.

Dec 21, 2024
Loading thumbnail…

Fork of Fork of Full Sol lewitt reproduction with D3 - not using class JVK

This visualization reproduces a Sol LeWitt wall drawing using D3.js, rendering a grid of horizontal and vertical stripes across the entire browser window. Two SVG masks, each containing a set of geometric symbols, apply contrasting cutout effects to the stripe layers, creating a dynamic interplay between positive and negative space. The code uses D3’s selection, range, and symbol APIs to generate the patterns and masks, with the SVG output sized to the viewport. The artwork draws on LeWitt’s conceptual instructions, here implemented programmatically rather than by hand.

Dec 21, 2024
Loading thumbnail…

Fork of Full Sol lewitt reproduction with D3 - not using class JVK

This visualization recreates a Sol LeWitt-style geometric composition using intersecting horizontal and vertical bands masked by two diamond shapes. The bands alternate between visibility and inversion, creating a layered optical effect. Built with D3.js v7, the code generates 100 rectangles along each axis and applies SVG masks using the `symbol` and `symbols` APIs to produce the central diamond cutouts. The rendering is entirely SVG-based, with the mask elements dynamically appended via a reusable `renderMask` function.

Dec 19, 2024
Loading thumbnail…

Full Sol lewitt reproduction with D3 - not using class JVK

This example reproduces part of a Sol LeWitt wall drawing using only D3.js (version 7.9.0) and SVG, without relying on any external class. The artwork displays a grid of alternating horizontal and vertical thin white lines whose visibility is masked by two shapes: a large circular gradient-like cutout and a smaller solid black circle, producing layered geometric effects. The code builds the line grid using `d3.range` and `join` operations, then creates `mask` elements with paths and circles to selectively reveal the strokes. Rendering is performed entirely in the browser with SVG, adapting to the full window size.

Dec 19, 2024
Loading thumbnail…

Sol lewitt reproduction Vertical and horizontal JVK

This example reproduces a Sol LeWitt-style geometric drawing, showing a grid of vertical and horizontal black lines that are partially revealed through two circular masks. The code constructs an SVG element using the raw DOM API (`createElementNS`) to generate the lines and masks. A first mask hides lines outside a central circle, while a second mask uses an inverted circle to show only vertical lines within that same area. The piece is created entirely with JavaScript, with no external libraries.

Dec 19, 2024
Loading thumbnail…

Sol lewitt reproduction with D3 - not using class JVK

This example reproduces a Sol LeWitt-inspired grid of horizontal and vertical stripes, clipped by two circular masks to reveal a central intersection. Built with D3.js 7.9.0 and rendered as an SVG, it uses the `select`, `range`, and `join` APIs to generate 100 rectangles along each axis. The first mask blacks out a circle over the full frame, while the second inverts the mask to highlight the crossing bands. The visualization demonstrates D3’s declarative SVG construction and mask-based clipping techniques.

Dec 18, 2024
Loading thumbnail…

Sol lewitt reproduction with D3 JVK

This example reproduces a Sol Lewitt wall drawing using D3.js version 7.9.0 and SVG rendering. It displays a grid of alternating horizontal and vertical striped rectangles, where two circular masks reveal the intersecting lines. The code uses `d3.range` to generate 100 indices for positioning the stripes, and the D3 selection API (`select`, `append`, `attr`, `data`, `join`) to build the SVG structure and apply the mask definitions. The masks are constructed with black and white circles and rectangles to selectively show or hide portions of the line patterns.

Dec 18, 2024
Loading thumbnail…

Fork of Sol lewitt reproduction Vertical JVK

This example reproduces a Sol LeWitt drawing by layering two sets of striped rectangles inside an SVG canvas. One set of horizontal stripes is masked by a central white circle, while the other set of vertical stripes uses an inverted mask, creating intersecting grid patterns. The code uses the SVG API to create elements and masks, manipulating `createElementNS` and attributes. It renders the entire browser viewport, defining masks and loops to generate the grid geometry.

Dec 17, 2024
Loading thumbnail…

Sol lewitt reproduction JVK

This example reproduces a Sol Lewitt-style geometric composition by rendering a series of vertical bars across the full height of the browser window. The visualization uses plain JavaScript with the SVG DOM API to create and append 100 rectangle elements, each 10 pixels wide, spaced 20 pixels apart. The bars are drawn dynamically based on the window’s inner dimensions, resulting in a clean, grid-like pattern that fills the screen. No external libraries are used; the code relies directly on `document.createElementNS` and SVG attributes to generate the artwork.

Dec 17, 2024
Loading thumbnail…

JAva Script basics JVK

This example uses raw JavaScript console output to teach basic language concepts, including variable declaration with `let` and `const`, object mutation, increment operators, for loops, and function declarations. Running inside an SVG element with no visible data visualization, the code demonstrates arithmetic operations and logic through repeated `console.log` calls. The page renders a 960×500 SVG canvas but displays no graphical elements, focusing entirely on developer console interaction. This Sol Lewitt-inspired reproduction relies on JavaScript's standard runtime rather than any external libraries or APIs.

Dec 17, 2024
Loading thumbnail…

SVG fundamentals JK

This example demonstrates fundamental SVG shapes rendered directly in an HTML page using React. It shows circles, a rectangle, a line, and a path, each with distinct fill colors, stroke styles, and positions within a 1000x1000 SVG canvas. The code uses raw SVG elements like `<circle>`, `<rect>`, `<line>`, and `<path>` with attributes such as `cx`, `cy`, `r`, `x`, `y`, `width`, `height`, and `stroke-width`. No external data or dynamic behavior is present; it serves as a static, bare-bones illustration of SVG markup in a React context.

Dec 16, 2024