Abdul Majeed

@abdulmajeed33·9 public vizzes

Fork of Fork of Fork of Organization Graph Diagram

This network diagram visualizes the connections between arts organizations funded by the Kenneth Rainin Foundation, with four colored main nodes representing major initiatives and smaller child nodes for individual grantees. The graph uses D3's `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` APIs to compute a physics-based layout with collapsible hierarchy. Nodes render as SVG circles with labels, while links draw as colored lines based on parent color, created from data structures in `data.js` and `colors.js`.

Jan 31, 2024

Loading thumbnail…

Fork of Fork of Organization Graph Diagram

This force-directed graph visualizes the network of organizations connected to the Kenneth Rainin Foundation, using D3 v6’s `forceSimulation`, `forceManyBody`, `forceLink`, and `forceCenter` to position nodes and links. Four main entities—Arts Web, Social Impact Commons, Community Arts Stabilization Trust, and AmbitioUS—are rendered as larger colored circles with smaller child nodes and leaf nodes, while links use per-connection distance and color. Node and link colors come from a predefined palette in `colors.js`, and the SVG output is updated on each simulation tick.

Jan 30, 2024

Loading thumbnail…

Fork of Organization Graph Diagram

A network graph diagram maps the connections between organizations funded by the Kenneth Rainin Foundation, such as arts and social-impact groups. Main nodes are larger and color-coded, with smaller child and leaf nodes branching off, while lines link related entities. Using d3.forceSimulation with forceManyBody and forceLink, circles, text, and lines are rendered as SVG elements. Drag interaction lets users reposition nodes, and node and link distances are defined in the data, with colors generated via paletton.com.

Jan 29, 2024

Loading thumbnail…

SiteBulb Graph

This graph diagram visualizes the network of connections among pages on the ScreenBinge website, centered on the main domain and its Hulu-related subpages. Using D3.js v6, the visualization applies a force-directed layout with `d3.forceSimulation` and `d3.forceManyBody` to position nodes, while `d3.forceLink` and `d3.forceCenter` manage edge distances and centering. Nodes are rendered as SVG circles with sizes indicating hierarchy—larger nodes represent main pages, smaller ones child pages, and tiny leaves for individual links. The graph is interactive, allowing users to click nodes to add new connections dynamically.

Jan 9, 2024

Loading thumbnail…

Fork of SVG Fundamentals

This example shows a simple organization graph diagram with three nodes (Alice, Bob, Carol) connected by two links, rendered as circles in an SVG container. The visualization uses d3.forceSimulation to apply force-directed layout, combining forceManyBody for repulsion, forceLink for attraction along edges, and forceCenter to keep the graph centered. The simulation updates circle positions on each tick via callbacks. The code uses d3.select to target the SVG element and appends circle elements with a radius of 30, with the force simulation driving their cx and cy attributes.

Jan 9, 2024

Loading thumbnail…

Fork of SiteBulb Graph

This force-directed graph visualizes the network of connections from the Kenneth Rainin Foundation, with main nodes, child nodes, and leaf nodes sized and colored by hierarchy. Using D3.js v6, it employs `forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, while SVG `circle` and `line` elements render the structure. The graph supports dragging, zooming, and hover tooltips, with data generated from a `colors.js` palette and explicit node/link definitions.

Jan 9, 2024

Loading thumbnail…

Fork of Organization Graph Diagram

A force-directed graph diagram maps connections within the Kenneth Rainin Foundation network, using colored nodes and links to show relationships between a central hub and numerous child nodes representing Hulu-related URLs. Built with D3 v6's `forceSimulation`, the visualization applies `forceManyBody` charge, `forceLink` distance constraints, and `forceCenter` attraction to position elements, while supporting drag interactions. Nodes are rendered as SVG circles with distinct sizes and colors defined in a separate palette, with the data structured through helper functions that assemble parent-child leaf clusters.

Jan 5, 2024

Loading thumbnail…

Fork of Radial Tree of Countries Hierarchy

This fork of Curran Kelleher’s World Countries Hierarchy block shows a radial tree of geographic regions, with the root node labeled "SB" and leaves labeled Asia, Europe, and Africa repeated many times. The SVG visualization uses d3.cluster to compute the radial layout and d3.zoom for panning and zooming interactions. Node labels are sized by depth and rotated for readability, while links are drawn as cubic Bézier curves. The data is loaded from a local JSON file via d3.json.

Jan 5, 2024

Loading thumbnail…

Fork of World Countries Tree

This fork of the World Countries Tree generates a horizontal dendrogram from hierarchical JSON data, displaying nodes as text labels connected by curved links. The example uses D3 v5’s `tree`, `hierarchy`, and `linkHorizontal` to compute the layout, while a d3 `zoom` behavior enables panning and scaling of the SVG canvas. Node text size scales inversely with depth, and the Playfair Display font stylizes labels.

Jan 5, 2024