helen azad

@helenAzad·7 public vizzes

Fork of Force-Directed Graph hierarchy with drill up & drill down

This interactive network visualization demonstrates hierarchical data exploration in a force-directed graph, allowing users to drill down from a high-level community view into individual node connections and drill back up. The example combines a base graph of five communities with sub-graphs representing their internal structures, augmented by real-world datasets from the Les Misérables character network and the email-Eu-core communication network, fetched from GitHub and parsed with custom utility functions. Built with d3's forceSimulation, forceLink, forceManyBody, and forceCenter APIs within an SVG container, the visualization uses zoom functionality and color-coded nodes to distinguish between levels, while user interaction triggers level transitions through a stack-based drill-up mechanism.

Mar 14, 2024

Loading thumbnail…

Fork of papa - Social Network Graph

This example demonstrates an interactive social network graph built with D3.js v7, rendered as SVG. It models a network of university friends and professors, where a central "University" node connects to individual people (e.g., Deepika, Mohan, Rahul) and academic majors (e.g., Chemical, Civil, Computer). The visualization uses a force-directed simulation to position nodes, with red for the central hub and blue for peripheral nodes, and includes drag-and-drop interactivity for node manipulation. Buttons for adding or removing major nodes are also present, though not fully functional in the current implementation.

Mar 11, 2024

Loading thumbnail…

introduction d3

This example demonstrates a star graph visualization built with D3.js, rendering an SVG canvas populated with nodes and edges. It shows how to load D3 v7 via CDN and use local ES6 modules to import the library. The code appends SVG elements, including rectangles and paths, to construct the graph structure. Data is hardcoded in a separate JSON file containing professor information, including names, majors, and research fields, though the visualization itself focuses on the graphical network representation. The example highlights D3's capabilities for programmatic SVG manipulation and data-driven document styling.

Mar 11, 2024

Loading thumbnail…

Fork of Social Network Graph

This interactive network graph visualizes a social network of 10 individuals, mapping friend connections as links between circular nodes. Built with D3 v7 and rendered as SVG, the visualization uses a force-directed layout—though the code shown also includes a click-to-explore prototype where clicking a node swaps the view to a bar chart of related values, with a button to return. Node positions are computed dynamically, and link width encodes relationship strength via the `value` field. The graph is interactive, allowing users to click nodes and explore connections. The single cyan color scale keeps the visual minimal while focusing on network topology.

Mar 11, 2024

Loading thumbnail…

Fork of ICE8 - Social Network Graph

A force-directed graph visualizes a social network of eight people connected to a central "University" node, with all links labeled as "Friend with." The D3 v6 visualization uses `d3.forceSimulation` with link, charge, collision, and center forces to position nodes, which are rendered as yellow circles with name labels. The graph is drawn as an SVG, with links as lines and node markers, and nodes support drag-and-drop interactions. Hovering a node highlights it with a green outline, while the viewBox attribute ensures the visualization remains responsive.

Mar 10, 2024

Loading thumbnail…

Fork of Hello VizHub

This example demonstrates a force-directed network graph of a university and its academic departments, visualized as a star topology with a central node connected to five satellite nodes. Built with D3 version 7, it uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to simulate node movement. The SVG rendering shows nodes as red and blue circles, with labels and links updated on each simulation tick. Node and link positions are computed dynamically, producing an interactive and animated layout.

Mar 10, 2024

Loading thumbnail…

Fork of Create a face with d3.js!

This example builds a smiling face out of SVG shapes using D3.js v7, with a yellow circular head, two eyes, rectangular eyebrows, and an arc-based mouth. The code loads D3 from UNPKG and uses the `select` API to target the SVG element, then applies chained `transition` calls with a 2000-millisecond duration to animate the eyebrows up and down. The construction relies on D3's `arc` generator for the mouth path and explicit coordinate calculations for positioning features relative to the canvas center.

Mar 8, 2024