Junaid Ahmed Jameel

@junaidaj86·6 public vizzes

Fork of D3.js collapsible tree with boxes

A collapsible tree diagram displays hierarchical data as rounded rectangular nodes connected by curved links, with each node labeled by name and colored according to its type. Clicking a node collapses or expands its subtree with smooth 750-millisecond transitions. The visualization uses D3.js v7’s `d3.hierarchy` and `d3.tree` layouts to position nodes, then renders SVG elements with custom node dimensions and styling. Data is loaded from a JSON object containing node names, types, and link directions.

Jan 10, 2024

Loading thumbnail…

Fork of D3.js collapsible tree with boxes

This interactive visualization presents a hierarchical tree of nodes as boxes, rendered with SVG and animation. Users can click nodes to collapse or expand branches, with links and arrows indicating relationships, styles, and direction (SYNC or ASYN) between parent and child elements. The chart uses D3.js v6’s `d3.tree` layout, `d3.zoom` for pan and zoom, and transitions for smooth updates. JSON data defines node types, labels, versions, and link metadata, which also drive color-coding of boxes and tooltip text on hover.

Jan 7, 2024

Loading thumbnail…

Fork of solwith d3 complete

This example reproduces a Sol LeWitt–style drawing with D3.js, showing a circular mask overlaid on two sets of alternating horizontal and vertical black-and-white stripes. The SVG output is generated entirely through D3’s `select`, `range`, and `.join()` API to create 100 rectangles along each axis, with two masks (`circle-mask` and `circle-mask-2`) defining the contrast and inversion between the stripe groups. The code uses `window.innerWidth` and `window.innerHeight` to size the canvas dynamically.

Jan 4, 2024

Loading thumbnail…

solwith d3

This example recreates a Sol LeWitt-style drawing using D3, showing a grid of horizontal and vertical lines overlaid with circular masks to create a distinctive visual rhythm. The code uses D3 selections and the `join` method to append SVG `rect` elements, generating 100 lines in each direction across the full viewport. Two SVG masks—one with a white circle on black, the other inverted—alternately reveal and hide portions of the grid, producing the final artwork. The rendering relies on SVG output within a minimal HTML page.

Jan 4, 2024

Loading thumbnail…

Fork of Sol Lewis with D3

This example reproduces a Sol LeWitt-style wall drawing as an interactive web page. It displays a grid of horizontal and vertical stripes that are partially masked by two circular cutouts, creating a layered geometric pattern inspired by the artist’s work. The visualization uses D3.js (version 6.6.1) to select the body and append an SVG canvas, while the mask and rectangle elements are created directly with the Document Object Model (DOM) APIs, with `mask` and `mask2` applied to the stripe layers.

Jan 4, 2024

Loading thumbnail…

Sol Lewis

This example reproduces a Sol LeWitt wall drawing using overlapping horizontal and vertical bands that intersect only within a centered circular region. Created with raw SVG and JavaScript, the piece renders 100 horizontal strips and 100 vertical strips, each clipped by one of two complementary circular masks to create a checkerboard-like interplay inside the circle while remaining solid outside. The code constructs the SVG elements dynamically using `document.createElementNS` and applies mask effects via `url(#circle-mask)` references, producing a geometric, generative composition without external libraries.

Jan 4, 2024