Skip to main content
100%

Student_Viz_Categories

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

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.

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 Network Graph

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.

Zzeyneb.mhamedi@gmail.com
90% 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
79% match
Loading thumbnail…

FZ_ICE8_Q2_SocialNetwork

This force-directed network shows relationships among students, study groups, and topics in a computer science course, using node color to indicate entity type and edges to represent collaboration or shared focus. The D3.js v7 visualization renders nodes and links as an SVG, with the layout driven by a physics simulation of repulsive and attractive forces. Interactive tooltips reveal node details on hover, while node labels are drawn from the explicit data model in the code.

Sshaikfayazfz64@gmail.com
73% 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
73% match
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.

Hhelen azad
73% match
Loading thumbnail…

Assignment 8 3

This interactive force-directed network visualization maps relationships between eight campus clubs, grouped into categories like Technology, Creative, Academic, and Recreation. It uses d3.forceSimulation with forceLink, forceManyBody, and forceCollide to position nodes, while link thickness encodes interaction strength. Colors differentiate club categories via a d3.scaleOrdinal. Dragging, hover tooltips, and labels are implemented with D3 event handlers. The SVG render is interactive, revealing each club’s category and relative size on mouseover.

SSai Vamshi B
73% match
Loading thumbnail…

Fork of ice8_q2.3_network

This is a force-directed network graph of a student-course relationship dataset. It visualizes three students (Anitha, Chetan, Navya) and five courses (CN, AI, DBMS, ML, DPDB, Python) using `d3.forceSimulation` with `forceLink`, `forceManyBody`, and `forceCenter` forces. Nodes are rendered as SVG circles, with pink for students and purple for courses, connected by gray lines. Labels are positioned to the right of each node.

Eeeshani.boyapati@gmail.com
73% match
Loading thumbnail…

Visualization3D3.js

This visualization shows student retention outcomes grouped by course, comparing the number of retained students against those who dropped out for each academic program. The data comes from a CSV dataset with a "Target" column indicating dropout or graduation status. The implementation uses D3.js v7 with SVG rendering, employing `d3.rollups` to aggregate counts, `d3.scaleBand` for the grouped bar layout, and `d3.axisBottom` and `d3.axisLeft` to generate axes. Interactive tooltips appear on mouseover, highlighting individual bar values and highlighting the hovered bar with a color change.

GGanesh Gundekarla
72% match