Skip to main content
SimilarExport ZIP
100%

Відкрито набір учасників Тренінгу для Тренерів із закупівель

✓ Published0🌍 Public
MMraleksa
Last edited Mar 9, 2017
Created on Mar 9, 2017

A network visualization of participants in a procurement trainer recruitment drive uses a force-directed layout. The graph shows nodes and connections, with colored clusters suggesting different groups or regions. Built with D3 v4's `d3.forceSimulation`, the visualization is rendered in a Vue.js framework, pulling data from a Google Sheets document. The interface includes a legend and interactive elements for exploring the relationships between trainers, likely illustrating the distribution of applicants across various categories.

AI-generated description

Built with blockbuilder.org

mit Licensed

Similar vizzes

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
62% match
Loading thumbnail…

Gist 3bf5c7b97e895c836f9afa2f1766cae6

This interactive visualization plots a directed graph from a sample dataset, revealing clusters and connections between nodes. It uses Fruchterman-Reingold force simulation via D3.js to position the nodes, with links drawn as curved paths. The visualization actively demonstrates the force-directed layout algorithm, as users can drag and move the points, causing the entire network to reorganize around the new positions.

KKopylovVitalik
62% match
Loading thumbnail…

Networking_minedu

This example shows a small network of nine individuals connected through eight weighted links, likely representing a professional or organizational hierarchy. A force-directed layout positions nodes, with circles labeled by name and red lines indicating relationships. The visualization is built using D3.js v4, specifically the `d3.layout.force` API for simulation and `d3.select` for SVG rendering. The code imports modules from D3, creates an SVG canvas of 960 by 500 pixels, and loads data from a local JSON file containing node group assignments and link weights. Node size is fixed, and link thickness is not visually encoded despite the weight data.

CCsar171991
61% match
Loading thumbnail…

Gist e4ad04560d14bf59d0642b48bf3e436b

This example visualizes a job-search and interview-preparation checklist as a network diagram. It shows the relationships between job applications, interview tasks, and study resources using a force-directed layout. The visualization uses D3.js’s `d3.forceSimulation` to position nodes and links, with each node representing a task or company and edges showing dependencies. The code renders custom SVG elements, and hover interactions highlight connected nodes. Data comes from a Markdown checklist, parsed and converted into graph form. The rendering approach emphasizes task progression, with completed items visually distinct, and uses transition tweens for smooth layout updates.

FFrankieFabuloso
61% match
Loading thumbnail…

fresh blockhtuj!!!!!!!

A clustered visualization displays a dense network of interconnected nodes, likely representing data from a Google Sheets source, rendered on a dark gray background. The visualization uses a force-directed layout, implemented with D3 v4's `d3.forceSimulation`, to position the nodes and their connecting links. The entire application is built within the Vue framework, with the compiled logic residing in `bundle.min.js`, which also includes ASN.1 encoding utilities for data parsing. The nodes and edges are drawn directly in the browser, forming an organic, web-like structure that emphasizes the relationships between data points.

MMraleksa
61% match
Loading thumbnail…

VR Force-Directed Graph

This visualization immerses viewers in a 3D force-directed graph, rendered with WebGL for smooth, real-time interaction in virtual reality. The network displays a bundle of linked modules from the D3.js library, with node size and color encoding the module’s file size and hierarchy. Built with Vue and D3’s force simulation, the graph supports immersive navigation, allowing users to explore the dependency structure from within a VR environment.

DDenisKealy
61% match
Loading thumbnail…

network map Fork of Vanilla D3 Vibecoding Template

A force-directed network graph displays six people grouped into three clusters, with link thickness encoding connection weight and node color indicating group membership. The D3.js v7 visualization uses `d3.forceSimulation` with link, charge, center, and collision forces to position nodes, while draggable circles and hover tooltips reveal individual IDs and group numbers. Data loads from a local `graph.json` file, and a legend maps each group to its color in the SVG-rendered chart.

Bbodushivani2601@gmail.com
61% match
Loading thumbnail…

Untitled

This example shows a force-directed network graph of six nodes (A-F), each colored by gender and labeled with an ID, with link thickness representing connection strength. The nodes are draggable and expand on hover, revealing tooltips with each person’s profession. The visualization uses D3 v7’s `d3.forceSimulation`, `d3.forceLink`, `d3.forceManyBody`, and `d3.forceCenter` to position elements, with `d3.drag` for interaction and `d3.scaleOrdinal` for categorical colors. Data is loaded from a local JSON file via `d3.json`. A static 6×6 adjacency matrix above the SVG complements the dynamic graph.

Sshatomouimena
60% match