Skip to main content
100%

Sociograma

✓ Published0🌍 Public
Aandresin87
Last edited Feb 14, 2016
Created on Jan 12, 2016

Sociograma is an interactive social network visualization built with D3 v3 that renders a force-directed graph. Nodes representing individuals are connected by links, with the visualization supporting SVG, canvas, and WebGL rendering modes to display the network. The graph is animated, allowing users to explore relationships within a social education diagnostic context.

AI-generated description

You can find information usefull to use this tool reading that document <a href="DIAGNOSTICO+EN+EDUCACION+SOCIAL.pdf">PDF</a>.

Similar vizzes

Loading thumbnail…

Social Network Graph

This social network graph visualizes the relationships between individuals, with nodes representing people and links representing their connections. The network layout is computed using D3.js force-directed algorithms, specifically `d3.forceSimulation` with `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCollide` to position nodes based on their interactions. Users can drag nodes to explore the graph, and hovering highlights a node with a green stroke. The visualization is rendered as an SVG using React, with data loaded from a JSON file.

Ggeethanjalikotaru
76% match
Loading thumbnail…

Social Network Graph

A social network graph visualizes connections between named individuals, with nodes colored by group and labels identifying each person. The force-directed layout is driven by d3.forceSimulation, combining d3.forceLink for edges, d3.forceManyBody for repulsion, and d3.forceCenter to keep components together. Node and link positions update on each simulation tick, rendering circles and lines in an SVG container using D3 v7.

Ppardha1411
76% match
Loading thumbnail…

Social Network graph

This interactive network graph visualizes social connections among nine individuals, with nodes representing people and links showing relationships weighted by thickness. Users can drag nodes to reposition them, while hovering reveals tooltips displaying each person's name. Built with D3.js v4, the visualization uses `d3.layout.force` for physics-based layout, SVG for rendering, and custom mouse event handlers for the tooltip interactions. Data comes from the embedded graph.json file, which defines node groups and link weights.

Rrallabandisushen@gmail.com
76% match
Loading thumbnail…

Network Graph

This example visualizes a social network as an interactive force-directed graph using D3.js. The SVG renders circular nodes labeled with person names and blue directed links with arrowheads, showing friendship connections weighted by a numeric value. The layout relies on `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position the nodes. Nodes are draggable via `d3.drag`, and hovering highlights a node by adding a CSS class. Data comes from the local `graph.json` file.

Ssuryavamsi00024
76% match
Loading thumbnail…

Social Network graph

A social network graph displays nine named individuals as nodes grouped by color-coded categories, with weighted links connecting them by relationships. The visualization uses a force-directed layout via `d3.layout.force` to position nodes, with link stroke-width scaled by the square root of the connection weight. Node circles are styled with blue fills and pink stroke, while purple links and text labels are rendered as SVG elements defined in CSS. Data comes from an external `graph.json` file containing node names, group assignments, and weighted edge pairs, and nodes support dragging through the force layout's drag behavior.

Aadapavaishnavi12
76% match
Loading thumbnail…

Network Graph

A social network graph renders a set of named individuals as circular nodes connected by directional links, with arrowheads indicating the relationship direction. The layout is computed using the `d3.forceSimulation` API, which applies link, charge, collision, and centering forces to position the nodes dynamically. Nodes are draggable via D3's `d3.drag` behavior, and colors highlight hovered nodes. The visualization loads data from a local `graph.json` file and draws the SVG scene with D3 v6.

Mmn0658
76% match
Loading thumbnail…

Network Graph

This interactive network graph visualizes a social network of friends, with nodes representing individuals and links showing their connections. The layout is computed using D3's force-directed simulation, combining `d3.forceSimulation` with `forceLink`, `forceManyBody`, `forceCollide`, and `forceCenter` to position nodes with repulsion and attraction. Rendered as an SVG, the graph reads JSON data from a GitHub gist and displays each node as a circle with a label, using colored lines and styling from CSS.

AAISWARYAMARAPATLA1999
76% match
Loading thumbnail…

Social_Network_graph_ICE-8

This interactive network visualization shows the relationships between individuals in a social group, with nodes representing people and links representing connections. The graph uses a force-directed layout to position nodes, visually separating them into clusters based on their group assignments. Built with D3.js v4 and React, the code leverages the `d3.layout.force()` API to simulate attractive and repulsive forces between nodes, while SVG elements render the graph with styled links and nodes. Node labels display each person's name, and the simulation updates positions in real-time.

Rrajasrilekkala
75% match