My Knowledge Graph

100%

My Knowledge Graph

✓ Published2🌍 Public

Last edited Nov 19, 2020

Created on Nov 19, 2020

A network diagram maps related data-processing terms as colored nodes grouped into five hierarchical levels, with directed arrows showing learning dependencies between concepts. Built with D3 v5 and rendered as SVG, the visualization uses `d3.scaleOrdinal` to assign categorical colors and custom SVG markers for arrowheads. Links are drawn as simple lines with tooltips, while node positions are fixed by the dataset rather than a force simulation, presenting a static knowledge graph.

AI-generated description

MIT Licensed

Similar vizzes

Loading thumbnail…

Knowledge Graph

This knowledge graph visualizes dependencies between system components, grouped into five colored teams (Team A through Team E), with arrows indicating data flow between nodes. The SVG rendering uses d3.forceSimulation to position nodes and draw directed links with arrowhead markers. Node colors are assigned via d3.scaleOrdinal with a custom range, while runtime values and labels are embedded in the dataset. A subgraph highlights a subsection of the network, and each link includes a tooltip via SVG title elements.

Rrainyrainyguo

86% match

Loading thumbnail…

My Knowledge Graph with taxo data

This visualization displays a hierarchical knowledge graph of computer science concepts, with taxonomy data organized by depth levels. It uses a custom `CreateHierarchy` function to derive parent-child relationships from node and link data, then renders them as an SVG with color-coded nodes based on depth. The graph shows learning paths with labeled edges and arrowheads, implemented using D3 v4 selections and SVG markers. The layout manually positions nodes and links rather than using force simulation, and includes interactive elements like edge paths and text labels.

Rrainyrainyguo

84% match

Loading thumbnail…

Knowledge Graph

A force-directed knowledge graph visualizes the relationships between software components, grouping nodes into five teams and coloring them accordingly. The graph uses `d3.forceSimulation` to position nodes and links, with arrowheads defined via SVG markers to indicate directional dependencies. Each node is labeled with its name and full descriptor, while edges are differentiated by link type. The layout includes a titled subgraph area, and the rendering is done with D3 v5 in an SVG container, using a predefined color scale and manually specified data.

Ddata-inside

83% match

Loading thumbnail…

My Knowledge Graph with taxo data

This example visualizes a knowledge graph of 13 interconnected components, organized into five colored groups representing different functional categories. It shows the relationships and dependencies between entities like “Aggregation,” “Eligibility,” and “Reporting” as directed links with arrowheads. The layout is computed using `d3.forceSimulation` with forces for link distance, charge repulsion, and group-based x-positioning using `d3.forceX`, while the SVG rendering uses D3 v5 to draw nodes and edges. Node colors are assigned via a `d3.scaleOrdinal` based on group membership.

Rrainyrainyguo

82% match

Loading thumbnail…

My Knowledge Graph with taxo data

This visualization displays a knowledge graph of computer science topics, using a force-directed layout via `d3.forceSimulation` with forces for links, charge, x, y, and collision. Nodes are colored by group and positioned along vertical axes corresponding to their group value, revealing a taxonomic structure. The SVG rendering includes labeled arrows on links via `marker` elements and text paths for edge labels. The dataset is defined in a separate JavaScript file and loaded as an ES module.

Rrainyrainyguo

80% match

Loading thumbnail…

Fork of Knowledge Graph

This example shows a directed knowledge graph of robot components, organized into five color-coded teams, with arrows representing different types of process flows between nodes. Built with D3.js v5 and rendered as SVG, the visualization uses a custom arrowhead marker for directed links and scales node colors via a sequential palette. The code constructs the graph with `d3.select`, `svg.append`, and the `scaleOrdinal` color scale, mapping categorical team assignments to visual properties.

Ssgzzhinde

79% match

Loading thumbnail…

Fork of Knowledge Graph

A force-directed knowledge graph displays 13 application components as nodes and 29 directed edges as links with arrowheads, grouped by team and colored with a custom ordinal scale. Built with D3 v5, the visualization uses `d3.forceSimulation` to position nodes and SVG lines to render connections. Node labels and link types distinguish relationships such as "Next →" and "Go to →", while an embedded subgraph area and a legend with team names contextualize the network.

BButterflypatch

79% match

Loading thumbnail…

directional_knowledge_graph

This example shows a directional knowledge graph mapping the hierarchical relationships between computer science concepts, from a root topic down through nested subtopics like information retrieval and speech recognition, with colored nodes indicating depth levels. The visualization builds its layout from a dataset using d3.hierarchy-style traversal functions that compute descendant nodes and link pairs, then renders the structure as an SVG with arrowhead markers on each directed edge. Node colors are assigned via d3.scaleOrdinal, while the graph itself relies on d3.v4’s selection and data-binding methods to position the nodes and paths dynamically.

110thblock

79% match