Skip to main content
SimilarExport ZIP
100%

Student Network Graph

✓ Published0🌍 Public
Zzeyneb.mhamedi@gmail.com
Last edited Mar 31, 2023
Created on Mar 31, 2023
Forked from Hello VizHub

A force-directed node-link diagram displays a network of students, with each node colored by academic outcome (green for graduate, blue for enrolled, red for dropout). The visualization uses `d3.forceSimulation` with `d3.forceManyBody` and `d3.forceCenter` to compute node positions, rendered as SVG circles. Student data from a CSV file is loaded via `d3.csv`. Hovering over a node logs its information to the console.

AI-generated description

An example showing the capabilities of VizHub:

  • Loads D3 via UNPKG.
  • Demonstrates use of import from "d3".
  • Demonstrates use of import from local ES6 modules.
MIT Licensed

Similar vizzes

Loading thumbnail…

Student_Viz_Categories

A force-directed network graph visualizes student outcomes as colored nodes, with green for graduates, blue for enrolled students, and red for dropouts. Three large circles above the network act as filters, toggling the opacity of each category on click. The visualization uses D3 v5’s `d3.forceSimulation` with charge, position, and collision forces, rendering to SVG. Student data is loaded from a CSV file containing academic and demographic attributes.

Zzeyneb.mhamedi@gmail.com
90% match
Loading thumbnail…

network

This interactive network diagram visualizes a study group of seven students, with nodes representing each person and links indicating which pairs study together. Nodes are colored by academic major (CS, Math, Physics, Art), with a legend in the top-left corner. The layout is computed using a force-directed simulation built on D3 v7 APIs, including `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter`. Users can drag nodes to explore the network, and the simulation updates positions accordingly, with node positions rendered as SVG circles and text labels.

Ddeepthinaidu2001@gmail.com
80% match
Loading thumbnail…

ice8_q2.3_network

This interactive network diagram shows relationships between four students and three clubs, with students linked to clubs they attend. It uses D3 v7’s force simulation (`d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, `d3.forceCenter`) to position nodes and links, and renders them as SVG circles and lines. Node colors distinguish students (blue) from clubs (orange) via `d3.scaleOrdinal`. Drag-and-drop functionality lets users reposition nodes, with the simulation updating link, node, and label positions on each tick.

Vvineelaviswanadham07@gmail.com
79% match
Loading thumbnail…

Social Network Graph

A social network diagram shows ten fictional people grouped by academic department, with colored nodes and gray edges representing connections. Red links highlight relationships between members of different groups, such as Math and English. The visualization uses D3 v5’s `forceSimulation` with `forceLink` and `forceManyBody` to position nodes, while SVG circles and text labels render each person’s name. A `scaleOrdinal` with `schemeCategory10` assigns distinct colors to each department, and a tick handler updates node and link coordinates.

OOluoch Odhiambo
79% match
Loading thumbnail…

instructor version

This visualization displays a force-directed network graph of employee connections, with labeled nodes representing team members and links showing relationships such as "Worked together in the past" or "Referred to Join". It uses `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes, with circles and images rendered in SVG. Node colors encode project membership via predefined palettes, while text labels and drag-and-drop interaction via `d3.drag` enhance exploration. Data comes from static `team_data.js` and `colors.js` modules.

HHariharan1828
78% match
Loading thumbnail…

Vizz

This force-directed network diagram visualizes hierarchical relationships between demographic, academic, and enrollment data categories, with linked nodes representing attributes such as degree type, academic unit, and academic year. The D3 v6 simulation uses d3.forceSimulation with forceLink, forceManyBody, forceCollide, forceCenter, and forceRadial to position nodes and links. SVG circles are color-coded by group and rendered as labels within the 960×500 container. Users can drag nodes to reposition them, which triggers hover effects that highlight nodes with a thicker stroke. Data is loaded from a JSON file containing nodes and links.

RRahel Gunaratne
78% match
Loading thumbnail…

A8 - Force Directed Network Layout

This example visualizes a network of 34 students in a karate class using a force-directed layout. The code loads edge data from `data.csv` and renders SVG circles and lines with D3 v7, applying `d3.forceSimulation` with `forceManyBody`, `forceLink`, and `forceCenter` to position nodes. Node fill colors are assigned via `d3.scaleOrdinal` with `schemeCategory10`, and the final layout appears after the simulation’s `end` event updates the title.

RRavneet Singh Bhatia
78% match
Loading thumbnail…

Force Directed Graph

A force-directed graph visualizes relationships among nodes in a network, with circle size reflecting group membership and link thickness indicating connection weight. The example loads CSV data from an external source and renders an interactive SVG where users can drag nodes, zoom, and click to highlight connected rows and columns in an accompanying adjacency matrix. It uses `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` for layout, with `d3.drag` and `d3.zoom` for interaction. The code also employs `d3.csv` for data parsing and builds the matrix using SVG rectangles and text elements.

Cchungmin-yu
78% match