Skip to main content
SimilarExport ZIP
100%

Graph

✓ Published0🌍 Public
Mmandadi1999
Last edited Jul 22, 2023
Created on Jul 22, 2023
Forked from D3 Starter

A force-directed graph displays a genealogy of Vijayanagara dynasty rulers, with orange circular nodes labeled by name and connected by lime-green links. The visualization uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes and prevent overlap. Data loads from a JSON file via `d3.json`, and the static color scheme in the data is overridden by the uniform orange fill applied in the rendering, which uses SVG elements.

AI-generated description

A demonstration of how to start using D3 version 6.

MIT Licensed

Similar vizzes

Loading thumbnail…

Assignment2_Task7_NetworkGraph

This example visualizes the Vijayanagara family lineage as an interactive network graph. It renders a force-directed layout where nodes represent historical figures and links depict familial relationships. The graph uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the nodes, which are drawn as lightblue circles with labels. The code loads data from a JSON file via d3.json and renders the visualization in SVG, with node colors, text styling, and link strokes defined in CSS.

Ssreekarthanda@gmail.com
84% match
Loading thumbnail…

DV2_7.1_graph

This graph visualization displays a network of personal relationships among eight named individuals, with orange lines representing connections between nodes. The data contains eight nodes, all sharing the same group value, and eight undirected links with varying weights, such as a stronger connection with value 5 between Vandana and Uday. The visualization uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, and forceCenter to position the large purple circular nodes in an SVG canvas. Nodes are interactive, supporting drag-and-drop via d3.drag, and respond to mouseover and mouseout events by changing their stroke color to green.

NNagateja99
76% match
Loading thumbnail…

Force Directed Graph

This visualization employs a force-directed graph to display a dataset of 410 linked nodes, loaded from a TSV file. The d3-force simulation, using `forceSimulation`, `forceLink`, and `forceManyBody`, positions the nodes with link thickness proportional to edge weight. Nodes are colored by a group value, and interactive dragging with `d3.drag` and zooming with `d3.zoom` are enabled. A separate, non-interactive adjacency matrix, built with `d3.select` and `reorder`, is shown but not linked to the graph.

Aa04775
75% match
Loading thumbnail…

Force Directed Graph

A force-directed graph displays a network of 410 nodes and their connections, with node colors assigned by group via `d3.schemeCategory10`. The visualization pairs the graph with an adjacency matrix rendered as SVG rectangles, where users can click either nodes or grid cells to highlight corresponding links and matrix positions. Built with `d3.forceSimulation`, `forceLink`, `forceManyBody`, and `forceCenter`, the graph supports drag-and-drop node repositioning and zoom/pan interactions through `d3.zoom`. The adjacency matrix uses `d3.select` to update stroke and fill opacity based on edge weights.

WWei-Che Chang
75% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes node-link relationships alongside an adjacency matrix, with both views linked by highlighting a selected node’s row and column on hover or click. The SVG rendering uses `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` to position nodes, while `d3.drag` enables interactive repositioning and `d3.zoom` supports scaling. Links are colored by group, and matrix cells reflect edge weights via fill opacity, with data loaded from CSV text.

TThe-World-Muda
74% match
Loading thumbnail…

Assignment2_Task7_Tree

This example visualizes the Vijayanagara family lineage as an animated, color-coded tree diagram, showing hierarchical generations from the founding ruler downward through descendants. The visualization uses D3.js version 3, specifically the `d3.layout.tree` for node positioning and `d3.svg.diagonal` for link paths. Each node is rendered as a circle with a fill color indicating generation level (black for root, blue for first generation, red for second, green for third). The tree expands with a 1000-millisecond transition, using node data updates to shift positions and reveal new descendants dynamically.

Ssreekarthanda@gmail.com
74% match
Loading thumbnail…

Graph Visualization

This example demonstrates a basic force-directed graph with three nodes connected by two links. The visualization uses D3’s `forceSimulation` with `forceManyBody` for repulsion and `forceLink` to define the edges, rendering nodes as SVG circles. The simulation updates node positions on each tick, which are applied to the circles’ `cx` and `cy` attributes. The data consists of a simple array of node IDs and link indices, drawn directly into an SVG container.

Eelainesoucy
74% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes relationships among programming languages, with nodes sized by degree and colored on a blue scale. Links are styled with green and black colors, while dotted lines indicate connections. The visualization uses d3.forceSimulation with forceLink, forceManyBody, and forceCenter, rendering SVG circles and curved paths that update on tick events.

Rredlac
74% match