sorabh.vijay@gendigital.com

@sorabh-vijay·5 public vizzes

Fork of Collapsible Tree Version 1

This interactive collapsible tree visualization displays a hierarchical dataset of the Flare visualization library codebase, with nodes representing packages and functions. Built with D3 v6, it renders as an SVG with animated transitions that reposition nodes and links when a node is clicked to expand or collapse its children, using a horizontal diagonal link layout. The implementation relies on `d3.tree()` for layout, `d3.linkHorizontal()` for edges, `d3.select()` for SVG manipulation, and `d3.transition()` for smooth 250ms animations. The tree data comes from the `flare-2.json` file, and nodes with names shorter than seven characters are initially collapsed.

Mar 7, 2024

Loading thumbnail…

Fork of Keeling Curve

This example reproduces the Keeling Curve, visualizing monthly average atmospheric CO₂ concentrations from 1958 onward, with a clear upward trend. The line chart uses `d3.line`, `scaleTime`, and `scaleLinear` to map dates and concentrations, while `d3.timeParse` converts year-month strings into JavaScript `Date` objects. Data comes from NOAA’s Global Monitoring Laboratory, loaded from a CSV and rendered with SVG paths and custom axes. The chart highlights the seasonal zigzag pattern superimposed on the long-term rise in carbon dioxide.

Jan 28, 2024

Loading thumbnail…

Fork of Reproduction of Sol LeWitt Innovation

This example reproduces Sol LeWitt’s geometric wall drawing as an interactive SVG composition. It shows a grid of horizontal and vertical lines whose visibility is masked to reveal a central circular cutout. The code constructs the SVG dynamically using raw JavaScript DOM methods (`createElementNS`, `setAttribute`) and defines two SVG masks—`circle-mask` and `circle-mask-2`—to invert the line patterns inside and outside the circle. Fifty parallel lines in each direction are placed with fixed 19-pixel spacing, and the masks alternately hide or reveal sections, creating a crisp two-tone optical effect.

Jan 1, 2024

Loading thumbnail…

Fork of D3 Starter

This example demonstrates the minimal setup required to begin a D3 v7 project. The page renders a blank SVG element appended to the body via `d3.select` and `append`, with the document styled to display a large, centered font size but no visible data or marks. The code imports the `select` function from the D3 module and loads the full D3 library from a CDN, while the package.json specifies d3 7.8.5 as the sole dependency. It serves as a foundational template rather than a functional visualization.

Dec 23, 2023

Loading thumbnail…

svg fundamentals

This example demonstrates fundamental SVG shapes, including circles, rectangles, and lines, rendered directly in an HTML page with inline SVG markup. It also showcases a second SVG scene with ellipses, paths, and a dropdown-style box styled with filters and drop shadows. The code uses core SVG elements such as `<circle>`, `<rect>`, `<line>`, `<ellipse>`, and `<path>`, along with CSS for text styling. The structure is minimal, with no JavaScript libraries, relying purely on static SVG and CSS for visualization.

Dec 21, 2023