Jediquu

@Jediquu·9 public vizzes

DONE: NODES, LINKS FROM FILE WITH WEIGHTS AND GRAVITY

A force-directed graph visualizes weighted connections between nodes loaded from a CSV file, with gravity pulling all nodes toward the center. Users can run Dijkstra, breadth-first, or depth-first search from a specified root node, highlighting the resulting path in red while dimming passed nodes and links. Built with React for UI controls and D3 v3's `d3.layout.force` for physics, the visualization renders nodes and curved links as SVG paths with animated tick updates, link labels showing weights, and arrow markers.

May 21, 2023

Loading thumbnail…

Draft1 Fork of Organization Graph Diagram

This interactive network graph visualizes relationships between organizations, with nodes sized by importance and links weighted by connection strength. Built with D3 v3 and React, it uses `d3.layout.force` for physics-based layout, SVG circles and lines for rendering, and drag interactions for node repositioning. Data loads from a CSV file, with node colors assigned from a generated palette. Link thickness and length encode weight values, while labels display connection IDs beside each edge.

May 9, 2023

Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

May 9, 2023

Loading thumbnail…

Untitled

This interactive network diagram uses a force-directed layout to display a small hierarchical dataset from a JSON file. The visualization distinguishes node types by color: blue for collapsed packages, light blue for expanded ones, and orange for leaf nodes. Users can click any node to expand or collapse its children, triggering a re-layout. The code leverages the D3.js v3 layout APIs, specifically `d3.layout.force` for the simulation and `d3.layout.tree` to generate links. The force simulation is configured with custom `linkDistance`, `charge`, and `gravity` parameters, and the rendering is done as an SVG with click-to-toggle interaction.

May 9, 2023

Loading thumbnail…

Untitled

A force-directed network graph displays the hierarchical structure of the Flare dataset, with nodes representing files and folders and links showing parent-child relationships. Node size reflects the numeric size attribute, while color distinguishes leaf nodes (orange), collapsed packages (blue), and expanded packages (light blue). Users can click nodes to toggle their children, dynamically collapsing or expanding branches. Built with React and D3 v3, the visualization uses `d3.layout.force` for physics simulation, `flatten` to convert the tree, and SVG elements for rendering. The custom React component `VizContainer` follows the margin convention and optionally displays background rectangles for layout debugging.

May 8, 2023

Loading thumbnail…

Fork of React + D3 Viz Starter

A fork of the React + D3 Viz Starter demonstrates a reusable `VizContainer` React component that abstracts SVG and group elements using D3’s margin convention. The example renders a blank SVG with gray outer and inner rectangles to visualize the chart area and margins, which can be toggled via the `showMargins` prop. It uses React 16 and D3 v6, loaded via CDN, to structure the visualization, while the included `graph.json` file provides hierarchical data for future chart implementation.

May 8, 2023

Loading thumbnail…

Draft2 Fork of Organization Graph Diagram

This interactive force-directed graph visualizes the network of connections between nodes, with circle size representing node importance and link thickness indicating connection weight. Built with React and D3 v6, the visualization uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes dynamically. The SVG rendering displays node labels and link labels that rotate along the edge angle. Users can drag nodes to reposition them, triggering simulation restarts. The data originates from a CSV file and includes a button to add new main nodes to the diagram.

May 8, 2023

Loading thumbnail…

Untitled

This interactive network graph visualizes the connections between nodes, using a force-directed layout to arrange them spatially. Built with React and rendered as SVG, the visualization employs `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to compute node positions and link distances. The graph supports dynamic updates, allowing nodes and links to be added or removed while the simulation restarts to re-stabilize. Colors are assigned from predefined palettes, with node sizes indicating hierarchy. Data loading from a CSV file is prepared but commented out, currently showing three main nodes without links.

May 8, 2023

Loading thumbnail…

Fork of Organization Graph Diagram

This fork of an organization graph diagram visualizes relationships within a dataset, using an interactive node-link layout to show connections between entities. Built with React and D3 v6, it relies on a force-directed simulation (`d3.forceSimulation`, `d3.forceManyBody`, `d3.forceLink`) to position nodes and links, with draggable nodes and color-coded clusters. The SVG rendering displays circles and connecting lines, with link labels placed at midpoints. The underlying data comes from a CSV file containing node IDs and weighted adjacency pairs.

May 8, 2023