Trace

100%

✓ Published0🌍 Public

Last edited Apr 1, 2021

Created on Apr 1, 2021

This visualization shows a trace of concept relationships between source and target requirements, rendered as a hierarchical tree with two levels. The SVG layout positions source concepts on the left and target concepts on the right, connected by horizontal curved links. Users can hover over nodes to highlight related connections and trigger a tooltip displaying how the selected concept can be defined, with active links and nodes shaded gray. The code builds the graph from array data containing requirement texts and extracted concepts, using d3.linkHorizontal for the curved paths and D3 selection methods for styling and interactivity.

AI-generated description

A bare minimum HTML page demonstrating use of CSS and JavaScript.

Similar vizzes

Loading thumbnail…

Test

This example visualizes a hierarchical dependency tree for a test component, showing where it is referenced and what it uses, organized by type such as Layout, CustomField, and ApexClass. The graph is rendered as an SVG using D3.js v7, with `d3.hierarchy` and `d3.tree` computing the layout. Nodes are drawn as colored rectangles with `foreignObject` elements to display HTML labels, while edges connect parent and child nodes. The data is structured from a static JSON input, and the layout dimensions are calculated based on the tree depth.

VVincent FINET

68% match

Loading thumbnail…

Combination 2

This example shows a hierarchical graph visualization of event trace data, using grouped rectangles to represent nested records and colored nodes to distinguish between entities, attributes, and relations. The visualization is rendered using D3 v4 and the WebCola layout library (accessed through `cola.d3adaptor`) to position and group elements with constraints-based optimization. A zoomable SVG canvas displays the graph, with a color scheme defined in a separate JSON file. The graph data comes from `graph.json`, which specifies group structures and leaf descriptions.

Bbrett@cloudaccelerator.co

68% match

Loading thumbnail…

Untitled

This interactive graph visualizes a hierarchical dataset, starting with a root "flare" node and expanding through categories like "analytics," with the force-directed layout used to position nodes. Built with D3 v3, it uses `d3.layout.force()` to simulate physical forces, with node size proportional to the `size` property from the `graph.json` file. The visualization demonstrates how clicking on a parent node toggles the display of its children, allowing users to explore the tree structure. Nodes are rendered as SVG circles with labels, and links are drawn as lines, with color coding distinguishing collapsed, expanded, and leaf nodes.

JJediquu

67% match

Loading thumbnail…

Main visualization

This visualization shows trace logs from a system, plotting each trace's duration on the y-axis against its start time on the x-axis. It uses a time-based x-scale and a linear y-scale to position black bars representing individual traces, which are overlaid on colored background rectangles that cluster traces based on the length of their activity sequences. Clicking a bar triggers a popup displaying the trace's number, start and end times, and duration. The implementation uses D3 v5 APIs including `scaleTime`, `scaleLinear`, `axisBottom`, `axisLeft`, `csv`, and `select`, rendering directly to SVG.

NNikki-gea

67% match

Loading thumbnail…

Untitled

A force-directed dependency graph visualizes relationships between Linux system components, using node size and link thickness to convey dependency weight. The interactive SVG, built with Vue and d3.forceSimulation, arranges labelled nodes with arrow markers indicating directed links, distinguishing between "depends" and "needs" relationships. Nodes are color-coded by class, and a toggleable grid background aids spatial orientation. A button switches between datasets, and the graph supports zooming and panning via d3.zoom. Data loads from an external JSON file containing named nodes, grouped values, and typed, weighted links.

Ssgzzhinde

67% match

Loading thumbnail…

Graph Network

This visualization displays a graph network of nodes connected by curved arcs, showing relationships between stock-related entities. Users can hover over nodes to highlight their connections, with linked paths becoming thicker and labels enlarging for the selected element. The implementation uses React and D3 v7, with the arc layout generated through custom path calculations for elliptical curves. Data is loaded as JSON from a GitHub gist and contains parent-child node relationships with correlation scores. SVG circles represent nodes, while paths illustrate links, with node and label positions determined by a D3 point scale.

MMark Lam

67% match

Loading thumbnail…

Family Tree

This visualization presents a family tree as an animated, zoomable node-link diagram. It reads hierarchical data from a JSON file and renders it as colored, clickable rectangles connected by labeled links, using D3.js v3 and React. The layout, computed via `d3.layout.tree`, supports interactive expansion and collapse of nodes, with tooltips and drag-to-pan functionality. The tree's size adjusts dynamically based on the data, and the code includes custom SVG definitions for arrows and drop shadows.

Ssathwikrajidi

67% match

Loading thumbnail…

Network Graph

This network graph visualizes relationships among individuals and locations, with nodes labeled by names like "UNT" and connections indicating links between them. The interactive force-directed layout, built with d3.forceSimulation, incorporates link, many-body, collision, and center forces to position the nodes. The SVG renderingshowcases teal circles with direction arrows, while mouseover highlights a node using a CSS class. Data is loaded from a JSON file defining nodes and links, with colors assigned via a simple color scale.

SSravani93-creater

67% match