Skip to main content
SimilarExport ZIP
100%

Concept Map

✓ Published1🌍 Public
JJoker-tr
Last edited Jan 31, 2020
Created on Jan 31, 2020
Forked from Hello VizHub

A concept map diagram visualizes the relationships between concepts and ideas, using labeled links to show connections such as "represent" and "is necessary for." The graph arranges nodes automatically with the go.js `ForceDirectedLayout`, using its spring and electrical charge physics to space concepts evenly. Nodes are rendered as gradient-filled rectangles with bold text labels, while links feature arrowheads and Radial-brush label backgrounds for readability. The data comes from a static `GraphLinksModel` containing node and link arrays, demonstrating a hierarchical knowledge structure with crosslinks between segments.

AI-generated description
MIT Licensed

Similar vizzes

Loading thumbnail…

Concept Map

A force-directed concept map visualizes the relationships between terms like "Concept Maps," "Organized Knowledge," and "Propositions." Nodes appear as labeled rectangles with gradient fills, while links include arrowheads and radial-gradient text labels. Built with GoJS, the diagram uses `go.ForceDirectedLayout` with specified spring length and electrical charge parameters, and the graph model loads node and link arrays containing the taxonomy and its interconnections.

KKatShambaugh
91% match
Loading thumbnail…

Concept Map

This concept map diagram illustrates the relationships between ideas about knowledge organization, using a force-directed layout to spread nodes apart while maintaining link proximity. Nodes appear as orange rectangles with bold text labels, while links include small background labels describing the connections between concepts. The visualization is built with GoJS, using a ForceDirectedLayout with 200 iterations, GraphLinksModel for data, and custom node/link templates. The data includes 20 concept nodes and 24 labeled links showing hierarchical and cross-connected relationships.

MMaxwellHarper
88% match
Loading thumbnail…

Interactive Force Directed Layout

This interactive example uses the GoJS library’s `ForceDirectedLayout` to create a continuously updating network diagram. Users can push and pull nodes, with selected nodes remaining fixed while others respond to simulated spring and electrical forces. The layout is invalidated during dragging, and the network is cached for efficiency, updating only when structural changes occur. Data is rendered as labeled circular nodes connected by directed links with arrowheads and gradient-backed text labels.

JJoker-tr
69% match
Loading thumbnail…

Force Directed Graph with removable links

A force-directed graph shows relationships between entities, with nodes labeled by descriptions and links representing connections. Multiple links between the same pair of nodes are combined into a single red "multiLink" with a count, while individual links appear in steel blue. Users can click and drag circular handles along the edges to selectively remove red multi-link connections. Built with D3 v6, it uses `d3.forceSimulation` and `d3.forceLink` to position nodes, and loads data from JSON files defining nodes, links, and image icons.

Ddreamofgerontius
68% match
Loading thumbnail…

graphs

This graph diagram visualizes the network of connections among concepts like Federated Learning, Edge Computing, and Machine Learning, using node size to distinguish main, child, and leaf nodes. It shows the relationships between these topics through linked nodes and colored edges. The visualization uses d3.forceSimulation with forceManyBody, forceLink, and forceCenter to compute the layout, while drag interactions allow manual repositioning. Node and link data are defined in data.js, with colors sourced from colors.js, and the scene is rendered as SVG circles, lines, and text labels.

BBrooke Joseph
68% match
Loading thumbnail…

Mind Map

A mind map visualizes a hierarchical tree structure, with nodes representing names like "Java," "Servlet," and "Salim," connected by curved links. Users can click nodes to collapse or expand their children, with smooth 750ms transitions animating the layout changes. The example uses D3.js v3 with `d3.layout.tree` for positioning, `d3.svg.diagonal` for link paths, and SVG elements styled via CSS. Node and link positions update dynamically through `transition` calls, while the fixed-depth spacing and click toggle behavior are explicitly implemented in the code.

AAvinash kumar jha
68% match
Loading thumbnail…

Force Diagrams for TaskGraph

This example demonstrates an interactive force-directed graph built with GoJS, where users can push and pull nodes in real time while a custom ContinuousForceDirectedLayout continuously recalculates node positions. The layout keeps selected nodes fixed while moving others, and it caches the force network for efficiency, invalidating it only when the model changes. Nodes appear as blue circles with text labels, and links include directional arrowheads with semi-transparent label backgrounds. The example also includes a minimal D3.js message display using `select`, showcasing integration with ES6 modules.

Aantoniojl@gmail.com
68% match
Loading thumbnail…

Untitled

A force-directed network diagram maps a graph of nodes and links, with node color and size encoding a categorical or quantitative dimension. The visualization uses d3.forceSimulation to calculate node positions and a Canvas rendering context to draw the connections and circles. Interactivity includes dragging nodes and a legend. The data appears to be synthetic or preloaded, with no external file fetch.

SSnapika
67% match