anching0312.hs11@nycu.edu.tw

@Anching0312·8 public vizzes

LSA-G4

A directed knowledge graph visualizes latent semantic analysis results for a low-practice, high-test group, showing five nodes and weighted links between them. The graph uses a fixed circular layout with self-loops drawn as arcs. Built with D3.js v5, the visualization renders to SVG and applies an ordinal color scale to differentiate nodes, while link labels display numeric weights representing relationships between terms.

Feb 11, 2025

Loading thumbnail…

LSA-G4

This example visualizes a knowledge graph of Latent Semantic Analysis (LSA) components, showing relationships between five nodes with directed, weighted links and self-loops. Each node represents a data concept (e.g., AccelAmplification, Break) and is positioned in a fixed circular layout around the center, with its size reflecting a computed runtime value. The visualization uses D3 v5 to render an SVG with arrowhead markers for edge direction and a custom `selfLoopArc` function to draw curved self-referencing paths. The graph is colored by ordinal categories and displays edge weights as labels, with the underlying dataset hard-coded in JavaScript.

Feb 11, 2025

Loading thumbnail…

LSA-G3

This visualization presents a Latent Semantic Analysis (LSA) knowledge graph for the "All High group G3" dataset, displaying five concept nodes and their directional weighted relationships. Nodes are positioned circularly with self-loops and interconnections drawn as curved paths with arrowheads, where node size encodes frequency and link labels show correlation weights. Built with D3.js v5, the SVG rendering uses custom marker definitions for arrowheads and a linear scale to compute node runtime values from input sizes, with all positions fixed to prevent force-directed layout.

Feb 11, 2025

Loading thumbnail…

LSA-G3

This visualization presents a knowledge graph of latent semantic analysis (LSA) results for a low-performing group, showing five concept nodes (e.g., AccelAmplification, Break, Retracement) connected by directed, weighted links with percentage values. Nodes are arranged in a circle with fixed positions, and their sizes encode a computed runtime value derived from the original data. The graph uses D3 v5 to render an SVG with arrowhead markers for link direction, while self-loops are drawn as curved arcs. Link labels display positive and negative association strengths between concepts, with a color scale applied to group nodes by team category.

Feb 11, 2025

Loading thumbnail…

LSA-G2

A force-directed knowledge graph visualization displays the Latent Semantic Analysis (LSA) results for the low group G2. Five nodes, representing concepts like 'Break' and 'Retracement', are arranged in a circular layout with edges showing weighted relationships between them. The graph uses self-loops and directed links with arrowheads to indicate the strength and direction of semantic associations, encoded by edge labels and node size. Built with D3.js v5, the visualization uses SVG rendering and positions nodes via a circular layout computed from the dataset.

Feb 11, 2025

Loading thumbnail…

LSA-G1

This visualization presents a knowledge graph of five terms, showing the strength of connections between them through directed, weighted links. Node size represents a value from a hidden dataset, and the layout distributes nodes in a circle. The graph uses SVG rendering with D3.js v5, utilizing a custom self-loop arc function to draw curved edges. The code applies a color scale for team categories and displays numeric link weights. The graph is presented as an LSA (Latent Semantic Analysis) of the high practice, low tests group G1.

Feb 11, 2025

Loading thumbnail…

Fork of Force Directed Graph

A force-directed graph illustrates links between programming languages, with curved SVG paths and arrowheads indicating directed relationships. Green solid arrows and black dashed arrows distinguish connection types, while node size and color intensity reflect each language’s number of links. The implementation uses `d3.forceSimulation` with link, charge, and centering forces, plus `d3.drag` for interactive node movement. SVG markers (`end-arrow-normal`, `end-arrow-special`) and `d3.interpolateBlues` for node coloring enhance readability. The data originates from an inline array of language pairs, and rendering occurs entirely through SVG elements within a 1200x700 viewport.

Feb 11, 2025

Loading thumbnail…

directed graph

This example visualizes a knowledge graph of robot components using a directed node-link diagram. The SVG rendering is built with D3 v5, using a force simulation to position the nodes. A color scale maps five distinct teams, while arrowheads on the links indicate the direction of relationships between components. The code defines each node’s name, group, and runtime, and the links specify the type of connection, such as “Next –>>” or “Go to ->>”.

Feb 11, 2025